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

<code html>
<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>
</code>

<note attention>**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>


<note>
**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:

<code html>
<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>
</code></note>

===== Examples =====


{{:notices:html-css:7.1.4-a.png?nolink|}}\\

<code html>

<h1>Book your train tickets</h1>

[…]

<fieldset>
     <legend>Traveller 1</legend>
     […]
</fieldset>

<fieldset>
     <legend>Traveller 2</legend>
     […]
</fieldset>

[…]

</code>

//
In this example, “Book your train tickets” have to be structured with [[notices:html-css:mettre-en-place-une-hierarchie-de-titres-logique-et-exhaustive-avec-les-balises-h1-a-h6|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”).
//

===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:integrer-les-informations-utiles-a-la-saisie-directement-dans-les-balises-label]]
  * Next recommendation: [[notices:html-css:ordonner-les-options-de-maniere-logique-dans-les-listes-deroulantes]]
</note>