<fieldset>

Un groupe de champs de formulaire liés, avec un cadre et une légende `<legend>`.

Affichage: block
Balise fermante: Obligatoire
Contenu autorisé: Un <legend> facultatif comme premier élément, puis du contenu de flux

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Attributs
Attributs en pratique
CSS par défaut
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<form>
  <fieldset>
    <legend>Niveau</legend>
    <div><label><input type="radio" name="level" value="beginner" checked> Je commence de zéro</label></div>
    <div><label><input type="radio" name="level" value="basics"> Je connais les bases du HTML</label></div>
    <div><label><input type="radio" name="level" value="advanced"> J’écris déjà du JavaScript</label></div>
  </fieldset>
</form>

Aperçu

Définition et utilisation

L’élément <fieldset> réunit plusieurs champs liés en un seul groupe, par exemple « Coordonnées » ou « Adresse de livraison ». Par défaut, le navigateur dessine un cadre autour du groupe et affiche le premier élément <legend> sur son bord supérieur, comme une légende.

Le groupe compte beaucoup pour l’accessibilité avec les boutons radio et les cases à cocher. Une question comme « Niveau » écrite dans <legend> sera annoncée par un lecteur d’écran à l’entrée dans le groupe, pour que les réponses « Débutant » et « Avancé » ne restent pas en l’air.

L’attribut disabled sur <fieldset> désactive en une fois tous les champs du groupe (sauf ceux de son premier <legend>). C’est un moyen pratique de verrouiller une partie du formulaire jusqu’à ce que l’utilisateur sélectionne l’option requise.

Syntaxe

<fieldset>
  <legend>Nom du groupe</legend>
  …
</fieldset>

Attributs

disabled
attribut booléen
Désactive tous les champs du groupe en même temps. Leurs valeurs ne seront pas envoyées.
name
texte
Le nom du groupe, utile en JavaScript, par exemple form.elements.nom. <fieldset> lui-même n’envoie aucune valeur.

Attribut	Valeurs	Description
disabled	attribut booléen	Désactive tous les champs du groupe en même temps. Leurs valeurs ne seront pas envoyées.
name	texte	Le nom du groupe, utile en JavaScript, par exemple `form.elements.nom`. `<fieldset>` lui-même n’envoie aucune valeur.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

Attributs en pratique

disabled

attribut booléen

Désactive tous les champs du groupe en même temps. Leurs valeurs ne seront pas envoyées.

HTML

<fieldset disabled>
  <legend>Informations de facturation</legend>
  <p><label>SIRET <input type="text" name="siret"></label></p>
  <p><label>Nom de l’entreprise <input type="text" name="company"></label></p>
</fieldset>

Aperçu

CSS par défaut

La plupart des navigateurs affichent cet élément avec ces styles par défaut :

CSS

fieldset {
  display: block;
  margin-inline: 2px;
  border: 2px groove ThreeDFace;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
  min-inline-size: min-content;
}

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Le min-inline-size: min-content par défaut fait que <fieldset> refuse de se rétrécir, par exemple dans une grille sur téléphone. min-inline-size: 0 permet de corriger cela.
Vous supprimez le cadre avec border: 0, mais conservez le groupe et le <legend> eux-mêmes. La sémantique fonctionne indépendamment de l’apparence.
N’enveloppez pas un champ unique dans <fieldset>. Un groupe a du sens pour plusieurs champs liés entre eux.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours