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

Exemple interactif

<form>  <fieldset>    <legend>Choisissez votre monstre préféré</legend>    <input type="radio" name="monster" value="K" />    <label for="kraken">Kraken</label><br />    <input type="radio" name="monster" value="S" />    <label for="sasquatch">Sasquatch</label><br />    <input type="radio" name="monster" value="M" />    <label for="mothman">Mothman</label>  </fieldset></form>

legend {  background-color: #000;  color: #fff;  padding: 3px 6px;}input {  margin: 0.4rem;}

Comme on peut le voir dans l'exemple ci-dessus, 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 notammentform dont la valeur correspond à la valeur de l'attributid 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'attributdisabled permet de désactiver l'élément<fieldset> ainsi que l'ensemble de son contenu via une seule valeur.

Attributs

Cet élément inclut lesattributs universels.

disabled

Si cet attribut booléen est utilisé, tous les contrôles de formulaire descendants de<fieldset>, sont désactivés, c'est-à-dire qu'ils ne sont pas éditables et ne seront pas envoyés avec le<form>. Ils ne recevront aucun évènement de navigation, comme les clics de souris ou les évènements liés au focus. Par défaut, les navigateurs affichent ces contrôles comme grisés. Notez que les éléments de formulaire à l'intérieur de l'élément<legend> ne seront pas désactivés.

form

Cet attribut prend la valeur de l'attributid d'un élément<form> auquel vous souhaitez rattacher le<fieldset>, même s'il n'est pas imbriqué dans le formulaire. Veuillez noter que l'utilisation de cet attribut peut prêter à confusion — si vous souhaitez que les éléments<input> à l'intérieur du<fieldset> soient associés au formulaire, il faut utiliser l'attributform directement sur ces éléments. Vous pouvez vérifier quels éléments sont associés à un formulaire via JavaScript, en utilisantHTMLFormElement.elements.

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 estblock et l'élément crée uncontexte de formatage de bloc. Si l'élément<fieldset> est mis en forme avec une valeurdisplay qui correspond à un style en ligne, celui-ci se comportera commeinline-block et sinon commeblock. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un légerpadding. Par défaut, l'élément amin-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 valeurdisplay utilisée estblock (autrement dit, on pourra le cibler avecdisplay: inline, il continuera de se comporter commeblock).

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 avecdisplay: grid oudisplay: inline-grid, la boîte anonyme aura un contexte de formatage de grille. Si<fieldset> est mis en forme avecdisplay: flex oudisplay: 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.

N'hésitez pas à donner au<fieldset> et au<legend> le style que vous souhaitez pour l'adapter au design de votre page.

Exemples

Exemple simple

Cet exemple montre un<fieldset> très simple, avec un<legend>, et un seul contrôle à l'intérieur.

HTML

<form action="#">  <fieldset>    <legend>Titre simple</legend>    <input type="radio" name="radio" />    <label for="radio">L'esprit de la radio</label>  </fieldset></form>

Résultat

<fieldset> désactivé

Dans cet exemple, on voit comment l'attributdisabled 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&nbsp;: </label>      <input type="text" value="Chris" />    </div>    <div>      <label for="pwd">Archétype&nbsp;: </label>      <input type="password" value="Wookie" />    </div>  </fieldset></form>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément<legend>
• L'élément<input>
• L'élément<label>
• L'élément<form>