Database Reference
In-Depth Information
Radio buttons
A group of radio buttons consists of
<input>
elements of type
radio
, all with the
same
name
attribute. Each element also includes a
value
attribute. A label to display
can be given after the
<input>
tag. To mark an item as the default initial selection,
add a
checked
attribute. The following radio button group displays the possible
cow figurine sizes, using
checked
to mark
medium
as the initially selected value:
<input
type=
"radio"
name=
"size"
value=
"small"
/>
small
<input
type=
"radio"
name=
"size"
value=
"medium"
checked=
"checked"
/>
medium
<input
type=
"radio"
name=
"size"
value=
"large"
/>
large
Pop-up menus
A pop-up menu begins and ends with
<select>
and
</select>
tags, with each item
in the menu enclosed within
<option>
and
</option>
tags. Each
<option>
element
has a
value
attribute, and its body provides a label to be displayed. To indicate a
default selection, add a
selected
attribute to the appropriate
<option>
item. If no
item is so marked, the first item becomes the default, as is the case for the following
pop-up menu:
<select
name=
"color"
>
<option
value=
"Black"
>
Black
</option>
<option
value=
"Black & White"
>
Black
&
White
</option>
<option
value=
"Brown"
>
Brown
</option>
<option
value=
"Cream"
>
Cream
</option>
<option
value=
"Red"
>
Red
</option>
<option
value=
"Red & White"
>
Red
&
White
</option>
<option
value=
"See-Through"
>
See-Through
</option>
</select>
Scrolling lists
A scrolling list displays as a set of items in a box. The list may contain more items
than are visible in the box, in which case the browser displays a scrollbar so the user
can bring the other items into view. The HTML syntax for scrolling lists is similar
to that for pop-up menus, except that the opening
<select>
tag includes a
size
attribute indicating how many rows of the list should be visible in the box. By
default, a scrolling list is a single-pick element;
Recipe 20.3
discusses how to enable
multiple picks.
The following single-pick scrolling list includes an item for each US state, of which
six at a time are visible:
<select
name=
"state"
size=
"6"
>
<option
value=
"AL"
>
Alabama
</option>
<option
value=
"AK"
>
Alaska
</option>
<option
value=
"AZ"
>
Arizona
</option>
<option
value=
"AR"
>
Arkansas
</option>
<option
value=
"CA"
>
California
</option>
…
<option
value=
"WV"
>
West Virginia
</option>
