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