Balise HTML <legend>
The <legend> tag sets the caption for the group of form elements defined by the <field> tag. Description, attributes and using examples.
La balise `<legend>` définit la légende d'un groupe d'éléments de formulaire contenus dans une balise `<fieldset>`. Dans le navigateur, le <fieldset> est visuellement encadré, et la légende s'affiche à l'intérieur de ce cadre. Elle doit généralement être le premier élément enfant de la balise `<fieldset>`. Regrouper les contrôles de formulaire connexes à l'aide de `<fieldset>` et de légendes `<legend>` améliore l'accessibilité et l'ergonomie des formulaires complexes.
Syntaxe
La balise `<legend>` s'utilise par paires. Le contenu est écrit entre les balises ouvrante `<legend>` et fermante `</legend>`.
Exemple de la balise HTML `<legend>` :
Balise HTML `<legend>`
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
Name:
<input type="text" />
<br>
<br> E-mail:
<input type="email" />
<br>
<br> Date of birth:
<input type="number" />
<br>
<br> Place of birth:
<input type="text" />
</fieldset>
</form>
</body>
</html>Résultat
Exemple de la balise HTML `<legend>` avec CSS :
Exemple de la balise `<legend>` avec des propriétés CSS :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
form {
width: 55%;
}
fieldset {
padding: 25px;
}
label {
display: inline-block;
width: 95px;
text-align: right;
}
legend {
display: block;
padding: 15px;
margin-bottom: 10px;
background-color: #cccccc;
color: #777777;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
<label>Name:</label>
<input type="text" />
<br>
<br>
<label>E-mail:</label>
<input type="email" />
<br>
<br>
<label>Date of birth:</label>
<input type="number" />
<br>
<br>
<label>Place of birth:</label>
<input type="text" />
</fieldset>
</form>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | left right center justify | Définit l'alignement de la légende. Déprécié en HTML5 ; utilisez plutôt CSS text-align ou padding. |
La balise `<legend>` prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML `<legend>`
Vous pouvez styliser l'élément `<legend>` à l'aide de propriétés CSS standard telles que padding, margin, background-color et font-weight, comme démontré dans l'exemple précédent.
Pratique
Quelle est la fonction principale de la balise HTML <legend> ?