Agregar múltiples grupos de botones de radio en HTML

En este artículo, presentaremos un método para agregar varios grupos de botones de radio en un formulario en HTML.

Use el valor diferente para el atributo name para diferentes grupos de botones de opción en HTML

Mientras trabaja con botones de radio en HTML, a veces puede necesitar usar varios grupos de botones de radio en un solo formulario. En tal caso, seleccionar el botón de opción de un grupo puede anular la selección del botón de opción del otro grupo.

Para eliminar este problema, el valor del atributo name en el elemento botón de los dos grupos debe ser diferente. Significa que para el primer grupo de botones de radio, debemos usar el mismo valor para el atributo name en todos los botones de radio.

Para el segundo grupo, el valor del atributo name debe ser diferente al del primer grupo, pero todos los botones de opción del segundo grupo deben tener el mismo valor.

También podemos usar el elemento fieldset para separar visualmente los dos grupos. La etiqueta <fieldset> agrupa los elementos relacionados en HTML.

En el siguiente ejemplo, crearemos dos grupos de botones de radio. En el primer grupo, el usuario podrá seleccionar una motocicleta y en el segundo grupo podrá seleccionar un automóvil.

Por ejemplo, cree un formulario usando la etiqueta <form>. Luego, use la etiqueta <fieldset> para el grupo de botones de radio de motocicleta.

Cree un botón de opción para Honda y establezca el valor motorcycle para el atributo name. A continuación, cree otro botón de opción para Yamaha y vuelva a establecer el valor del atributo name en motorcycle.

Después de cerrar la etiqueta <fieldset>, cree otro elemento fieldset para los botones de la radio del automóvil. En el coche, crea botones de radio para Hyundai y Toyota.

Establezca el valor del atributo name en car para ambos botones. El ejemplo de código se muestra a continuación.

<form>
  Select a Motorcyle
  <fieldset id="motorcyle">
    <input type="radio" value="Honda" name="motorcycle">
    <label for="Honda">Honda</label><br>
    <input type="radio" value="Yamaha" name="motorcycle">
    <label for="Yamaha">Yamaha</label><br>
  </fieldset><br>

  Select a Car
  <fieldset id="car">
    <input type="radio" value="Hyundai" name="car">
    <label for="hyundai">Hyundai</label><br>
    <input type="radio" value="Toyota" name="car">
    <label for="toyota">Toyota</label><br>
  </fieldset>
</form>

Así, podemos seleccionar cada moto y coche de los dos grupos de un botón de radio. El elemento fieldset crea un borde alrededor de cada grupo.

De esta manera, podemos agregar dos grupos de botones de radio en un solo formulario en HTML.