HTML and CSS Reference
In-Depth Information
Understanding Advanced Selection Menus
Selection menus have many
variations beyond the simple selection menu used in the Web page form. Table 6-3 on
page HTML 292 lists several attributes for the <select> tag. Using these attributes, a se-
lection menu can be set to display multiple choices or only one, with a drop-down list to
allow a user to select another choice. A selection menu can also be defined to have one
choice preselected as the default.
Figure 6-15 shows samples of selection menus. The HTML code used to create
each selection menu is shown in Figure 6-16 on the next page.
size attribute value set
to 3 to display three
options by default
one choice selected
as default
simple selection
menu with
default values
multiple choice
selection menu
with two choices
(options) selected
by default
Figure 6-15 Sample selection controls with variations.
The selection menu in Sample 1 is a basic selection menu, with no attributes
specified other than the name and the list options. This resulting selection menu uses
a list menu that allows users to select one choice from the list. No choice is selected by
default. The selection menu in Sample 2 uses a size attribute value of 3 to indicate that
three choices should appear in the menu at startup. A user can use the up and down scroll
arrows to view other choices in the list. The selection menu in Sample 3 uses the mul-
tiple attribute to allow a user to select more than one choice in the list. To select multiple
choices, a user must first select one choice and then press and hold the
ctrl
key while
clicking other choices in the list. If a user wants to select several consecutive choices, he
or she can select the first choice and then press and hold the
shift
key while selecting
the last choice. All choices between the first choice and last choice automatically will be
selected. The selection menu in Sample 4 also contains the multiple attribute, so one or
more choices can be selected. In addition, Sample 4 provides an example of one choice (in
this case, Yellow) being selected at startup. As shown in the HTML code in Figure 6-16
on the next page, the selected attribute is included in the <option> tag for Yellow, to indi-
cate that Yellow should be selected at startup.
