<legend>El elemento <legend> en HTML5 se utiliza para definir un título o leyenda para el contenido de un elemento <fieldset>. Al agrupar elementos de un formulario con <fieldset>, la etiqueta <legend> proporciona una descripción clara de qué datos se encuentran agrupados dentro de él, mejorando así la accesibilidad y la organización del formulario.
<legend>El elemento <legend> en sí no tiene muchos atributos específicos, pero al ser un elemento HTML estándar, puede aceptar los atributos globales. Aquí están todos los posibles atributos:
class: Una lista de clases CSS que se aplican al elemento.id: Un identificador único para el elemento.style: Regla CSS en línea específica para el elemento.title: Un texto que aparece como información sobre herramientas cuando el usuario pasa el cursor sobre el elemento.lang: Indica el idioma del contenido del elemento.dir: Indica la dirección del texto para el contenido del elemento (ltr para izquierda a derecha, rtl para derecha a izquierda).tabindex: Especifica el orden en el que el elemento recibe el foco cuando se usa la navegación con teclado.Debido a su naturaleza específica, el <legend> no tiene atributos adicionales más allá de los globales.
<legend> en HTML5El uso principal del <legend> es dentro de un <fieldset> para proporcionar un título que describe el propósito del conjunto de controles de formulario agrupados. Aquí hay algunos ejemplos sencillos para ilustrar su uso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Legend</title>
<style>
fieldset {
margin-bottom: 1rem;
}
legend {
font-weight: bold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Información Personal</legend>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br>
<label for="apellido">Apellido:</label>
<input type="text" id="apellido" name="apellido"><br>
</fieldset>
<fieldset>
<legend>Detalles de Contacto</legend>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email"><br>
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono"><br>
</fieldset>
<button type="submit">Enviar</button>
</form>
</body>
</html>En este ejemplo, dos conjuntos de campos de formulario están organizados usando <fieldset> y <legend>. El primer <fieldset> agrupa campos relacionados con la "Información Personal", y el segundo agrupa campos relacionados con los "Detalles de Contacto".
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Legend con Radios y Checkboxes</title>
</head>
<body>
<form>
<fieldset>
<legend>Preferencias de Contacto</legend>
<p>Seleccione su método de contacto preferido:</p>
<input type="radio" id="contacto-email" name="contacto" value="email">
<label for="contacto-email">Correo Electrónico</label><br>
<input type="radio" id="contacto-telefono" name="contacto" value="telefono">
<label for="contacto-telefono">Teléfono</label>
</fieldset>
<fieldset>
<legend>Intereses</legend>
<input type="checkbox" id="interes-tecnologia" name="interes" value="tecnologia">
<label for="interes-tecnologia">Tecnología</label><br>
<input type="checkbox" id="interes-ciencia" name="interes" value="ciencia">
<label for="interes-ciencia">Ciencia</label><br>
<input type="checkbox" id="interes-deportes" name="interes" value="deportes">
<label for="interes-deportes">Deportes</label>
</fieldset>
<button type="submit">Enviar</button>
</form>
</body>
</html>En este segundo ejemplo, se usan <fieldset> y <legend> para agrupar opciones de preferencias de contacto y áreas de interés, mejorando así la legibilidad y estructura del formulario para el usuario.
Estos ejemplos muestran cómo el uso del elemento <legend> en combinación con <fieldset> mejora la estructura, la accesibilidad y la claridad de los formularios en HTML5.