Etiqueta 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 etiqueta `<legend>` define la leyenda para un grupo de elementos de formulario envueltos en una etiqueta `<fieldset>`. En el navegador, el fieldset se enmarca visualmente y la leyenda del legend se renderiza dentro de ese marco. Por lo general, debe ser el primer elemento hijo de `<fieldset>`. Agrupar controles de formulario relacionados con `<fieldset>` y leyendas `<legend>` mejora la accesibilidad y la usabilidad en formularios complejos.
Sintaxis
La etiqueta `<legend>` se usa en pares. El contenido se escribe entre las etiquetas de apertura `<legend>` y cierre `</legend>`.
Ejemplo de la etiqueta HTML `<legend>`:
Etiqueta 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>Resultado
Ejemplo de la etiqueta HTML `<legend>` con CSS:
Ejemplo de la etiqueta `<legend>` con propiedades 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>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left right center justify | Define la alineación de la leyenda. Obsoleto en HTML5; use CSS text-align o padding en su lugar. |
La etiqueta `<legend>` admite los Atributos Globales y los Atributos de Eventos.
Cómo dar estilo a una etiqueta HTML `<legend>`
Puede dar estilo al elemento `<legend>` utilizando propiedades CSS estándar como padding, margin, background-color y font-weight, como se demostró en el ejemplo anterior.
Práctica
¿Cuál es la función principal de la etiqueta HTML <legend>?