¿Cómo puedo agrupar campos relacionados en un formulario?

Para agrupar campos relacionados dentro de un formulario HTML, mejorando tanto la organización visual como la accesibilidad, debes usar las etiquetas <fieldset> y <legend>.

1. <fieldset> (Conjunto de campos):
   Esta etiqueta se utiliza para dibujar un recuadro o contenedor alrededor de un grupo de controles de formulario que están lógicamente relacionados. Por ejemplo, podrías agrupar todos los campos de una dirección postal o las opciones de una pregunta de opción múltiple.
2. <legend> (Leyenda):
3. Esta etiqueta proporciona un título o leyenda para el grupo de campos definido por <fieldset>. Es crucial que <legend> sea el primer elemento hijo directo de <fieldset>. Este título es importante para la accesibilidad, ya que los lectores de pantalla lo anuncian cuando el usuario entra en el grupo, dando contexto sobre los campos que contiene.

¿Por qué agrupar campos?

• Claridad visual: Ayuda a los usuarios a comprender la estructura de formularios largos o complejos dividiéndolos en secciones manejables.
• Accesibilidad: Proporciona un contexto claro a los usuarios de tecnologías de asistencia. Por ejemplo, al navegar a un grupo de botones de radio, el lector de pantalla anunciará la <legend> antes de leer las opciones individuales.
• Semántica: Añade significado estructural a tu formulario, indicando qué campos forman una unidad coherente.

Aquí tienes un ejemplo práctico:

<form action="/procesar" method="post">
  <fieldset>
    <legend>Datos personales</legend>
    <div>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre_usuario">
    </div>
    <div>
      <label for="email">Correo electrónico:</label>
      <input type="email" id="email" name="email_usuario">
    </div>
  </fieldset>

  <fieldset>
    <legend>Preferencias de notificación</legend>
    <div>
      <input type="radio" id="notif_email" name="notificacion" value="email" checked>
      <label for="notif_email">Recibir por correo electrónico</label>
    </div>
    <div>
      <input type="radio" id="notif_sms" name="notificacion" value="sms">
      <label for="notif_sms">Recibir por SMS</label>
    </div>
    <div>
      <input type="radio" id="notif_no" name="notificacion" value="ninguna">
      <label for="notif_no">No recibir notificaciones</label>
    </div>
  </fieldset>

  <button type="submit">Enviar</button>
</form>
Lenguaje del código: PHP (php)

En este ejemplo, los «datos personales» y las «preferencias de notificación» están claramente separados en sus respectivos <fieldset>, cada uno con una <legend> descriptiva. Por defecto, los navegadores suelen dibujar un borde alrededor del <fieldset>, pero puedes modificarlo con CSS si lo deseas.