Groups of Fields
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
Entering a piece of more complex information sometimes requires using multiple form fields. Additionally longer forms should be grouped into groups of logically related form controls to help orientation, using <fieldset>
and <legend>
elements.
Using fieldsetsPermalink
The fieldset element is needed to establish relationships between groups of form fields. They help users to focus on the particular topic at hand.
Depending on browser and assistive technology the legend is read out with every form element, once, or not at all. This means that the content of the legend and the labels of individual field sets is very important:
- The legend should be short as a long legend is very tedious if it is read with every label.
- The individual labels should be as self-explanatory as possible.
<fieldset> <legend>I want to receive</legend> <div> <input type="checkbox" name="newsletter" id="check_1"> <label for="check_1">The weekly newsletter</label> </div> <div> <input type="checkbox" name="company_offers" id="check_2"> <label for="check_2">Offers from the company</label> <br> </div> <div> <input type="checkbox" name="assoc_offers" id="check_3"> <label for="check_3">Offers from associated companies</label> </div> </fieldset>
Using multiple (hidden) labelsPermalink
Using multiple lables introduces some flexibility to the layout of field groups and are appropriate for small amounts of clearly related fields.
<form method="post" action="#"> <div> <label for="day">Date of birth: </label> <label for="day" class="visuallyhidden">Day</label> <input type="text" id="day" maxlength="2" placeholder="01"> <label for="month" class="visuallyhidden">Month: </label> <select name="month" id="month"> <option value="01">January</option> <option value="02">Febuary</option> […] </select> <label for="year" class="visuallyhidden">Year: </label> <input type="text" id="year" maxlength="4" placeholder="1970"> </div> </form>
Related WCAG2.0 ResourcesPermalink
Success Criteria:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
Techniques: