7.7. Group 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> elements should 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, which all have a First Name and Last Name.

If the form is too long, but none of the fields have the same label use the tags <h1> to <h6> to sort the fields groups.

Note

It is also a good practice to group radio buttons and checkboxes with <fieldset> and <legend>.

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>

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top