L'élément HTML <fieldset> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire web.

Comme on peut le voir dans l'exemple ci-avant, l'élément <fieldset> permet de regrouper une partie d'un formulaire HTML et d'associer une légende (<legend>) décrivant ce groupe. Cet élément utilise quelques attributs et notamment form dont la valeur correspond à la valeur de l'attribut id d'un élément <form> de la même page. De cette façon, on peut avoir un élément <fieldset> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut disabled permet de désactiver l'élément <fieldset> ainsi que l'ensemble de son contenu via une seule valeur.

Note : L'élément fieldset doit établir un nouveau contexte de mise en forme de bloc (cf. la spécification HTML5).

Attributs

Cet élément prend en charge les attributs universels.

disabled HTML5
Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités) à l'exception de ceux qui descendent du premier élément <legend>. Ces contrôles ne recevront pas les évènements liés à la navigations (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés.
form HTML5
La valeur de cet attribut correspond à la valeur de l'attribut id de l'élément <form> auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément <form> dont l'élément <fieldset> est le descendant.
name HTML5
Le nom associé au groupe.
L'étiquette du groupe de contrôle est donné par le premier élément enfant <legend> du <fieldset>.

Mise en forme avec CSS

Il n'y pas vraiment de spécificité relative à <fieldset>. La valeur de la propriété display vaut block par défaut et les navigateurs mettent en forme cet élément avec une bordure noire de 1 pixel ainsi qu'un léger padding. Si un élément <legend> est présent, il est placé au dessus de la bordure haute.

Les éléments <fieldset> et <legend> peuvent être mis en forme avec CSS pour s'adapter au design de votre document.

Note : À la différence des autres éléments, la spécification WHATWG suggère que min-width: min-content pour le style par défaut de fieldset. La plupart des navigateurs implémentent cette mise en forme ou quelque chose qui s'en approche.

Exemples

Exemple simple

HTML

<form action="test.php" method="post">
  <fieldset>
    <legend>Titre</legend>
    <input type="radio" name="radio" id="radio">
    <label for="radio">Cliquez moi</label>
  </fieldset>
</form>

Résultat

<fieldset> désactivé

Dans cet exemple, on voit comment l'attribut disabled permet de désactiver un élément <fieldset> et l'ensemble de ses éléments par la même occasion.

HTML

<form action="#">
  <fieldset disabled>
    <legend>Fieldset désactivé</legend>
    <div>
      <label for="name">Nom : </label>
      <input type="name" id="text" value="Chris">
    </div>
    <div>
      <label for="pwd">Archétype : </label>
      <input type="password" id="text" value="Wookie">
    </div>
  </fieldset>
</form>

Résultat

Résumé technique

Catégories de contenu Contenu de flux, racine de sectionnement, contenu énuméré, élément relatif aux formulaires, contenu tangible.
Contenu autorisé Un éventuel élément <legend> suivi par du contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôles ARIA autorisés group, presentation
Interface DOM HTMLFieldSetElement

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<fieldset>' dans cette spécification.
Standard évolutif Définition de l'élément fieldset.
HTML Living Standard Standard évolutif Suggestion de l'affichage par défaut pour les éléments fieldset et legend.
HTML5
La définition de '<fieldset>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<fieldset>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui Oui Oui Oui Oui
disabled Oui Oui Oui Oui1126
form Oui Oui Oui Oui Oui Oui
name Oui Oui Oui Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui Oui Oui Oui Oui
disabled4.4 Oui Oui ? ?6 Oui
form Oui Oui Oui Oui Oui Oui Oui
name Oui Oui Oui Oui Oui Oui Oui

1. Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon, ethertank, teoli
Dernière mise à jour par : SphinxKnight,