<fieldset> : l'élément pour les ensembles de champs
L'élément HTML <fieldset>
est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>
) dans un formulaire web.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
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). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. 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. On notera que les éléments de formulaires au sein de l'élément
<legend>
ne seront pas désactivé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="text" id="name" value="Chris">
</div>
<div>
<label for="pwd">Archétype : </label>
<input type="password" id="pwd" 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 (en-US) |
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
BCD tables only load in the browser
Voir aussi
- Les éléments HTML relatifs aux formulaires :