HTML and CSS Reference
In-Depth Information
Required Attributes
There are no required attributes for the
legend
element.
Optional Attributes
The
legend
element doesn't have any optional attributes.
label
Perhaps the most useful and meaningful element for structuring forms, the
label
element designates a
text label for a specific control. A
label
element may enclose both the control and its text label, in which
case the connection between the two elements is implied only by context. Alternatively, the
label
element
may carry an optional
for
attribute whose value corresponds to the control's unique ID, explicitly declaring
the connection between the two elements. Even if the
label
element encloses both the text and the
control, the
for
and
id
attributes reinforce the connection; neither attribute is required, but both are good
to have. It's possible (but rare) for more than one
label
to share the same
for
value, in which case all
those labels are associated with the same control.
When a
label
is properly associated with a control, most browsers will make the entire label area
clickable to give focus to the specified control. This feature especially makes checkboxes and radio
buttons easier to use because the text label enlarges the clickable area, and those controls can present
very small targets for a mouse pointer to land on. Screen readers will announce each field's label as the
user moves from control to control, and forms can be very difficult for visually impaired visitors to negotiate
without proper labels.
When laying out a form, labels for text fields and selection menus typically appear above or to the left of
the control, while labels for checkboxes and radio buttons should appear to the control's right (in left-to-
right languages; right-to-left languages reverse the directions). These aren't rules dictated by web
standards, just usability conventions established over time.
Listing 8-24 expands our newsletter subscription form, this time adding some more structural markup.
We've added options to choose either plain text or HTML e-mails and wrapped them in a nested
fieldset
because those controls are a subset of the complete set. They're in an unordered list because it's a list of
two options in no particular order, so that markup makes good sense. We've added labels to identify the e-
mail address field as well as the radio buttons for choosing a format, and all of them are explicitly
connected to their controls with
for
attributes. It might look like a lot of extra markup for such a simple
form, but the benefits gained in improved usability, accessibility, and meaningful structure are worth it.
Listing 8-24
. A form structured with
fieldset
s, lists, paragraphs, and
label
s
<form method="post" action="/apps/subscribe.py">
<fieldset>
<legend>Subscribe to our newsletter</legend>
<p>
<label for="email">Your e-mail address</label>
<input type="email" name="email" id="email" required>
</p>
