Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
10.7 Multiple Choice Elements
Checkboxes and radio buttons give you powerful means for creating multiple-choice questions and answers, but they can lead to long forms that are tedious to write and put a fair amount of clutter onscreen. The
10.7.1 The
By placing a list of
Function:
Create single-and multiple-choice menus
Attributes:
CLASS ONKEYPRESS
DIR ONKEYUP
DISABLED ONMOUSEDOWN
ID ONMOUSEMOVE
LANG ONMOUSEOUT
MULTIPLE ONMOUSEOVER
NAME ONMOUSEUP
ONBLUR ONSELECT
ONCHANGE SIZE
ONCLICK STYLE
ONDBLCLICK TABINDEX
ONFOCUS TITLE
ONKEYDOWN
End tag:
; never omitted
Contains:
select_content
Used in:
form_content
As with other form tags, the name attribute is required and used by the browser when submitting the
10.7.1.1 The multiple attribute
To allow more than one option selection at a time, add the multiple attribute to the
10.7.1.2 The size attribute
The size attribute determines how many options are visible to the user at one time. The value of size should be a positive integer. The default value is 1 when size isn't specified. At size=1, if multiple is not specified, the browser typically displays the
Size values greater than one or specification of the multiple attribute cause the
In the following example, we've converted our previous checkbox example into a scrolling, multiple-choice menu. Notice also that the size attribute tells the browser to display three options at a time:
What pets do you own?
The result is shown in
Figure 10.5, along with the change in appearance when the
size attribute is set to 1 and multiple is not specified.
Figure 10.5: A
10.7.2 The
Use the
Function:
Define available options within a
CLASS ONMOUSEDOWN
DIR ONMOUSEMOVE
DISABLED ONMOUSEOUT
ID ONMOUSEOVER
LABEL ONMOUSEUP
LANG ONSELECT
ONCLICK SELECTED
ONDBLCLICK STYLE
ONKEYDOWN TITLE
ONKEYPRESS VALUE
ONKEYUP
End tag:
; always omitted
Contains:
plain_text
Used in:
select_content
The browser displays the
10.7.2.1 The value attribute
Use the value attribute to set a value for each option the browser sends to the server if that option is selected by the user. If the value attribute has not been specified, the value of the option is set to the content of the
As an example, consider these options:
Both have the same value. The first is explicitly set within the
10.7.2.2 The selected attribute
By default, all options within a multiple-choice
10.7.2.3 The label attribute
Normally, the contents of the
10.7.3 The
Menus of choices in forms can be quite large, making them difficult to display and use. In these cases, it is helpful to group related choices, which can then be presented as a set of nested, cascading menus to the user. New in HTML 4.0, the
Function:
Group related
CLASS ONKEYUP
DIR ONMOUSEDOWN
DISABLED ONMOUSEMOVE
ID ONMOUSEOUT
LABEL ONMOUSEOVER
LANG ONMOUSEUP
ONCLICK ONSELECT
ONDBLCLICK STYLE
ONKEYDOWN TITLE
ONKEYPRESS
End tag:
; may be omitted
Contains:
optgroup_contents
Used in:
select_content
Use the
The browser creates submenus for each
...
...
...
Since no browser yet supports the
Regrettably, the biggest drawback to the
10.7.3.1 The label attribute
Use the label attribute to define an optgroup's submenu title to the user. You should keep the label
short and to the point, to ensure that the menu can be displayed easily on a large variety of displays.
10.6 Multiline Text Areas
10.8 General Form Control
Attributes