Composants - Formulaire
Groupe de champs
Dans certains cas, il peut être justifié de grouper des champs de formulaire pour les rendre plus faciles à comprendre et à utiliser. La présence d'un lien sémantique entre ces différents champs conditionne l'utilisation ou non d'un élément englobant fieldset
.
Groupe de champs avec sémantique
Lorsqu'il existe un lien sémantique entre ces différents champs, on utilise l'élément fieldset
.
Le fieldset contient obligatoirement un legend comme premier enfant.
Groupe de champs par rapprochement sémantique
C'est le cas général où l'on va rapprocher plusieurs champs qui portent sur un même sujet.
Pour différencier des champs aux mêmes intitulés
Par ailleurs, les balises <fieldset>
et <legend>
sont systématiquement à utiliser lorsque plusieurs groupes de champs disposent d’intitulés identiques.
Groupe de certains champs spécifiques
Il s'agit des boutons radio
et des checkbox
.
- Les
radio
, qui doivent être au minimum de deux, sont toujours groupés dans unfieldset
. Lelegend
pose alors la question, à laquelle lesradio
apportent les réponses possibles. - Les
checkbox
d'un même groupe sémantique doivent être englobés d'unfieldset
, mais il est également possible d'avoir des checkboxes qui se suivent sans lien entre eux ; dans ce dernier cas, lefieldset
n'est pas requis.
Sous-groupes de champs
Il est tout à fait possible d'avoir des imbrications de fieldset
.
Groupe de champs sans lien sémantique
Dans certains cas particuliers, il peut être nécessaire de subdiviser un formulaire en différentes parties, sans pour autant que les champs d'une même partie soient liés sémantiquement. L'utilisation de fieldset
n'est alors pas forcément justifiée.
Dans ce cas, il est toujours possible d'utiliser les balises <h1>
à <h6>
pour titrer les groupes de champs, comme les h2
dans l'exemple ci-dessous. À noter : cela n'empêche pas d'utiliser des fieldset
pour les éléments qui le justifient, comme les boutons radio
ci-dessous.