HTML and CSS Reference
In-Depth Information
Discussion
The label element provides a caption for the associated form field. The label element
is best for simple forms, while ARIA is better suited to form fields that need multiple
labels or whenever the label element isn't an option.
Keep in mind that a main difference between aria-labelledby and aria-describedby is
that labels are intended to be concise while descriptions may be wordier and include
more detail.
See Also
The HTML5 label specification at http://dev.w3.org/html5/markup/label.html .
7.6 Grouping Form Fields Logically
Problem
You need to group related fields within a form.
Solution
Add the fieldset element around each group of related form fields, and add a legend
as the first element within the fieldset . The legend represents a caption or title for the
group of fields:
<form>
<fieldset>
<legend>Movie Rating</legend>
<p><input type="radio" name="rating" id="rating1">
<label for="rating1">Excellent</label></p>
<p><input type="radio" name="rating" id="rating2">
<label for="rating2">Good</label></p>
<p><input type="radio" name="rating" id="rating3">
<label for="rating3">Fair</label></p>
<p><input type="radio" name="rating" id="rating4">
<label for="rating4">Poor</label></p>
</fieldset>
</form>
Do your best to keep the legend text brief.
Some assistive technologies announce the legend before the label for
every field in the fieldset . That could get quite repetitive.
 
Search WWH ::




Custom Search