Cuando comencé a trabajar en mis primeros formularios HTML, uno de los primeros elementos con los que me encontré fueron los radio buttons en HTML.
Al principio, no estaba completamente seguro de cómo funcionaban o cuándo debía usarlos, pero rápidamente me di cuenta de que son excelentes para crear formularios interactivos y fáciles de usar.
Por eso, te voy a explicar qué son los radio buttons en HTML, cómo usarlos correctamente y cómo aplicar este conocimiento en tus proyectos web.
¿Qué es un radio button en HTML?
Un radio button en HTML es un tipo de control de formulario que permite al usuario seleccionar solo una opción de un conjunto de opciones.
Los botones de radio en HTML se presentan como pequeños círculos, que se pueden marcar o desmarcar. A diferencia de las casillas de verificación (checkbox), donde el usuario puede seleccionar múltiples opciones, en los radio buttons en HTML solo se puede seleccionar una opción a la vez.
Esto los hace ideales para situaciones donde se requiere una selección exclusiva, como elegir un género, un país o una opción en una encuesta.
Recuerdo que la primera vez que implementé radio buttons en HTML fue en un formulario de suscripción. Me fue muy útil para que los usuarios pudieran elegir entre diferentes opciones de suscripción, y desde entonces se han convertido en una parte esencial de mis formularios.
Gracias a ellos mejoré la experiencia del usuario al facilitarles la toma de decisiones rápidas y fáciles.
Cómo usar radio button en HTML
El uso de un radio button en HTML es muy sencillo. Te contaré cómo puedes hacerlo paso a paso en tus formularios.
Paso 1: Estructura básica de un radio button
La estructura básica de un radio button en HTML se construye utilizando la etiqueta <input> con el atributo type=»radio».
Aquí te muestro cómo hacerlo:
<form>
<label for="male">Masculino</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Femenino</label>
<input type="radio" id="female" name="gender" value="female">
</form>
En este caso, he creado dos radio buttons en HTML para seleccionar el género. Ambos botones comparten el mismo nombre (name=»gender»), lo que garantiza que solo uno pueda ser seleccionado a la vez.
Paso 2: Agrupar botones de radio
Cuando tienes varias opciones, es importante agrupar los radio buttons en HTML correctamente.
Al usar el mismo atributo name, los botones de radio pertenecen al mismo grupo y solo se puede seleccionar una opción a la vez.
Mira:
<form>
<label for="option1">Opción 1</label>
<input type="radio" id="option1" name="options" value="1">
<label for="option2">Opción 2</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option3">Opción 3</label>
<input type="radio" id="option3" name="options" value="3">
</form>
En este formulario, solo se podrá seleccionar una de las tres opciones, ya que todos los radio buttons en HTML comparten el mismo atributo name=»options».
Paso 3: Establecer una opción predeterminada
Puedes hacer que uno de los radio buttons en HTML se seleccione por defecto utilizando el atributo checked.
Esto es útil cuando deseas que los usuarios tengan una opción predeterminada al cargar el formulario.
<form>
<label for="option1">Opción 1</label>
<input type="radio" id="option1" name="options" value="1" checked>
<label for="option2">Opción 2</label>
<input type="radio" id="option2" name="options" value="2">
</form>
En este ejemplo, la «Opción 1» estará seleccionada por defecto cuando el formulario se cargue.
Usos que le puedes dar a radio button en HTML
Los radio buttons en HTML no solo se limitan a formularios simples; hay muchas formas en que puedes usarlos para mejorar la experiencia del usuario.
Aquí te dejo 4 ejemplos prácticos basados en mi experiencia.
1. Selección de género en un formulario de registro
Un uso común de los botones de radio en HTML es permitir a los usuarios seleccionar su género en un formulario de registro.
Aquí te muestro cómo hacerlo:
<form>
<label for="male">Masculino</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Femenino</label>
<input type="radio" id="female" name="gender" value="female">
<button type="submit">Enviar</button>
</form>
2. Elección de una opción de pago
Otro ejemplo práctico es utilizar radio buttons en HTML para que los usuarios elijan su método de pago en una tienda en línea:
<form>
<label for="credit">Tarjeta de crédito</label>
<input type="radio" id="credit" name="payment" value="credit">
<label for="paypal">PayPal</label>
<input type="radio" id="paypal" name="payment" value="paypal">
<button type="submit">Confirmar</button>
</form>
3. Encuestas o formularios de opinión
Si deseas realizar una encuesta o recoger opiniones, los radio buttons en HTML son perfectos para recopilar respuestas de opción única, como en este ejemplo de encuesta:
<form>
<label for="yes">Sí</label>
<input type="radio" id="yes" name="response" value="yes">
<label for="no">No</label>
<input type="radio" id="no" name="response" value="no">
<button type="submit">Enviar</button>
</form>
4. Selección de temas o preferencias
En un formulario de preferencias de usuario, los radio buttons en HTML son útiles para que el usuario elija un tema o una preferencia:
<form>
<label for="light">Tema Claro</label>
<input type="radio" id="light" name="theme" value="light">
<label for="dark">Tema Oscuro</label>
<input type="radio" id="dark" name="theme" value="dark">
<button type="submit">Aplicar</button>
</form>
Ya lo sabes, los radio buttons en HTML te sirven para crear formularios interactivos y fáciles de usar. Ya sea que estés construyendo un formulario de registro, una encuesta o una tienda en línea, los botones de radio en HTML mejoran la experiencia del usuario al ofrecer opciones de selección exclusiva de manera clara.
Aprende más sobre HTML y cómo optimizar tus habilidades en desarrollo web en el Bootcamp de Desarrollo Web de KeepCoding. En este curso, aprenderás a crear formularios interactivos, trabajar con JavaScript y mucho más, todo mientras aplicas tus conocimientos en proyectos reales. ¡No pierdas la oportunidad de avanzar en tu carrera!
