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.

Attributs

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

disabled
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
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
Le nom associé au groupe.
Note : L'étiquette du groupe de contrôle est donné par le premier élément enfant <legend> du <fieldset>.

Mise en forme avec CSS

L'élément <fieldset> est quelque peu particulier pour la mise en forme.

La valeur initiale de la propriété display pour cet élément est block et l'élément crée un contexte de formatage de bloc. Si l'élément <fieldset> est mis en forme avec une valeur display qui correspond à un style en ligne, celui-ci se comportera comme inline-block et sinon comme block. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger padding. Par défaut, l'élément a min-inline-size: min-content.

Si un élément <legend> est présent, il est placé au dessus de la bordure située au début de l'axe de bloc. L'élément <legend> se réduit si besoin et établit également un contexte de formatage. Sa valeur display utilisée est block (autrement dit, on pourra le cibler avec display: inline, il continuera de se comporter comme block).

Une boîte anonyme contiendra le contenu de <fieldset> et héritera de certaines propriétés de <fieldset>. Si l'élément <fieldset> est mis en forme avec display: grid ou display: inline-grid, la boîte anonyme aura un contexte de formatage de grille. Si <fieldset> est mis en forme avec display: flex ou display: inline-flex, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.

Note : À l'heure où nous écrivons ces lignes, Microsoft Edge et Google Chrome contiennent des bogues qui empêchent d'utiliser les boîtes flexibles et les grilles à l'intérieur d'un élément <fieldset>. Cette issue GitHub fournit les liens vers les différents bugs.

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.
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
disabledChrome Support complet OuiEdge Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
Firefox Support complet OuiIE Support complet Oui
Notes
Support complet Oui
Notes
Notes 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].
Opera Support complet 12Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet OuiEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS Support complet 6Samsung Internet Android Support complet Oui
formChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
nameChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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