Skip to content

Type Radio - Dos grupos de opciones

El campo input type=radio se usa cuando el usuario solo puede escoger una opción dentro de un grupo.

Para agrupar varios radios en un mismo conjunto de opciones, debes asignarles el mismo valor en el atributo name. De esta forma, al seleccionar una opción, las demás se desmarcan automáticamente.

Vas a crear dos grupos independientes de botones de radio:

  • Crea 2 inputs type=radio para elegir entre: Masculino y Femenino
  • Ambos deben tener el mismo name (por ejemplo: name="genero")

Grupo 2: Selección de preferencia (otras dos opciones)

Section titled “Grupo 2: Selección de preferencia (otras dos opciones)”
  • Crea otros 2 inputs type=radio para elegir entre dos opciones a tu elección (por ejemplo: Sí / No o Madrid / Barcelona)
  • Estos dos deben tener un name diferente al del primer grupo (por ejemplo: name="preferencia")
  • Cada input debe estar asociado a su correspondiente etiqueta <label> para mejorar la usabilidad (al hacer clic en el texto, se selecciona el radio).
  • Al probar el formulario, solo se debe poder elegir una opción dentro del grupo 1 y una opción dentro del grupo 2 de forma independiente.
  • Investiga sobre las etiquetas <input type="radio"> y <label>.
  • Recuerda: el atributo name es el que agrupa los radios. Si dos radios tienen el mismo name, pertenecen al mismo grupo.
  • Para que dos grupos sean independientes, deben tener distintos valores en name.
  • Haz clic en una opción del grupo 1 → se selecciona.
  • Haz clic en otra opción del grupo 1 → cambia la selección.