Balise HTML <fieldset>
La balise <fieldset> regroupe visuellement les champs logiquement liés dans un formulaire HTML défini avec la balise <form>. Elle permet de diviser les formulaires en sections logiques. Dans les navigateurs, un cadre est dessiné autour du contenu.
Syntaxe
La balise <fieldset> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<fieldset>) et la balise de fermeture (</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-day">Place of birth:</label>
<input type="text" id="birth-day" />
</div>
</fieldset>
</form>
</body>
</html>Résultat
L'élément <fieldset> pour organiser les formulaires
La majorité des formulaires en ligne sont difficiles à utiliser et mal organisés. Les regrouper en sections logiques améliore considérablement l'utilisabilité. L'utilisation de l'élément <fieldset> avec l'élément <legend> crée des limites claires et facilite la navigation dans vos formulaires.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Indique qu'un groupe d'éléments de formulaire liés doit être désactivé. |
| form | form_id | Définit un ou plusieurs identifiants de formulaire (id) auxquels appartient le groupe d'éléments liés. Si plusieurs identifiants sont présents, ils doivent être séparés par des espaces. |
La balise <fieldset> prend en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quel est le rôle de la balise HTML fieldset ?