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.
¿Qué es un botón de opción HTML?
En HTML, un botón de opción es un elemento de página interactivo para seleccionar una opción entre múltiples opciones. Un botón de radio aparece como un círculo vacío cuando no está seleccionado. Cuando se hace clic con el mouse o se selecciona con el teclado, el círculo se llena para indicar la selección. Un botón de opción se empareja con una etiqueta (generalmente texto o, a veces, una imagen): esto es lo que el usuario elige cuando selecciona un botón de opción en particular. .
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
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
Primero, el atributo id es un identificador único para el
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
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
Durante el uso
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
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
Para crear un formulario básico con botones de radio, envuelva su(s) grupo(s) de botones de radio en un
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.