Balise HTML <fieldset>
La balise HTML <fieldset> regroupe des champs liés dans un formulaire HTML défini avec <form>. Syntaxe, attributs et exemples.
La balise <fieldset> regroupe des contrôles logiquement liés à l'intérieur d'un <form> HTML, ce qui vous permet de diviser un long formulaire en sections claires. Par défaut, le navigateur dessine un encadré autour du contenu groupé. Associée à <legend>, c'est également la méthode correcte pour donner à un groupe de contrôles <input> un libellé commun et accessible.
Cette page couvre la syntaxe, le rôle de <legend>, chaque attribut (name, disabled, form), comment redéfinir ou supprimer l'encadré, et pourquoi <fieldset> est important pour l'accessibilité des groupes de boutons radio et de cases à cocher.
Syntaxe
La balise <fieldset> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<fieldset>) et la balise fermante (</fieldset>).
Exemple de la balise HTML <fieldset> :
Balise HTML <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div>
<label for="date">Date of birth:</label>
<input type="date" id="date" />
</div>
<div>
<label for="birth-place">Place of birth:</label>
<input type="text" id="birth-place" />
</div>
</fieldset>
</form>
</body>
</html>Résultat
L'élément <legend>
L'élément <legend> donne une légende au <fieldset>. Deux règles sont importantes :
- Il doit être le premier enfant du
<fieldset>. S'il apparaît ailleurs, les navigateurs l'ignorent en tant que légende du groupe. - C'est le nom accessible du groupe. Les technologies d'assistance annoncent le texte de la légende avec chaque contrôle à l'intérieur du groupe. Ainsi, lorsqu'un utilisateur de lecteur d'écran atteint un contrôle, il entend quelque chose comme « Informations personnelles — Nom, champ texte », ce qui lui indique à quelle section appartient ce champ.
<fieldset>
<legend>Shipping address</legend>
<!-- the inputs for this section go here -->
</fieldset>Un <fieldset> sans <legend> dessine quand même un encadré, mais le groupe n'a pas de nom, ce qui fait perdre le bénéfice pour l'accessibilité. Ajoutez une légende chaque fois que le regroupement a une signification pour l'utilisateur.
L'élément <fieldset> pour organiser les formulaires
La majorité des formulaires en ligne sont difficiles à utiliser et mal organisés. Les organiser en sections logiques améliore considérablement la convivialité. Utiliser l'élément <fieldset> avec l'élément <legend> crée des délimitations claires et facilite la navigation dans vos formulaires.
Accessibilité : regrouper les boutons radio et les cases à cocher
Un seul <input> texte est étiqueté par son propre <label>. Mais un ensemble de boutons radio ou de cases à cocher nécessite deux niveaux d'étiquetage : un pour la question entière et un pour chaque option. <fieldset> + <legend> est la méthode standard et accessible pour ce faire — la légende étiquette la question, et chaque <label> étiquette une option.
<fieldset>
<legend>Choose a shipping method:</legend>
<div>
<input type="radio" id="standard" name="shipping" value="standard" />
<label for="standard">Standard (3–5 days)</label>
</div>
<div>
<input type="radio" id="express" name="shipping" value="express" />
<label for="express">Express (1–2 days)</label>
</div>
</fieldset>Ici, un lecteur d'écran annonce « Choisissez un mode de livraison, Standard, bouton radio » — l'utilisateur sait toujours à quelle question il répond. Sans l'encapsulation <fieldset>/<legend>, les options sont lues comme une liste déconnectée. Utilisez ce modèle pour chaque groupe de boutons radio et pour tout ensemble de cases à cocher liées.
Supprimer ou redéfinir le style de l'encadré
La bordure par défaut n'est qu'un style — elle n'est pas obligatoire. Une question très courante est de savoir comment la supprimer. Définissez border: none sur le <fieldset> :
fieldset {
border: none;
padding: 0;
margin: 0;
}Vous pouvez également appliquer n'importe quel style à la <legend> et à l'encadré (arrière-plan, bordure personnalisée, coins arrondis). Le regroupement et sa sémantique d'accessibilité restent intacts quelle que soit la façon dont vous le stylisez ; vous pouvez donc abandonner l'apparence par défaut sans perdre le bénéfice.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Désactive tout le groupe. Chaque contrôle de formulaire à l'intérieur du <fieldset> devient non interactif et n'est pas soumis avec le formulaire. |
| form | form_id | Associe le fieldset à un ou plusieurs formulaires via leur id, de sorte qu'il peut se trouver en dehors du <form> auquel il appartient. Séparez plusieurs identifiants par des espaces. |
| name | text | Le nom du groupe. Il n'est pas soumis avec le formulaire ; il est principalement utilisé pour référencer le groupe depuis JavaScript. |
L'attribut disabled est pratique lorsqu'une section entière d'un formulaire doit être désactivée en une seule fois — par exemple, masquer les champs de paiement jusqu'à ce qu'une case à cocher soit cochée :
<fieldset disabled>
<legend>Payment details</legend>
<label for="card">Card number:</label>
<input type="text" id="card" />
</fieldset>L'attribut form permet à un <fieldset> de se trouver en dehors de l'élément <form> tout en lui appartenant :
<form id="signup"></form>
<fieldset form="signup">
<legend>Account</legend>
<label for="user">Username:</label>
<input type="text" id="user" />
</fieldset>La balise <fieldset> prend en charge les attributs globaux et les attributs d'événement.