La Etiqueta LEGEND

La etiqueta <legend> se utiliza junto a <fieldset> para agrupar elementos de formulario relacionados y proporcionarles un título descriptivo. Esencialmente:

• <fieldset>: Crea un contenedor para agrupar elementos (como inputs, selects, etc.).

• <legend>: Define un título o leyenda para ese grupo.

Propósito:

• Mejorar la accesibilidad (los lectores de pantalla anuncian el título del grupo).

• Organizar visualmente formularios complejos.

• Dar contexto semántico a los datos agrupados.

<fieldset>
  <legend>Título del grupo</legend>
  <!-- Elementos del formulario aquí -->
</fieldset>

Ejemplos prácticos

Ejemplo 1: Grupo de datos personales

<fieldset>
  <legend>Información personal</legend>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre"><br><br>
  
  <label for="email">Correo:</label>
  <input type="email" id="email">
</fieldset>

Resultado:

Ejemplo 2: Opciones de entrega (radio buttons)

<fieldset>
  <legend>Método de entrega</legend>
  <label>
    <input type="radio" name="entrega" value="domicilio"> Envío a domicilio
  </label><br>
  <label>
    <input type="radio" name="entrega" value="recoger"> Recoger en tienda
  </label>
</fieldset>

Resultado:

Ejemplo 3: Formulario con múltiples grupos

<form>
  <fieldset>
    <legend>Datos de contacto</legend>
    <label>Email: <input type="email"></label><br>
    <label>Teléfono: <input type="tel"></label>
  </fieldset>

  <fieldset>
    <legend>Preferencias</legend>
    <label>
      <input type="checkbox"> Recibir newsletter
    </label>
  </fieldset>
</form>

Estilizar <fieldset> y <legend> con CSS

Por defecto, <fieldset> tiene un borde y <legend> aparece en la esquina superior izquierda. Puedes personalizarlos:

fieldset {
  border: 2px solid #007BFF;
  border-radius: 8px;
  padding: 20px;
  margin: 10px 0;
}

legend {
  color: #007BFF;
  font-weight: bold;
  padding: 0 10px;
  background: white;
}

Resultado con estilos:

Ejemplo estilizado

Errores comunes

Usar <legend> sin <fieldset>: La etiqueta <legend> solo funciona dentro de un <fieldset>.

<!-- Incorrecto -->
<legend>Título suelto</legend>

Ignorar la jerarquía: <legend> debe ser el primer hijo de <fieldset>.

<!-- Incorrecto -->
<fieldset>
  <input type="text">
  <legend>Título</legend>
</fieldset>

Leyendas ambiguas:
Evita títulos genéricos como "Datos" o "Grupo 1".

Mejores prácticas

Usa texto descriptivo:

El título debe resumir claramente el propósito del grupo:

<legend>Dirección de facturación</legend>

Combina con <label>:

Asegura que cada elemento dentro del <fieldset> tenga su etiqueta.

Accesibilidad:

• Los lectores de pantalla anuncian el texto de <legend> al entrar al grupo.

• Usa aria-describedby si necesitas más contexto.

Agrupa lógicamente:

Separa campos como "Datos personales", "Método de pago", etc.

Importancia en formularios complejos

En formularios largos (como registros o encuestas), <fieldset> y <legend>:

• Reducen la fatiga visual del usuario.

• Facilitan la navegación con teclado o lectores de pantalla.

• Mejoran la tasa de finalización al organizar la información.

Ejemplo avanzado: Formulario de registro

<form>
  <fieldset>
    <legend>Crear cuenta</legend>
    <label>Usuario: <input type="text" required></label><br><br>
    <label>Contraseña: <input type="password" required></label>
  </fieldset>

  <fieldset>
    <legend>Datos adicionales</legend>
    <label>País: 
      <select>
        <option>México</option>
        <option>España</option>
      </select>
    </label><br><br>
    <label><input type="checkbox"> Acepto los términos</label>
  </fieldset>
</form>

Con este tutorial, podrás estructurar formularios HTML de manera profesional, accesible y semánticamente correcta. ¡Usa <fieldset> y <legend> para dar claridad a tus usuarios!