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... -->

Please Select:

Registration Type:

On Campus

Admission Level:


Services Utilized

Computer Lab
Moodle / Online Resources
Gym or Rec Center

Home State (US Residents):

NOTE: Displayed text should appear AFTER each checkbox element.