La balise HTML <fieldset> : structurez vos formulaires

Pourquoi organiser un formulaire HTML ?

Imaginez un formulaire d'inscription avec vingt champs : nom, prénom, adresse, numéro de téléphone, choix d'abonnement, préférences de contact… Sans organisation, tout s'affiche à la suite, et l'utilisateur se retrouve face à une liste interminable. Résultat : confusion, abandon du formulaire, et mauvaise expérience utilisateur.

C'est exactement le problème que résout la balise <fieldset>. Elle vous permet de regrouper des champs liés entre eux à l'intérieur d'un même formulaire, en les encadrant visuellement. Associée à la balise <legend>, elle ajoute aussi un titre à chaque groupe, ce qui rend la navigation dans le formulaire beaucoup plus intuitive.

En 2026, les formulaires bien structurés sont aussi un critère d'accessibilité web (WCAG 2.2). Les lecteurs d'écran utilisés par les personnes malvoyantes s'appuient sur <fieldset> et <legend> pour annoncer le groupe de champs courant. Utiliser ces balises, c'est donc améliorer à la fois l'ergonomie et l'inclusivité de votre site.

La balise <fieldset> : définition et fonctionnement

La balise <fieldset> est un élément de bloc HTML qui entoure un groupe de champs de formulaire. Par défaut, le navigateur dessine un cadre autour du contenu qu'elle englobe, signalant visuellement que ces champs appartiennent à la même catégorie.

Elle fonctionne toujours à l'intérieur d'une balise <form> et nécessite obligatoirement une balise de fermeture </fieldset>. Son contenu peut inclure n'importe quel élément de formulaire : champs texte, cases à cocher, boutons radio, listes déroulantes, etc.

Par défaut, un <fieldset> occupe toute la largeur disponible de son conteneur. Si vous souhaitez limiter sa taille, utilisez la propriété CSS width via l'attribut style ou, mieux encore, via une feuille de style externe.

Voici un premier exemple minimal pour comprendre la structure de base :

<form>
  <fieldset>
    <!-- La balise legend donne un titre au groupe de champs -->
    <legend>Informations personnelles</legend>
    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" name="prenom" size="30"> <br>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" size="30"> <br>
    <label for="email">Email :</label>
    <input type="email" id="email" name="email" size="30">
  </fieldset>
</form>

Dans cet exemple, le navigateur affiche un cadre autour des trois champs, avec le texte « Informations personnelles » intégré dans la bordure supérieure grâce à <legend>. Simple, efficace et lisible.

Utiliser plusieurs <fieldset> dans un même formulaire

L'intérêt principal de <fieldset> apparaît clairement dès qu'un formulaire comporte plusieurs sections distinctes. Plutôt que d'avoir une seule longue liste de champs, vous pouvez découper logiquement le formulaire en blocs thématiques.

Prenons l'exemple d'un formulaire d'inscription complet, avec une section pour les données personnelles et une autre pour les préférences de contact :

<form action="traitement.php" method="post">

  <!-- Premier groupe : données d'identité -->
  <fieldset>
    <legend>Votre identité</legend>
    <label for="prenom2">Prénom :</label>
    <input type="text" id="prenom2" name="prenom" size="30"> <br>
    <label for="nom2">Nom :</label>
    <input type="text" id="nom2" name="nom" size="30"> <br>
    <label for="naissance">Date de naissance :</label>
    <input type="date" id="naissance" name="naissance">
  </fieldset>

  <!-- Second groupe : préférences de contact -->
  <fieldset>
    <legend>Préférences de contact</legend>
    <label for="email2">Email :</label>
    <input type="email" id="email2" name="email" size="30"> <br>
    <label>
      <input type="checkbox" name="newsletter" value="oui">
      Recevoir la newsletter
    </label>
  </fieldset>

  <button type="submit">S'inscrire</button>

</form>

Ce formulaire est immédiatement plus clair. L'utilisateur sait exactement quelles informations sont demandées dans chaque section, et peut remplir le formulaire étape par étape, sans se sentir submergé.

Désactiver un groupe de champs avec l'attribut disabled

L'un des atouts méconnus de <fieldset> est sa capacité à désactiver en une seule ligne tous les champs qu'il contient. Il suffit d'ajouter l'attribut disabled directement sur la balise fieldset : tous les champs du groupe deviennent automatiquement inactifs et non soumis avec le formulaire.

C'est particulièrement utile pour les formulaires conditionnels, où certaines sections ne s'activent que si l'utilisateur a coché une option précédente.

<form>

  <label>
    <input type="checkbox" id="toggle" onchange="document.getElementById('adresseGroup').disabled = !this.checked">
    Je souhaite recevoir un courrier postal
  </label>

  <!-- Ce groupe est désactivé par défaut -->
  <fieldset id="adresseGroup" disabled>
    <legend>Adresse postale</legend>
    <label for="rue">Rue :</label>
    <input type="text" id="rue" name="rue"> <br>
    <label for="ville">Ville :</label>
    <input type="text" id="ville" name="ville">
  </fieldset>

</form>

Dans cet exemple, les champs d'adresse restent grisés et inaccessibles tant que l'utilisateur n'a pas coché la case. Dès qu'il coche, le groupe s'active. C'est une technique très courante dans les formulaires modernes.

Ses attributs

La balise <fieldset> accepte les attributs HTML universels ainsi que les attributs spécifiques aux événements. Voici un récapitulatif complet.

Attributs propres à <fieldset>

En plus des attributs standards, <fieldset> possède un attribut qui lui est propre :

Attributs standards

Ces attributs sont communs à la grande majorité des éléments HTML. La colonne DTD indique dans quel type de document HTML 4.01/XHTML 1.0 ils sont autorisés : S = Strict, T = Transitional, F = Frameset.

Attributs d'événement

Ces attributs permettent d'associer des scripts JavaScript à des actions de l'utilisateur (clic, survol, frappe clavier…). Ils sont identiques pour la plupart des balises HTML.

    Vous êtes ici : Balise FIELDSET     Retour à la liste des balises

Par carabde 10 mars 2014 | Mis à jour le 19 mars 2026