HTML legend

La etiqueta <legend> es una etiqueta de HTML5 utilizada para describir el contenido de un fieldset. El fieldset es un contenedor para elementos de formulario, como los campos de entrada y las etiquetas de selección.

La etiqueta <legend> se utiliza para proporcionar un título o una descripción para el fieldset y su contenido. Es recomendable utilizar la etiqueta <legend> dentro de un fieldset y debe ser la primera etiqueta dentro del fieldset.

El contenido del <legend> debe ser una descripción corta y concisa del contenido del fieldset.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <legend> sería el siguiente:

<form>
  <fieldset>
    <legend>Información de contacto</legend>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Teléfono:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <legend> para proporcionar un título al fieldset que contiene los campos de entrada para la información de contacto del usuario. El contenido del <legend> es “Información de contacto”.

El fieldset es un contenedor para los campos de entrada de nombre, correo electrónico y teléfono.

Atributos

La etiqueta <legend> de HTML tiene algunos atributos que se pueden utilizar para personalizar su apariencia y comportamiento:

• align: Este atributo especifica la alineación del contenido dentro del fieldset. Los valores permitidos son “left”, “center” y “right”. Este atributo ha sido obsoleto desde HTML5 y se recomienda utilizar estilos CSS en su lugar.

• accesskey: Este atributo especifica un atajo de teclado que permite al usuario enfocar en el elemento <legend> de forma rápida.

• class: Este atributo se utiliza para especificar una o varias clases para el elemento <legend>, lo que permite aplicar estilos CSS específicos a través de la selección de clase.

• id: Este atributo es utilizado para asignar un identificador único al elemento <legend>, lo que permite aplicar estilos CSS y manipular el elemento con JavaScript mediante la selección de ID.

• style: Este atributo permite especificar estilos CSS directamente en el elemento <legend>, en lugar de utilizar una hoja de estilos externa o una clase.

• title: Este atributo proporciona una descripción adicional o una herramienta de ayuda para el elemento <legend>.

Es importante tener en cuenta que algunos de estos atributos son obsoletos o deprecados en HTML5, por lo que se recomienda utilizar estilos CSS para personalizar la apariencia del elemento <legend>.

Ejemplo

Un ejemplo de la etiqueta <legend> con algunos de sus atributos en HTML podría ser el siguiente:

<form>
  <fieldset>
    <legend accesskey="I" class="contact-legend" id="contact-info" style="font-weight: bold; color: blue;" title="Información de contacto">Información de contacto</legend>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Teléfono:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se utiliza el atributo “accesskey” para establecer un atajo de teclado para enfocar en el elemento <legend>, el atributo “class” para aplicar una clase específica al elemento <legend>, el atributo “id” para darle un identificador único al elemento <legend>.

El atributo “style” para aplicar estilos CSS directamente al elemento <legend> y el atributo “title” para proporcionar una descripción adicional o una herramienta de ayuda para el elemento <legend>.