7.7. Group and label related fields with <fieldset> and <legend>
When a form has multiple fields and some of them have the same label, use <fieldset> and <legend> to group them.
<fieldset> <legend>Participant 1</legend> <label for="firstName-1">First Name</label> <input type="text" id="firstName-1" name="firstName-1" /> <label for="name-1">Last Name</label> <input type="text" id="name-1" name="name-1" /> […] </fieldset> <fieldset> <legend>Participant 2</legend> <label for="firstName-2">First Name</label> <input type="text" id="firstName-2" name="firstName-2" /> <label for="name-2">Last Name</label> <input type="text" id="name-2" name="name-2" /> […] </fieldset>
Warning
The <fieldset> and <legend> tags must systematically be used when several groups of fields have identical labels.
For example:
- A series of different questions on the same page which can all be answered “yes” or “no”.
- A list of participants at an event, featuring the First Names and Last Names of each participant.
If the form is too long, but none of the fields groups have the same label, use the tags <h1> to <h6> to sort the fields groups.
Note
The use of <fieldset> and <legend> tags is particularly necessary when integrating radio button or checkbox lists.
For example:
<fieldset>
<legend>Sports played</legend>
<ul>
<li>
<input type="checkbox" id="basketball" />
<label for="basketball">Basketball</label>
</li>
<li>
<input type="checkbox" id="tennis" />
<label for="tennis">Tennis</label>
</li>
[…]
</ul>
</fieldset>