La Etiqueta FIELDSET

La etiqueta <fieldset> se utiliza para agrupar elementos relacionados en un formulario HTML, mejorando la organización, accesibilidad y estilo. Junto con <legend>, proporciona una estructura clara para secciones de formularios como datos personales, preferencias o configuraciones.

Sintaxis básica

<form>
  <fieldset>
    <legend>Título del grupo</legend>
    <!-- Elementos del formulario -->
    <input type="text" name="nombre">
    <input type="email" name="correo">
  </fieldset>
</form>

• <fieldset>: Contenedor que agrupa elementos relacionados.

• <legend>: Etiqueta descriptiva para el grupo (debe ser el primer hijo de <fieldset>).

Casos de uso comunes

Agrupar información personal en un formulario

<fieldset>
  <legend>Datos personales</legend>
  <label>Nombre: <input type="text" name="nombre"></label>
  <label>Email: <input type="email" name="email"></label>
</fieldset>

Opciones de configuración

<fieldset>
  <legend>Preferencias</legend>
  <label><input type="checkbox" name="newsletter"> Recibir newsletter</label>
  <label><input type="checkbox" name="ofertas"> Alertas de ofertas</label>
</fieldset>

Deshabilitar un grupo de campos

<fieldset disabled>
  <legend>Dirección (deshabilitado)</legend>
  <label>Calle: <input type="text" name="calle"></label>
  <label>Ciudad: <input type="text" name="ciudad"></label>
</fieldset>

Atributos clave

Atributo	Descripción
disabled	Deshabilita todos los elementos dentro del <fieldset>.
form	Vincula el fieldset a un formulario externo (por id).
name	Nombre del grupo para referencia en JavaScript.

Estilización con CSS

Personaliza la apariencia del grupo y su título:

fieldset {
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

legend {
  color: #3498db;
  font-weight: bold;
  padding: 0 0.5rem;
  background: white;
}

/* Eliminar el borde predeterminado */
fieldset.sin-borde {
  border: none;
  padding: 0;
}

Accesibilidad

• Lectores de pantalla: Anuncian el <legend> como título del grupo.

• Buenas prácticas:

  • Usar <legend> para describir el propósito del grupo.

  • Evitar anidar múltiples <fieldset> innecesariamente.

  • Combinar con etiquetas (<label>) para cada campo.

Errores comunes

Olvidar el <legend>

<!-- Incorrecto -->
<fieldset>
  <input type="text" name="nombre">
</fieldset>

Agrupar elementos no relacionados

<!-- Incorrecto -->
<fieldset>
  <legend>Datos y preferencias</legend>
  <input type="text" name="nombre">
  <input type="checkbox" name="ofertas">
</fieldset>

Usar <div> en lugar de <fieldset>

<!-- Menos semántico -->
<div class="grupo">
  <h3>Datos personales</h3>
  <input type="text" name="nombre">
</div>

Ejemplos avanzados

Formulario de registro con múltiples secciones

<form>
  <fieldset>
    <legend>Información de cuenta</legend>
    <label>Usuario: <input type="text" name="usuario" required></label>
    <label>Contraseña: <input type="password" name="contraseña" required></label>
  </fieldset>

  <fieldset>
    <legend>Datos de contacto</legend>
    <label>Teléfono: <input type="tel" name="telefono"></label>
    <label>Dirección: <input type="text" name="direccion"></label>
  </fieldset>
</form>

Fieldset con CSS Grid

<fieldset>
  <legend>Preferencias de envío</legend>
  <div class="grid">
    <label>País: <select name="pais">...</select></label>
    <label>Ciudad: <input type="text" name="ciudad"></label>
    <label>Código postal: <input type="text" name="codigo-postal"></label>
  </div>
</fieldset>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
</style>

Buenas prácticas

1. Agrupar solo elementos relacionados: Cada <fieldset> debe tener un propósito claro.

2. Usar <legend> descriptivo: Ej: "Método de pago" en lugar de "Sección 1".

3. Evitar anidaciones profundas: Mantener la estructura del formulario simple.

4. Compatibilidad: Funciona en todos los navegadores modernos, pero estilizar con cuidado para consistencia.

Conclusión:

La etiqueta <fieldset> es esencial para:

• Organizar formularios complejos de manera clara.
• Mejorar la accesibilidad para usuarios con discapacidades.
• Facilitar el estilo y la gestión de grupos de campos.

¡Úsala para crear formularios estructurados y profesionales!