WEEK: 5
Active: Not Currently Active
Work Due:

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 (ie. “select a state”).

The Option Element

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.

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.

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

<form action="http://www.example.com/profile.php">
    <p>Select your home state: </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>
        <!-- ...rest removed form example code for space -->
    </select>
</form>

Select your home state:


Previous section:
Next section: