Assembling Forms and Applicationsoverly 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
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
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.