Curso de HTML / Agrupar formularios con fieldset, legend y autocomplete

fieldset agrupa controles relacionados y legend expresa la pregunta o el nombre de ese grupo. Un valor adecuado de autocomplete indica qué clase de información solicita un campo, como nombre o correo. La agrupación, el nombre de envío y las sugerencias del navegador son funciones distintas.

Dar una pregunta común a varias respuestas

Las etiquetas de radio identifican respuestas, pero el usuario necesita conocer también la pregunta que comparten. legend aporta ese contexto:

<fieldset>
  <legend>How should we contact you?</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Coloca el fragmento dentro de un formulario. Es posible que el navegador muestre un borde y el texto de legend sobre él; puedes cambiar esa presentación con CSS sin quitar la relación.

Los dos radios comparten name="contact", y por eso seleccionar uno desmarca el otro. fieldset agrupa conceptualmente la pregunta, pero no crea por sí solo la exclusión entre radios. Utiliza otra agrupación y otro name cuando se trate de una pregunta independiente.

Describir el propósito de un dato

Los valores name y email de autocomplete indican el propósito de los campos siguientes:

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact details</legend>
    <label for="full-name">Full name</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Send</button>
</form>

El name del input, como full_name, es la clave que recibe el servidor. El token de autocompletado identifica el tipo de información solicitado; no fija un valor ni envía información en nombre del usuario. La aparición de sugerencias depende de los ajustes del navegador y de los datos disponibles.

La ruta /contact de este fragmento es una muestra y necesita un manejador real. Tampoco el autocompletado reemplaza la asociación entre label e input, tratada en los nombres y las etiquetas de campo.

Comprobar dos grupos de radio independientes

Guarda el siguiente documento como groups.html en UTF-8. Selecciona Email en el primer grupo y Morning en el segundo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Group practice</title>
</head>
<body>
  <h1>Answer two independent questions</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Contact method</legend>
      <label><input type="radio" name="contact" value="email" required> Email</label>
      <label><input type="radio" name="contact" value="phone"> Phone</label>
    </fieldset>
    <fieldset>
      <legend>Visit time</legend>
      <label><input type="radio" name="visit" value="morning" required> Morning</label>
      <label><input type="radio" name="visit" value="afternoon"> Afternoon</label>
    </fieldset>
    <button type="submit">Inspect both answers</button>
  </form>
</body>
</html>

Las dos selecciones deben coexistir. Prueba una alternativa del segundo grupo y comprueba que el primero mantiene su respuesta. Los grupos usan nombres distintos: contact y visit.

Para reproducir un error frecuente, cambia temporalmente los dos nombres visit a contact, guarda y recarga. Elegir una respuesta de la segunda pregunta puede desmarcar la primera porque ahora pertenecen al mismo grupo. Devuelve ambos nombres a visit al terminar.

No cambies solo uno de los radios si quieres comparar grupos completos. El objetivo es observar cómo se construye la selección, no dejar un formulario parcialmente roto. Los tipos checkbox y radio relacionan esas selecciones con los valores que se envían.

Elegir tokens definidos de autocomplete

Usa un token definido que describa la información realmente solicitada, no una palabra arbitraria que parezca apropiada. postal-code no valida el formato del código postal. Un navegador sin datos guardados puede no ofrecer ninguna sugerencia, aunque el marcado sea correcto.

Revisar relación, selección y sugerencias por separado

No juntes preguntas sin relación en un único fieldset únicamente para dibujar un borde. Comprueba que cada pregunta tenga un nombre claro, que cada respuesta esté etiquetada y que seleccionar una respuesta no borre otra pregunta independiente.

Después prueba el autocompletado con la configuración del navegador que vayan a utilizar los lectores, sin prometer que siempre aparezca una sugerencia. Los datos siguen necesitando validación y un tratamiento adecuado en el servicio. Las referencias de autocomplete y fieldset de MDN permiten consultar los tokens y la estructura. Las restricciones de validación cubren otra parte del formulario que la agrupación y el autocompletado no resuelven.