HTML and CSS Reference
In-Depth Information
<option>Green</option>
<option
selected
>Red</option>
<option>Blue</option>
</select>
In this example, the Red option would be selected by default.
Using the value Attribute for the <option> Element
There will be times when the text inside an
<option>
element needs to be different from the value that is sent
when the form is submitted.
An example would be if you needed to collect a user ID. It is unlikely that an admin user would be able to remember
the numeric user ID of every user on the system, so you would want the users' names to be displayed in the drop-
down menu but their IDs to be sent in the form. You can do this by adding a
value
attribute to the
<option>
ele-
ment.
<option
value=”23”
>Joe Balochio</option>
When the form is submitted, the value will be used rather than the text contained between the
<option>
tags.
Allowing Multiple Selections
You can allow your users to select more than one option. Specifying the
multiple
attribute on the
<select>
ele-
ment will allow you to do this. Users will then have to press and hold the CTRL key (or the CMD key on a Mac) to
select multiple options from the list.
Grouping Options
When you have a
<select>
element with several options, you may want to use the
<opt
group>
element to make it easier for your users to find the one they want. The
<optgroup>
element should be
placed inside the
<select>
element and should contain all the
<option>
elements that are related to the group.
You can specify a name for an options group using its
title
attribute.
This example code shows how you could create a drop-down menu that has multiple option groups.
<select name=”food” id=”food”>
<optgroup title=”Dairy”>
<option>Milk</option>
<option>Egg</option>
<option>Cheese</option>
</optgroup>
<optgroup title=”Bakery”>
<option>Bread</option>
<option>Rolls</option>
<option>Baguette</option>
</optgroup>
</select>
Figure 5-12 shows this example displayed in a web browser.
