The Select Box (AKA Dropdown Select)

A select box allows a user to select one option from a dropdown list.

Unlike the other form elements we have been looking at, this element has its own name and uses opening and closing tags: <select>...</select>.

Dropdown lists are very similar to radio buttons, however these are more appropriate when a large amount of selections is possible (i.e. “select a state”).

option (Required)

The option element (<option>...</option>) is used within select elements to indicate each possible option. Any text between the option tags will be displayed in the dropdown box.

value (Required)

As with other form types, the value="" attribute should be unique for each option element. This will be sent back with the select elements name attribute.

selected (Optional)

The selected attribute can be used to pre-select an option. If this attribute is omitted then the first option will be pre-selected.

<p>Home State (US Residents):</p>
  <select name="home_state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO" selected>Colorado</option>
    <option value="CT">Connecticut</option>
    <!-- Continued... -->
  </select>

NOTE: Displayed text should appear AFTER each checkbox element.