7.7. Regrouper et titrer les champs de même nature avec <fieldset> et <legend>

Lorsqu’un formulaire propose plusieurs groupes de champs dont certains ont des intitulés identiques, utiliser les balises <fieldset> et <legend>.

<fieldset>
   <legend>Participant 1</legend>
   <label for="prenom-1">Prénom</label>
   <input type="text" id="prenom-1" name="prenom-1" />
   <label for="nom-1">Nom</label>
   <input type="text" id="nom-1" name="nom-1" />
   […]
</fieldset>
<fieldset>
   <legend>Participant 2</legend>
   <label for="prenom-2">Prénom</label>
   <input type="text" id="prenom-2" name="prenom-2" />
   <label for="nom-2">Nom</label>
   <input type="text" id="nom-2" name="nom-2" />
   […]
</fieldset>

Attention

Les balises <fieldset> et <legend> sont systématiquement à utiliser lorsque plusieurs groupes de champs disposent d’intitulés identiques.

Par exemple :

  • Une série de questions sur une même page avec comme réponses possibles « oui » ou « non ».
  • Une liste de participants à un évènement avec à chaque fois « nom » et « prénom ».

Si le formulaire est long mais qu’aucun groupe de champs ne dispose d’intitulés identiques, utiliser les balises <h1> à <h6> pour titrer les groupes de champs.

Remarque

L’utilisation des balises <fieldset> et <legend> est notamment nécessaire lors de l’intégration de listes de boutons radio ou de cases à cocher dans la page.

Par exemple :

<fieldset>
  <legend>Sports pratiqués</legend>
  <ul>
    <li>
      <input type="checkbox" id="basket" />
      <label for="basket">Basket</label>
    </li>
    <li>
      <input type="checkbox" id="tennis" />
      <label for="tennis">Tennis</label>
    </li>
    […]
  </ul>
</fieldset>

2 commentaires

  • Par levy, le 10 septembre 2015 à 11h19.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    attention fieldset / legend ne fonctionne pas sur voiceover mac ou ios. De plus, cela oblige à effectuer des raccourcis claviers pour entrer et sortir du fieldset donc c’est donc à manipuler avec beaucoup de précaution

    Répondre

    • Par Sébastien Delorme, le 18 février 2016 à 11h15.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Aurélien,

      Comme je viens de tester à l’instant sur iOS pour un projet : sur iOS 9.2.1, avec Safari ou Firefox et VoiceOver, <fieldset>/<legend>, ne sont toujours pas supportés.
      L’usage n’est pas bloquant, mais lors de la navigation de champ en champ, le contenu de <legend> n’est pas restitué.

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page