You are here:
- Manual
- Development
- Forms
- Grouping input fields
Forms: Grouping input fields in forms
In large, complex forms, input fields and their labels can often be grouped together, for instance in Personal details or Your comments. Grouping input fields renders a form more accessible and easier to take in.
Apply this grouping by means of the fieldset element: the <fieldset></fieldset> tags are placed around a collection of input fields, labels and texts.
In graphic browsers the fieldset sections are presented as boxes. Obviously, their appearance can be modified by means of CSS (Cascading Style Sheets). Visitors with special browsers, such as screen readers, can ‘jump’ from one fieldset section to another; and therefore complete complex forms more easily.
Apply grouping of input fields by means of the fieldset element.
Guideline R-pd.13.3
“Divide large blocks of information into more manageable groups where natural and appropriate”
Labelling fieldset
Input fields, labels and texts that have been grouped with fieldset markup can be given a label to make the meaning of the group clear to the visitor. There is a separate element for this, the legend element, which is placed inside the fieldset markup.
Examples of using the legend element (HTML)
<fieldset>
<legend>Personal details</legend>
...
</fieldset>
In many graphic browsers the standard legend markup looks rather odd. The text inside the <legend></legend> tags is placed on top of the box of the fieldset section. Modifying this effect with CSS is very difficult and produces an inconsistent effect in various browsers. Therefore, web developers sometimes choose to use heading markup (h1 up to h6, markup for headings) rather than legend. In that case, they must apply the correct hierarchy in the headings.
Heading markup instead of the legend element (HTML)
<fieldset>
<h4>Personal details</h4>
...
</fieldset>
Use of the legend or markup for headings in a fieldset section is optional; use it if the fieldset section needs to be clarified for the visitor.
