English

<fieldset>

Grouper des champs qui vont ensemble : adresse, paiement, préférences

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • formulaires

<fieldset> + <legend> — Le groupe de champs

La balise <fieldset> regroupe des champs de formulaire liés. Le <legend> donne un intitulé au groupe. Ensemble, ils créent une structure sémantique que les technologies d'assistance comprennent.

Quand l'utiliser

Tu veux grouper les champs d'une adresse de livraison, d'un moyen de paiement, de préférences de notification, de boutons radio mutuellement exclusifs ou de tout ensemble de champs liés par un même sujet.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran annoncent le <legend> avant chaque champ du groupe. Pour des boutons radio "Taille : S, M, L", l'utilisateur entend "Taille" puis "S", pas juste "S" sans contexte.

Exemple de code

<fieldset>
  <legend>Shipping address</legend>
  <label for="street">Street:</label>
  <input type="text" id="street" name="street" autocomplete="street-address">
  <label for="city">City:</label>
  <input type="text" id="city" name="city" autocomplete="address-level2">
</fieldset>
 
<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s"> S</label>
  <label><input type="radio" name="size" value="m"> M</label>
  <label><input type="radio" name="size" value="l"> L</label>
</fieldset>

Pour aller plus loin