Elemento legend
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento legend
representa un título, nombre o etiqueta para un conjunto de controles, agrupados mediante el elemento fieldset
. Este elemento resulta vital cuando la legibilidad precisa ser mejorada, esecialmente en formularios grandes. Su contenido, siendo el título del fieldset
al que pertenece, es habitualmente representado encima del marco que éste provee.
Ejemplos
En el siguiente ejemplo, agruparemos temáticamente los controles de un formulario (form
). Cada grupo de controles tendrá su elemento legend
apropiadamente declarado como primer hijo del elemento fieldset
al que pertenece.
<form action="../../form-result.php" target="_blank">
<fieldset>
<legend>Información de contacto</legend>
<p>Nombre completo: <input type="text" name="nombrecompleto"></p>
<p>Dirección: <input type="text" name="direccion"></p>
<p>Teléfono: <input type="tel" name="telefono"></p>
</fieldset>
<fieldset>
<legend>Preferencias</legend>
<p><input type="checkbox" name="pref-autos"> Autos</p>
<p><input type="checkbox" name="pref-vacaciones"> Vacaciones</p>
<p><input type="checkbox" name="pref-estilodevida"> Estilo de vida</p>
<p><input type="checkbox" name="pref-astronomia"> Astronomía</p>
</fieldset>
<p><input type="submit" value="Enviar información"></p>
</form>
El elemento legend
puede contener a otros elementos. Esto puede ser útil en ciertas situaciones como la que se muestra en el ejemplo a continuación. En éste, el elementos elemento legend
posee, además del título para el conjunto de controles, una casilla de verificación que, mediante un programa del lado cliente, permite habilitar o deshabilitar al grupo completo de controles.
<form action="../../form-result.php" target="_blank">
<fieldset>
<legend>
<label>
<input type="checkbox" name="suscripcion" checked onchange="alternarFieldset(this)"> Suscribirme al newsletter
</label>
</legend>
<p>Correo electrónico: <input type="email" name="correoelectronico"></p>
</fieldset>
<p><input type="submit" value="Enviar información"></p>
</form>
Atributos
Atributos específicos
align
Un valor que indica dónde debería el navegador ubicar al título en relación con el grupo de controles. Éste puede tomar uno de cuatro valores insensibles a mayúsculas/minúsculas:
- top: encima del grupo de controles.
- bottom: debajo del grupo de controles.
- left: al lado izquierdo del grupo de controles.
- right: al lado derecho del grupo de controles.
Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a usar hojas de estilo para proveer propiedades de presentación a los elementos.
Ejemplo
<legend align="bottom">Información personal</legend>
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.