Balise HTML <legend>
La balise <code><legend></code> définit la légende d'un groupe d'éléments de formulaire contenus dans une balise <code><fieldset></code>. 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 <code><fieldset></code>. Regrouper les contrôles de formulaire connexes à l'aide de <code><fieldset></code> et de légendes <code><legend></code> améliore l'accessibilité et l'ergonomie des formulaires complexes.
Syntaxe
La balise <code><legend></code> s'utilise par paires. Le contenu est écrit entre les balises ouvrante <code><legend></code> et fermante <code></legend></code>.
Exemple de la balise HTML <code><legend></code> :
Balise HTML <code><legend></code>
<!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 <code><legend></code> avec CSS :
Exemple de la balise <code><legend></code> 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 <code><legend></code> prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <code><legend></code>
Vous pouvez styliser l'élément <code><legend></code> à 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> ?