Etiqueta HTML <legend>
La etiqueta <legend> define el título para un grupo de controles de formulario definido por <fieldset>. Reglas de ubicación, accesibilidad, atributos y ejemplos.
La etiqueta <legend> define el título para un grupo de controles de formulario contenidos en un elemento <fieldset>. En el navegador, el fieldset se dibuja como un cuadro enmarcado, y el título legend se renderiza superponiéndose al borde superior de ese marco. Agrupar controles relacionados dentro de un <form> con <fieldset> y un título <legend> hace que los formularios complejos sean más fáciles de escanear y mucho más accesibles.
Esta página cubre las reglas de ubicación correcta para <legend> , cómo lo usan las tecnologías de asistencia, cómo configurar pares accesibles de etiqueta/campo, y cómo manejar casos del mundo real como un formulario dividido en varias secciones.
Por qué <legend> debe ser el primer hijo de <fieldset>
La especificación HTML requiere que <legend> sea el primer hijo de su <fieldset> . Esto no es solo una convención de estilo:
- El renderizado depende de ello. El navegador posiciona el legend sobre el borde superior del marco del fieldset. Si el legend no es el primero, pierde esa ubicación especial y el cuadro se renderiza incorrectamente.
- El árbol de accesibilidad depende de ello. Los navegadores asignan el primer
<legend>
Un <fieldset> puede contener solo un <legend> , y debe aparecer antes de cualquier control. Si necesitas un segundo título, necesitas un segundo <fieldset> .
Accesibilidad: cómo los lectores de pantalla usan el legend
La combinación de <fieldset> y <legend> es la forma estándar de etiquetar un grupo de controles (el ejemplo clásico es un conjunto de botones de radio que comparten una misma pregunta).
Cuando un lector de pantalla mueve el foco a cualquier control dentro del fieldset, anuncia el texto del legend como prefijo a la etiqueta propia de ese control. Por ejemplo, con un legend de Shipping address y un campo etiquetado como City, el lector de pantalla lee algo así como "Shipping address, City, texto editable." Esto indica al usuario a qué sección pertenece cada campo sin necesidad de salir del grupo. El texto suelto como Name: colocado junto a un input no es una etiqueta programática, por lo que no aporta ese contexto — siempre asocia cada control con un <label> real.
Sintaxis
La etiqueta <legend> viene en pares. El texto del título se escribe entre las etiquetas de apertura <legend> y de cierre </legend> , y debe ser lo primero dentro del <fieldset> .
Ejemplo de la etiqueta HTML <legend> :
El siguiente ejemplo muestra marcado accesible: cada control tiene un id, y cada <label> apunta a él con un atributo for coincidente. Al hacer clic en una etiqueta se enfoca su input, y los lectores de pantalla leen el legend junto con la etiqueta.
Etiqueta HTML <legend>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br>
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
<br>
<br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" />
<br>
<br>
<label for="pob">Place of birth:</label>
<input type="text" id="pob" name="pob" />
</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 for="name">Name:</label>
<input type="text" id="name" name="name" />
<br>
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
<br>
<br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" />
<br>
<br>
<label for="pob">Place of birth:</label>
<input type="text" id="pob" name="pob" />
</fieldset>
</form>
</body>
</html>Ejemplo con múltiples fieldsets y legends:
Los formularios reales suelen dividirse en varios grupos — por ejemplo, un formulario de pago con secciones separadas de envío y facturación. Cada grupo tiene su propio <fieldset> y su propio <legend> . Un lector de pantalla entonces prefija cada campo con el nombre de sección correcto, de modo que el usuario siempre sabe si está editando la dirección de envío o la de facturación.
Formulario con grupos de envío y facturación
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<fieldset>
<legend>Shipping address</legend>
<label for="ship-name">Full name:</label>
<input type="text" id="ship-name" name="ship-name" />
<br>
<br>
<label for="ship-city">City:</label>
<input type="text" id="ship-city" name="ship-city" />
</fieldset>
<fieldset>
<legend>Billing address</legend>
<label for="bill-name">Full name:</label>
<input type="text" id="bill-name" name="bill-name" />
<br>
<br>
<label for="bill-city">City:</label>
<input type="text" id="bill-city" name="bill-city" />
</fieldset>
</form>
</body>
</html>Un fieldset y legend son también la forma recomendada de etiquetar un conjunto de botones de radio, donde el legend formula la pregunta y cada radio tiene su propia etiqueta:
<form>
<fieldset>
<legend>Choose a shipping speed</legend>
<label for="standard">Standard (5–7 days)</label>
<input type="radio" id="standard" name="speed" value="standard" />
<br>
<label for="express">Express (1–2 days)</label>
<input type="radio" id="express" name="speed" value="express" />
</fieldset>
</form>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left right center justify | Definía la alineación horizontal del título respecto al fieldset. Obsoleto — eliminado en HTML5; usa CSS en su lugar. |
La etiqueta <legend> admite los Atributos Globales y los Atributos de Evento.
Reemplazar el atributo align obsoleto
El antiguo atributo align="center" ya no funciona de forma fiable y no debe usarse. El equivalente en CSS es text-align en el propio <legend> :
/* Old, deprecated: <legend align="center"> */
/* Modern replacement: */
legend {
text-align: center;
}Particularidades de posicionamiento a tener en cuenta:
- Por defecto, el legend se sitúa sobre el borde superior del fieldset, cerca del borde izquierdo. Los navegadores reservan al legend una posición especial en el diseño, por lo que no se comporta como un bloque normal.
text-alignmueve el título horizontalmente dentro del espacio que el navegador le asigna — los resultados varían entre navegadores, así que prueba en los que necesitas dar soporte.- Para un control preciso puedes anular la ubicación por defecto con
positiony desplazamientos, o usarpadding/marginpara ajustar el texto. Definirwidthen el legend te permite alinearlo del modo que antes implicabaalign="justify".
Cómo dar estilo a una etiqueta HTML <legend>
Puedes dar estilo al elemento <legend> usando propiedades CSS estándar como padding, margin, background-color, text-align y font-weight, tal como se muestra en el ejemplo CSS anterior.