Cómo validar botones de radio en una página web

La configuración y validación de los botones de opción parece ser el campo de formulario que les da a muchos webmasters la mayor dificultad en la configuración. De hecho, la configuración de estos campos es la más simple de todos los campos de formulario para validar, ya que los botones de opción configuran un valor que solo necesita probarse cuando se envía el formulario.

La dificultad con los botones de radio es que hay al menos dos y generalmente más campos que deben colocarse en el formulario, relacionados entre sí y probados como un solo grupo. Siempre que use las convenciones de nombres y el diseño correctos para sus botones, no tendrá ningún problema.

Configurar el grupo de botones de radio

Lo primero que hay que tener en cuenta cuando se usan botones de radio en nuestro formulario es cómo deben codificarse los botones para que funcionen correctamente como botones de radio. El comportamiento deseado que queremos es tener solo un botón seleccionado a la vez; cuando se selecciona un botón, cualquier botón seleccionado previamente se deseleccionará automáticamente.

La solución aquí es dar a todos los botones de radio dentro del grupo el mismo nombre pero valores diferentes. Aquí está el código utilizado para el botón de radio..

La creación de múltiples grupos de botones de opción para la forma única también es sencilla. Todo lo que necesita hacer es proporcionar al segundo grupo de botones de opción un nombre diferente al utilizado para el primer grupo.

El campo de nombre determina a qué grupo pertenece un botón en particular. El valor que se pasará para un grupo específico cuando se envíe el formulario será el valor del botón dentro del grupo seleccionado en el momento en que se envía el formulario.

Describa cada botón

Para que la persona que completa el formulario entienda lo que hace cada botón de radio en nuestro grupo, necesitamos proporcionar descripciones para cada botón. La forma más sencilla de hacer esto es proporcionar una descripción como texto inmediatamente después del botón.

Sin embargo, hay un par de problemas con el uso de texto sin formato:

1. El texto puede estar visualmente asociado con el botón de opción, pero puede que no sea claro para algunos que usan lectores de pantalla, por ejemplo. 
2. En la mayoría de las interfaces de usuario que usan botones de radio, se puede hacer clic en el texto asociado con el botón y puede seleccionar su botón de radio asociado. En nuestro caso aquí, el texto no funcionará de esta manera a menos que el texto esté asociado específicamente con el botón.

Asociar texto con un botón de radio

Para asociar el texto con su botón de opción correspondiente de modo que al hacer clic en el texto se seleccione ese botón, necesitamos agregar más al código para cada botón rodeando todo el botón y su texto asociado dentro de una etiqueta.

Así es como se vería el HTML completo para uno de los botones:

 botón uno

Como el botón de radio con el nombre de identificación mencionado en el para El parámetro de la etiqueta etiqueta está realmente contenido dentro de la etiqueta misma, el para y carné de identidad Los parámetros son redundantes en algunos navegadores. Sin embargo, sus navegadores a menudo no son lo suficientemente inteligentes como para reconocer el anidamiento, por lo que vale la pena ponerlos para maximizar la cantidad de navegadores en los que funcionará el código.

Eso completa la codificación de los botones de radio. El paso final es configurar la validación del botón de opción usando JavaScript.