Drop-Down Lists
A drop-down list, presents a list of items from which one or more are chosen.
By clicking the down-arrow at the right of the list, the full list is exposed. An item is chosen
by clicking an entry.
Choose your favorite color:
Figure 10-23. A drop-down list.
The <select> and <option> Tags
The menu of choices is created with the <select> tag. Inside this tag are
<option> tags, one for each item in the list. The general formats for the
<select> and <option> tags are shown below.
<select
id="id"
name="name"
size="n"
multiple="multiple"
disabled="disabled"
>
<option
value="text"
selected="selected"
disabled="disabled"
>
Label
</option>
...
</select>
|
Figure 10-24. General formats for <select> and <option> tags.
The id Attribute
An id can be assigned to a drop-down list if there is a need to identify it
for browser script processing. Otherwise, an id is not needed.
The name Attribute
The drop-down list can be assigned a name with the name attribute coded in the
<select> tag. The list name becomes associated with the value of the item selected
for certain types of server processing.
The <option> Tag
Items are defined for appearance in a drop-down list with the <option> tag.
There are as many tags as there are items in the list. The label for the option is entered between
the opening and closing tags. This is the text string that is visible in the list and becomes the
default value for the selection.
The value Attribute
By default, the value associated with a drop-down option is given by the text label included in
the <option> tag. However, a value attribute can be coded to
supply a different value from the label. You might choose to do this when the labels are extended
text strings but you need only to collect abbreviated codes for the values.
The code below shows the basic tags and attributes needed to create a drop-down list. It produces
the list shown above in Figure 10-23.
Choose your favorite color:<br>
<select id="Color">
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
<option value="M">Maroon</option>
<option value="P">Purple</option>
<option value="A">Aqua</option>
<option value="T">Teal</option>
</select>
Listing 10-17. Basic code for a drop-down list.
The size Attribute
The size attribute of the <select> tag indicates the number of
items that are visible in the list. By default, the list displays only one item. If a size is
specified, the list displays that number of items and, if necessary, a scroll bar to access them.
A drop-down list that uses the size attribute or displays more than one option is often referred
to as a selection list. The list shown below uses the attribute size="4" to
display four items at a time.
Choose your favorite color:
Figure 10-26. A selection list permitting multiple selections.
The selected Attribute
Items in the list can be pre-selected by coding the selected="selected" attribute
in the associated <option> tag. Multiple pre-selections can be made only when
multiple="multiple" is coded for the <select> tag. The selection list in
Figure 10-26 has three items (Red, Blue, Aqua) pre-selected.
The disabled Attribute
The disabled attribute is used to disable and grays out the control so that the
user can not interact with it. The disabled attribute is often associated with
controls that are assigned default values using the value attribute. With the
disabled attribute, users are not able to change or copy the default value.
The <optgroup> Tag
The items in a drop-down list can be grouped using the <optgroup> element.
The tag includes a label attribute that is used to specify the label for each group of
options in the list. The code below shows how the tag is used.
Select a Tree:<br>
<select id="Trees">
<optgroup label="Pines">
<option value="Longleaf">Long Leaf Pine</option>
<option value="Loblolly">Loblolly Pine</option>
</optgroup>
<optgroup label="Oaks">
<option value="Red">Southern Red Oak</option>
<option value="Live">Live Oak</option>
<option value="White">White Oak</option>
<option value="Scarlet">Scarlet Oak</option>
</optgroup>
<optgroup label="Elms">
<option value="American">American Elm</option>
<option value="Slippery">Slippery Elm</option>
</optgroup>
</select>
Select a Tree: