<fieldset> : l'élément pour les ensembles de champs

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.

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). 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 navigation (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. Attention, cet attribut peut être source de confusion, tout élément <input> contenu au sein du <fieldset> et qui devra être associé au formulaire devra également avoir l'attribut form explicitement défini. En JavaScript, on pourra utiliser la propriété HTMLFormElement.elements pour vérifier le bon rattachement des éléments au formulaire.

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

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.

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

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" id="radio" />
    <label for="radio">L'esprit de la radio</label>
  </fieldset>
</form>

Résultat

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

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