HTML and CSS Reference
In-Depth Information
overly wide menus. If your options require lengthy descriptions, then the
select
element probably isn't the
right choice and you should use a set of checkboxes or radio buttons instead.
The
select
element is a non-empty element that requires an end tag, and it acts as a container for one or
more
option
or
optgroup
elements; the
select
element must contain at least one
option
. Listing 8-15
shows a
select
element containing three
option
elements. Without a
multiple
or
size
attribute, this
control defaults to a single-line selection and only allows one option to be selected.
Listing 8-15
. A
select
element containing four
option
elements
<select name="cape-length">
<option>Short (36")</option>
<option>Medium (48")</option>
<option>Long (72")</option>
<option>Extra-long (96)</option>
</select>
You can see what this control will look like in Figure 8-18. This image is from Safari for OS X, with the
selection closed on the left and expanded on the right. Some browsers (including Safari) also indicate the
currently selected option with a check mark to the side of the label, but other browsers don't. The first
option in the list is the initial selection by default unless some other option is preselected (more on that
when we cover the
option
element next). In its open state, the focused option in the list—that is, the
option the user is about to select—is usually indicated with a highlight color.
Figure 8-18
. The same selection control in both inactive and active states
Adding a
multiple
attribute to a
select
element, as in Listing 8-16, converts the control from a single-
line drop-down menu to a multi-line box and allows the user to choose more than one option. This example
also carries a
size
attribute to set the height of the menu at five lines (thus the actual rendered height
depends on the size of the text).
Listing 8-16
. A
select
element with
size
and
multiple
attributes
<select name="suit-options" size="5" multiple>
<option>Thruster boots</option>
<option>Repulsor gauntlets</option>
<option>Multi-spectrum HUD</option>
<option>Therm-optic camouflage</option>
<option>Rust-proofing undercoat</option>
</select>
Figure 8-19 shows the result: a scrolling box displaying the options, with selected options highlighted on a
darker background color. A scroll bar isn't needed in this case because there are only five options in the
list, the same number of lines specified by the
size
attribute, but this browser (Firefox) reserves space for
a scroll bar anyway.
