Boutons radio HTML : groupes name, checked et required

HTML <input type="radio"> crée des boutons radio pour choisir un élément parmi des options liées. Les boutons ayant le même name dans le même formulaire appartiennent à un groupe ; donnez à chaque option une valeur différente. Seul le name et la value du bouton sélectionné sont soumis.

Distinguer le name du groupe de l’id de chaque bouton

Les boutons d'un même groupe partagent un nom, mais chaque identifiant utilisé pour associer une étiquette doit être unique. Sélectionner un autre bouton portant le même nom efface la sélection précédente. Utilisez des noms différents pour des questions indépendantes. fieldset et legend fournissent un groupe et sa question, mais des fieldsets séparés seuls ne séparent pas les boutons radio portant le même nom en différents groupes de sélection.

La propriété du formulaire affecte également le regroupement : les boutons portant le même nom dans des formulaires différents ne forment pas nécessairement un seul groupe. L'exemple ci-dessous sépare les groupes de fruits et de sport au sein du même formulaire.

Exemple complet : examinez les valeurs pour deux questions

Enregistrez le document suivant sous le nom radio-demo.html et ouvrez-le dans un navigateur. Un choix de fruit est requis, tandis que le baseball est le sport par défaut. L'exemple empêche la soumission et affiche les valeurs actuelles sur la page, donc aucun gestionnaire côté serveur n'est nécessaire.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Groupes radio et valeurs envoyées</title>
</head>
<body>
  <h1>Exercice de préférences</h1>
  <form id="choices">
    <fieldset>
      <legend>Fruit (obligatoire)</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">Pomme</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">Banane</label>
    </fieldset>
    <fieldset>
      <legend>Sport</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">Football</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">Baseball</label>
    </fieldset>
    <button type="submit">Afficher les valeurs</button>
    <button type="reset">Réinitialiser</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Initialement, aucun fruit n'est sélectionné et le baseball est sélectionné. Appuyez sur le bouton de soumission : le choix de fruit requis empêche la soumission.
2. Sélectionnez Pomme et envoyez le formulaire. Le résultat contient fruit=apple et sport=baseball. La donnée utilise baseball, défini dans value, et non le libellé affiché.
3. Sélectionnez Banane pour effacer Pomme. Sélectionnez Football pour effacer Baseball ; la sélection de fruit reste inchangée.
4. La réinitialisation restaure la sélection de fruits à vide et la sélection par défaut de Baseball. La réinitialisation restaure les états cochés originaux plutôt que de supprimer toutes les sélections.

checked · required

checked est un attribut booléen pour la sélection initiale. checked="false" a toujours l'attribut présent et n'est pas une manière correcte d'exprimer false. Omettez-le pour une option initialement non sélectionnée. Lisez ou modifiez l'état actuel avec la propriété JavaScript checked.

Si un bouton dans un groupe est requis, un bouton de ce groupe doit être sélectionné. Le bouton sélectionné n'a pas besoin de porter lui-même required. Les deux options de fruits l'ont ici pour clarifier l'exigence.

Un groupe sans sélection est absent des données soumises. Sans attribut value, une option sélectionnée envoie la chaîne par défaut on : attribuez donc une valeur distincte à chaque option. Les boutons disabled ne peuvent pas être utilisés et sont exclus de l’envoi. Même avec la validation du navigateur, vérifiez de nouveau les valeurs autorisées côté serveur.

Effacer un choix et utiliser le clavier

Cliquer sur un bouton radio déjà sélectionné ne le désélectionne pas comme une case à cocher. Si les utilisateurs doivent choisir « Aucun », concevez cela comme une option séparée. Utilisez des cases à cocher pour une question où plusieurs éléments peuvent être activés ou désactivés indépendamment.

Associez les étiquettes afin que cliquer sur leur texte sélectionne les options. Conservez le comportement natif du clavier : utilisez Tab pour atteindre le groupe, puis les touches fléchées pour déplacer et sélectionner. Le comportement exact du focus peut différer selon les navigateurs. La référence MDN sur l'entrée radio explique les attributs et les règles de soumission.