Table of Contents

7.2.1. Group and title fields of the same type with <fieldset> and <legend>

When a form proposes several groups of fields, some of which have identical text labels, use the <fieldset> and <legend> tags.

For example: 

<fieldset>
    <legend>Participant 1</legend>
 
    <label for="first-name-1">First name</label>
    <input type="text" id="first-name-1" name="first-name-1" />
 
    <label for="surname-1">Surname</label>
    <input type="text" id="surname-1" name="surname-1" />
 
    […]
</fieldset>
 
<fieldset>
    <legend>Participant 2</legend>
 
    <label for="first-name-2">First name</label>
    <input type="text" id="first-name-2" name="first-name-2" />
 
    <label for="surname-2">Surname</label>
    <input type="text" id="surname-2" name="surname-2" />
 
    […]
</fieldset>

Warning

The <fieldset> and <legend> tags should only be used when several groups of fields have the same text labels. For example:

  • A series of questions on the same page with the same possible answers, “yes” or “no”.
  • A list of participants for an event with “First name” and “Surname” for each one.

In all other situations:

  • Do not use the <fieldset> and <legend> tags.
  • Use the <h1> to <h6> for block headings.

Note

It is a good accessibility practice to use the <fieldset> and <legend> tags when including lists of radio buttons or checkboxes on a page.

For example: 

<fieldset>
    <legend>Title</legend>
    <ul>
        <li>
            <label for="Mrs">
                <input id="mrs" type="radio" name="title" value="Mrs." />
                Mrs.
            </label>
        </li>
        <li>
            <label for="Mr">
                <input id="mr" type="radio" name="title" value="Mr." />
                Mr.
            </label>
        </li>
    </ul>
</fieldset>

Examples


<h1>Book your train tickets</h1>
 
[…]
 
<fieldset>
     <legend>Traveller 1</legend>
     […]
</fieldset>
 
<fieldset>
     <legend>Traveller 2</legend>
     […]
</fieldset>
 
[…]

In this example, “Book your train tickets” have to be structured with heading tag. The texts “Traveller 1” and “Traveller 2” must be structured with <fieldset> and <legend> because they relate to fields with identical labels (“Age”, “Season ticket” and “Loyalty program”).