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.

Votre adresse

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.

Adresse de facturation
Adresse de livraison

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 un fieldset. Le legend pose alors la question, à laquelle les radio apportent les réponses possibles.
  • Les checkbox d'un même groupe sémantique doivent être englobés d'un fieldset, mais il est également possible d'avoir des checkboxes qui se suivent sans lien entre eux ; dans ce dernier cas, le fieldset n'est pas requis.

Sous-groupes de champs

Il est tout à fait possible d'avoir des imbrications de fieldset.

Identité
Sexe

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.

Vos informations

Votre sexe

Vos choix