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.
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/">
<legend>Subscribe to our newsletter</legend>
<label for="email">Your e-mail address</label>
<input type="email" name="email" id="email" required>
Search WWH ::

Custom Search