Cómo crear botones de radio en HTML [+ Examples]

Si bien parece que cada año se introducen nuevas tecnologías web para atraer a los visitantes, hay algunas que han resistido la prueba del tiempo y no desaparecerán. En esta publicación, discutiremos uno de esos elementos, el humilde botón de opción HTML.

Desde formularios de contacto hasta pruebas de opción múltiple, probablemente haya visto botones de radio antes (incluso si no sabía exactamente cómo se llamaban). Estos elementos circulares son imprescindibles si desea recopilar información del usuario desde el front-end de su sitio web.

Convenientemente, HTML tiene un tipo de entrada integrado para botones de radio, y su implementación en una página es bastante sencilla. Aquí, revisaremos qué son los botones de radio, cuándo usarlos y cómo codificar un formulario con botones de radio en HTML.

Los botones de opción casi siempre aparecen en grupos de dos o más para representar opciones relacionadas y mutuamente excluyentes. Dentro de este grupo de opciones, un usuario solo puede seleccionar una a la vez. Esto significa que al seleccionar un botón de radio se anula la selección de otro botón seleccionado en el grupo. Además, los usuarios no pueden anular la selección de un botón de opción haciendo clic en él. La única forma de anular la selección de un botón de opción es seleccionar otra opción dentro del grupo.

Botones de opción frente a casillas de verificación

Los botones de radio son similares a otro elemento interactivo común, la casilla de verificación. Las diferencias entre estos dos son pequeñas pero importantes: mientras que los botones de radio permiten a los usuarios seleccionar exactamente una opción por grupo, las casillas de verificación permiten a los usuarios elegir (o «marcar») una, varias o ninguna opción por grupo. Los usuarios también pueden anular la selección de una casilla de verificación haciendo clic en ella; los botones de radio no permiten esto.

Admito que este no es el tema más emocionante. Sin embargo, mezclar estos dos puede causar una gran confusión entre los visitantes. Por lo tanto, asegúrese de usar botones de radio para los menús «Seleccione uno» y guarde las casillas de verificación para sus menús «Seleccione todo lo que corresponda» o sus preguntas únicas (es decir, «Marque esta casilla si…»).

Ahora que entendemos el propósito de los botones de radio HTML, aprendamos cómo hacerlos.

Cómo hacer un botón de radio en HTML

Para crear un botón de radio en HTML, use el elemento con el tipo radio. Esto crea un único botón de opción con el que los usuarios pueden interactuar:

ver la pluma Botón de radio único de Christina Perricone (@hubspot) sobre CódigoPen.

Por supuesto, tendremos que agregar un poco más de código para que esto sea útil. Específicamente, querremos varios botones y etiquetas para cada botón. Así es como debería verse un grupo de botones de radio simple, usando solo HTML:

ver la pluma Grupo de botones de opción de Christina Perricone (@hubspot) sobre CódigoPen.

Aquí tenemos tres elementos de tipo radio, con algunos atributos nuevos también. También hay un nuevo elemento para cada . Revisemos cada cosa que agregamos al código.

Primero, el atributo id es un identificador único para el etiqueta. Se puede usar como un selector de CSS para el elemento de botón de radio, y también une el botón con su correspondiente .

Como se mencionó, los botones de radio vienen en grupos. Utilice el requerido nombre atributo para agrupar un conjunto de botones de opción relacionados. En el ejemplo anterior, todos s comparten el mismo valor para nombre, por lo que son tratados como parte del mismo grupo. Esto permite a los usuarios elegir solo una opción en un grupo a la vez; pruébelo arriba.

A continuación, el valor El atributo representa un valor único para el botón de opción. Los usuarios no lo ven, pero se envía para representar la opción elegida. Por ejemplo, si el formulario anterior se envió con el elemento «17 años o menos» seleccionado, el sistema que procesa el formulario recibiría el valor edad=niño. Si el usuario no selecciona ningún botón de radio, no se enviará ningún valor. Si el valor falta el atributo para la opción seleccionada, el formulario enviará el valor predeterminado sobre.

Tenga en cuenta que las etiquetas solo crean el elemento del botón de radio, no la etiqueta. Para etiquetar un botón de opción, agregue un elemento después del elemento e inserte un por atributo con el mismo valor que el identificación de los asociados elemento. Luego, escribe el texto de tu etiqueta en el etiqueta.

Durante el uso no es estrictamente necesario, se considera una mejor práctica por dos razones. En primer lugar, la riqueza semántica El elemento hace que su sitio web sea más accesible para las personas que usan lectores de pantalla. Les dice qué etiqueta está emparejada con qué botón de radio. En segundo lugar, el por El atributo permite a los usuarios seleccionar un botón de radio haciendo clic en la etiqueta misma además del botón, lo que hace que su formulario sea más fácil de usar.

Finalmente, las etiquetas
(salto de línea) colocan cada opción en una nueva línea. Intente eliminar estas etiquetas en el ejemplo anterior para colocar todas las opciones en la misma línea.

El atributo marcado

Las entradas de botón de radio tienen un atributo adicional, el comprobado atributo. Si está incluido en el etiqueta, el botón se seleccionará de forma predeterminada.

ver la pluma Formulario de botón de radio con selección predeterminada de Christina Perricone (@hubspot) sobre CódigoPen.

Cómo poner botones de radio HTML en un formulario

¿De qué sirven los botones de opción si los usuarios no pueden enviar sus respuestas? Es por eso que los botones de radio generalmente van dentro de los formularios HTML. el html El elemento contiene elementos secundarios que recopilan la entrada del usuario, como .

Para crear un formulario básico con botones de radio, envuelva su(s) grupo(s) de botones de radio en un etiquetar e incluir un de tipo entregar en el fondo. Cuando el usuario hace clic en «Enviar», sus respuestas se envían al controlador del formulario. Vea a continuación un ejemplo de formulario simple.

ver la pluma Formulario de botón de opción de Christina Perricone (@hubspot) sobre CódigoPen.

Botones de radio: un elemento simple para sus formularios

Los botones de radio están en todas partes en la web. De hecho, son tan comunes que HTML tiene su propio tipo de entrada para ellos, lo que permite que cualquier persona con conocimientos de HTML los inserte en una página. Mientras el código esté escrito correctamente, el navegador manejará todas las funciones básicas por usted.

Como recordatorio final, asegúrese de usar los botones de opción en los casos correctos. Recuerde usar botones de opción cuando desee que los usuarios elijan solo una opción de un grupo y casillas de verificación si desea permitir que los usuarios seleccionen varias opciones y desmarquen sus selecciones.