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>

<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>

<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”).