formulaires block

<fieldset>

Regroupe des contrôles de formulaire connexes et les associe à une légende commune via legend.

Description

L’élément <fieldset> regroupe plusieurs contrôles de formulaire logiquement liés. Il doit contenir un <legend> comme premier enfant pour décrire le groupe. Il crée un landmark ARIA group avec son legend comme nom accessible. L’attribut disabled désactive tous les contrôles du groupe en une seule fois.

Syntaxe

<fieldset>
  <legend>Informations personnelles</legend>
  <label for="prenom">Prénom :</label>
  <input type="text" id="prenom" name="prenom">
</fieldset>

Exemples

Groupe d’options de livraison :

<fieldset>
  <legend>Mode de livraison</legend>

  <label>
    <input type="radio" name="livraison" value="standard">
    Standard (3-5 jours) — Gratuit
  </label>

  <label>
    <input type="radio" name="livraison" value="express">
    Express (24h) — 9,99 €
  </label>
</fieldset>

Groupe désactivé :

<fieldset disabled>
  <legend>Adresse de facturation (identique à la livraison)</legend>
  <input type="text" name="adresse_fact" value="12 rue de l'Exemple">
</fieldset>

Attributs spécifiques

AttributTypeDescription
disabledbooleanDésactive tous les contrôles du groupe (et les exclut de la soumission).
formstringID du formulaire auquel ce fieldset est associé (si hors du <form>).
namestringNom du groupe, accessible via JavaScript.

Notes

<fieldset> pour les radios et checkboxes : regrouper des <input type="radio"> ou des <input type="checkbox"> dans un <fieldset> avec un <legend> est la pratique d’accessibilité correcte — le legend est annoncé avec chaque option par les lecteurs d’écran.

Style : le rendu par défaut (bordure + legend en incrustation) peut être personnalisé. Utiliser border: none; padding: 0; margin: 0 pour repartir de zéro.

Support navigateurs

Chrome1+ · Firefox1+ · Safari≤4+ · Edge12+