When introducing form controls,
the code was kept simple by
indicating the purpose of each
one in text next to it. However,
each form control should have
element as this
makes the form accessible to
element can be
used in two ways. It can:
1. Wrap around both the text
description and the form input
(as shown on the ﬁrst line of the
example to your right).
2. Be kept separate from the
form control and use the
attribute to indicate which form
control it is a label for (as shown
with the radio buttons).
attribute states which
form control the label belongs to.
Note how the radio buttons use
attribute. The value of the
id attribute uniquely identiﬁes an
element from all other elements
on a page. (The
covered on page 183.)
The value of the
matches that of the
on the form control it is labelling.
This technique using the
<label>Age: <input type="text" name="age" /></label>
<input id="female" type="radio" name="gender"
<input id="male" type="radio" name="gender"
attributes can be used on any
form control. When a
element is used with a checkbox
or radio button, users can click
on either the form control or the
label to select. The expanded
clickable area makes the form
easier to use. The position of the
label is very important. If users
do not know where to enter
information or what information
to enter, they are less likely to
use the form correctly.
As a rule of thumb, here are the
best places to place labels on
AboVE or to thE lEFt:
to thE rIGht:
Individual radio buttons