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.

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.

El elemento legend sólo puede ser declarado como primer hijo del elemento fieldset al cual pertenece.

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>
Información de contacto

Nombre completo:

Dirección:

Teléfono:

Preferencias

Autos

Vacaciones

Estilo de vida

Astronomía

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>

Correo electrónico:

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.