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>.