Ajouter plusieurs groupes de boutons radio en HTML

Dans cet article, nous présenterons une méthode pour ajouter plusieurs groupes de boutons radio dans un seul formulaire en HTML.

Utilisez la valeur différente pour l’attribut name pour différents groupes de boutons radio en HTML

Lorsque vous travaillez avec des boutons radio en HTML, vous devrez parfois utiliser plusieurs groupes de boutons radio dans un seul formulaire. Dans un tel cas, sélectionner le bouton radio d’un groupe peut désélectionner le bouton radio de l’autre groupe.

Pour éliminer ce problème, la valeur de l’attribut name dans l’élément bouton des deux groupes doit être différente. Cela signifie que pour le premier groupe de boutons radio, nous devons utiliser la même valeur pour l’attribut name dans tous les boutons radio.

Pour le second groupe, la valeur de l’attribut name doit être différente de celle du premier groupe, mais tous les boutons radio du second groupe doivent avoir la même valeur.

Nous pouvons également utiliser l’élément fieldset pour séparer visuellement les deux groupes. La balise <fieldset> regroupe les éléments associés en HTML.

Dans l’exemple ci-dessous, nous allons créer deux groupes de boutons radio. Dans le premier groupe, l’utilisateur pourra sélectionner une moto, et dans le second groupe, il pourra sélectionner une voiture.

Par exemple, créez un formulaire en utilisant la balise <form>. Ensuite, utilisez la balise <fieldset> pour le groupe de boutons radio moto.

Créez un bouton radio pour Honda et définissez la valeur motorcycle pour l’attribut name. Ensuite, créez un autre bouton radio pour Yamaha et définissez à nouveau la valeur de l’attribut name sur motorcycle.

Après avoir fermé la balise <fieldset>, créez un autre élément fieldset pour les boutons d’autoradio. Dans la voiture, créez des boutons radio pour Hyundai et Toyota.

Définissez la valeur de l’attribut name sur car pour les deux boutons. L’exemple de code est illustré ci-dessous.

<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>

Ainsi, nous pouvons sélectionner chaque moto et chaque voiture parmi les deux groupes d’un bouton radio. L’élément fieldset crée une bordure autour de chaque groupe.

De cette façon, nous pouvons ajouter deux groupes de boutons radio dans un seul formulaire en HTML.