Botones radio HTML: grupos name, checked y required

HTML <input type="radio"> crea botones de opción para elegir un elemento de entre opciones relacionadas. Los botones con el mismo name en el mismo formulario pertenecen a un grupo; asigne a cada opción un valor diferente. Solo se envían el name y el value del botón seleccionado.

Distinguir el nombre del grupo del id de cada botón

Los botones en un mismo grupo comparten un nombre, pero cada id usado para asociar una etiqueta debe ser único. Seleccionar otro botón con el mismo nombre borra la selección anterior. Use nombres diferentes para preguntas independientes. fieldset y legend proporcionan un grupo y su pregunta, pero fieldsets separados por sí solos no dividen los botones de radio con el mismo nombre en diferentes grupos de selección.

La propiedad del formulario también afecta la agrupación: los botones con el mismo nombre en diferentes formularios no necesariamente forman un solo grupo. El ejemplo a continuación separa los grupos de fruta y deporte dentro del mismo formulario.

Ejemplo completo: inspeccione los valores de dos preguntas

Guarda el siguiente documento como radio-demo.html y ábrelo en un navegador. Se requiere elegir una fruta, mientras que el béisbol es el deporte predeterminado. El ejemplo evita el envío y muestra los valores actuales en la página, por lo que no se necesita un manejador de servidor.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grupos radio y valores enviados</title>
</head>
<body>
  <h1>Práctica de preferencias</h1>
  <form id="choices">
    <fieldset>
      <legend>Fruta (obligatoria)</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">Manzana</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">Banana</label>
    </fieldset>
    <fieldset>
      <legend>Deporte</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">Fútbol</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">Béisbol</label>
    </fieldset>
    <button type="submit">Mostrar valores</button>
    <button type="reset">Restablecer</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Inicialmente no se selecciona ninguna fruta y se selecciona béisbol. Presiona el botón enviar: la elección de fruta requerida impide el envío.
2. Selecciona Manzana y envía el formulario. La salida contiene fruit=apple y sport=baseball. Se envía baseball, definido en value, y no la etiqueta Béisbol.
3. Selecciona Banana para desmarcar Manzana. Selecciona Fútbol para desmarcar Béisbol; la selección de fruta permanece igual.
4. Restablecer devuelve la fruta al estado sin selección y el deporte a Béisbol. Restaura los estados checked iniciales, no borra todas las selecciones.

checked · required

checked es un atributo Booleano para la selección inicial. checked="false" todavía tiene el atributo presente y no es una forma correcta de expresar falso. Omítalo para una opción inicialmente no seleccionada. Lea o cambie el estado actual con la propiedad checked de JavaScript.

Si algún botón en un grupo tiene required, se debe seleccionar un botón en ese grupo. El botón seleccionado no tiene que llevar required por sí mismo. Ambas opciones de frutas lo tienen aquí para dejar clara la exigencia.

Un grupo sin selección se omite de los datos enviados. Si la opción seleccionada no tiene value, se envía la cadena predeterminada on; asigna un valor distinto a cada opción. Los botones disabled no pueden usarse ni se envían. Aunque exista validación del navegador, comprueba otra vez los valores permitidos en el servidor.

Borrar una elección y usar el teclado

Hacer clic en un botón de opción ya seleccionado no lo borra como un cuadro de verificación. Si los usuarios necesitan elegir "Ninguno", diseñe eso como una opción separada. Use cuadros de verificación para una pregunta donde varios elementos se puedan alternar independientemente.

Asociar etiquetas de modo que al hacer clic en su texto se seleccionen las opciones. Mantener el comportamiento nativo del teclado: usar Tab para llegar al grupo, luego las teclas de flecha para moverse y seleccionar. El comportamiento exacto del enfoque puede diferir entre navegadores. La referencia de entrada de radio MDN explica los atributos y las reglas de envío.