Les éléments<input> de typeradio sont généralement utilisés dans desgroupes de boutons radio — des ensembles de boutons radio décrivant un ensemble d'options liées.

Un seul bouton radio d'un groupe donné peut être sélectionné à la fois. Les boutons radio sont généralement affichés sous forme de petits cercles, qui sont remplis ou mis en surbrillance lorsqu'ils sont sélectionnés.

Exemple interactif

<fieldset>  <legend>Sélectionnez un drone de maintenance&nbsp;:</legend>  <div>    <input type="radio" name="drone" value="huey" checked />    <label for="huey">Huey</label>  </div>  <div>    <input type="radio" name="drone" value="dewey" />    <label for="dewey">Dewey</label>  </div>  <div>    <input type="radio" name="drone" value="louie" />    <label for="louie">Louie</label>  </div></fieldset>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

On les appelle boutons radio car ils ressemblent et fonctionnent de manière similaire aux boutons-poussoirs des anciennes radios, comme celle illustrée ci-dessous.

Valeur

L'attributvalue est une chaîne de caractères qui contient la valeur du bouton radio. Cette valeur n'est jamais affichée à l'utilisateur·ice par sonagent utilisateur. Elle sert à identifier quel bouton radio d'un groupe est sélectionné.

Définir un groupe de boutons radio

Pour définir un groupe de boutons radio, on leur donne le même nom via l'attributname. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).

Il est possible d'avoir autant de groupes de boutons radio que vous le souhaitez sur une page, à condition que chacun ait un attributname unique.

Par exemple, si votre formulaire doit demander à l'utilisateur·ice sa méthode de contact préférée, vous pouvez créer trois boutons radio, chacun avec la propriéténame définie àcontact, mais l'un avec la valeuremail, un autre avec la valeurtelephone et un autre avec la valeurcourrier. L'utilisateur·ice ne voit jamais la valeur devalue ou dename (sauf si vous ajoutez explicitement du code pour l'afficher).

Voici le fragment de code HTML correspondant à cet exemple :

<form>  <p>Veuillez choisir la meilleure méthode pour vous contacter&nbsp;:</p>  <div>    <input type="radio" name="contact" value="email" />    <label for="contactChoice1">Adresse électronique</label>    <input type="radio" name="contact" value="telephone" />    <label for="contactChoice2">Téléphone</label>    <input type="radio" name="contact" value="courrier" />    <label for="contactChoice3">Courrier</label>  </div>  <div>    <button type="submit">Envoyer</button>  </div></form>

On voit ici trois boutons radio dont l'attributname vautcontact et dont chacun possède une valeur unique pour l'attributvalue. Ils possèdent également un identifiant unique (id) qui est utilisé pour rattacher le libellé fourni par l'élément<label> via l'attributfor.

Voici le résultat obtenu :

La représentation des données d'un groupe de boutons radio

Lorsqu'on envoie le formulaire ci-dessus avec un bouton radio sélectionné, les données du formulaire contiennent une entrée sous la formecontact=valeur. Par exemple, si l'utilisateur·ice clique sur le bouton radio « Téléphone » puis envoie le formulaire, les données du formulaire contiendront la lignecontact=telephone.

Si vous omettez l'attributvalue dans le HTML, les données envoyées par le formulaire attribuent la valeuron au groupe. Dans ce cas, si l'utilisateur·ice clique sur l'option « Téléphone » et envoie le formulaire, les données envoyées seraientcontact=on, ce qui n'est pas utile. N'oubliez donc pas de définir vos attributsvalue !

Il est assez rare de vouloir permettre l'envoi du formulaire sans qu'aucun bouton radio d'un groupe ne soit sélectionné, il est donc généralement judicieux d'en avoir un par défaut avec l'étatchecked. VoirSélectionner un bouton radio par défaut ci-dessous.

Ajoutons un peu de code à notre exemple pour examiner les données générées par ce formulaire. Le HTML est modifié pour ajouter un bloc<pre> qui affichera les données du formulaire :

<form>  <p>Veuillez choisir la meilleure méthode pour vous contacter&nbsp;:</p>  <div>    <input type="radio" name="contact" value="email" />    <label for="contactChoice1">Adresse électronique</label>    <input type="radio" name="contact" value="telephone" />    <label for="contactChoice2">Téléphone</label>    <input type="radio" name="contact" value="courrier" />    <label for="contactChoice3">Courrier</label>  </div>  <div>    <button type="submit">Envoyer</button>  </div></form><pre></pre>

Ensuite, on ajoute duJavaScript pour mettre en place un gestionnaire d'évènements sur l'évènementsubmit qui est envoyé lorsque l'utilisateur·ice clique sur le bouton « Envoyer » :

const form = document.querySelector("form");const log = document.querySelector("#log");form.addEventListener("submit", (event) => {  const data = new FormData(form);  let output = "";  for (const entry of data) {    output = `${output}${entry[0]} = ${entry[1]}\r`;  }  log.innerText = output;  event.preventDefault();});

Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe"contact".

Attributs supplémentaires

En complément des attributs partagés par l'ensemble des éléments<input>, les boutonsradio peuvent utiliser les attributs suivants :

checked

Un attribut booléen qui, s'il est présent, indique que ce bouton radio est celui sélectionné par défaut dans le groupe.

Contrairement aux autres navigateurs, Firefoxconserve par défaut l'état coché dynamique^(angl.) d'un<input> lors des rechargements de page. Utilisez l'attributautocomplete pour contrôler ce comportement.

value

L'attributvalue est partagé par tous les<input> ; cependant, il a un rôle particulier pour les boutons radio : lorsqu'un formulaire est envoyé, seuls les boutons radio actuellement sélectionnés sont envoyés au serveur, et la valeur rapportée est la valeur de l'attributvalue. Sivalue n'est pas autrement défini, il s'agit de la chaîneon par défaut. Cela est illustré dans la sectionValeur ci-dessus.

required

L'attributrequired est partagé par la plupart des<input>. Si un bouton radio d'un groupe partageant le même nom possède l'attributrequired, un bouton de ce groupe doit être sélectionné, même si ce n'est pas forcément celui qui porte l'attribut.

Utiliser les boutons radio

Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.

Sélectionner un bouton radio par défaut

Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléenchecked. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :

<form>  <p>Veuillez choisir la meilleure méthode pour vous contacter&nbsp;:</p>  <div>    <input      type="radio"           name="contact"      value="email"      checked />    <label for="contactChoice1">Adresse électronique</label>    <input type="radio" name="contact" value="telephone" />    <label for="contactChoice2">Téléphone</label>    <input type="radio" name="contact" value="courrier" />    <label for="contactChoice3">Courrier</label>  </div>  <div>    <button type="submit">Envoyer</button>  </div></form>

Ici, c'est le premier bouton radio qui sera sélectionné par défaut.

Fournir une plus grande zone de sélection

Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément<label> associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.

Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments<label> dans les formulaires.

Validation

Dans le cas d'un bouton radio avec l'attributrequired défini, ou d'un groupe de boutons radio partageant le même nom dont au moins un possèderequired, un bouton radio doit être sélectionné pour que le contrôle soit considéré comme valide. Si aucun bouton radio n'est coché, la propriétévalueMissing d'un objetValidityState retourneratrue lors de la validation, et le navigateur demandera à l'utilisateur·ice de sélectionner une option.

Mettre en forme les boutons radio

L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :

<form>  <fieldset>    <legend>      Veuillez choisir la meilleure méthode pour vous contacter&nbsp;:    </legend>    <div>      <input        type="radio"               name="contact"        value="email"        checked />      <label for="contactChoice1">Adresse électronique</label>      <input        type="radio"               name="contact"        value="telephone" />      <label for="contactChoice2">Téléphone</label>      <input type="radio" name="contact" value="courrier" />      <label for="contactChoice3">Courrier</label>    </div>    <div>      <button type="submit">Envoyer</button>    </div>  </fieldset></form>

La feuille de style CSS utilisée est la suivante :

html {  font-family: sans-serif;}div:first-of-type {  display: flex;  align-items: flex-start;  margin-bottom: 5px;}label {  margin-right: 15px;  line-height: 32px;}input {  appearance: none;  border-radius: 50%;  width: 16px;  height: 16px;  border: 2px solid #999999;  transition: 0.2s all linear;  margin-right: 5px;  position: relative;  top: 4px;}input:checked {  border: 6px solid black;}button,legend {  color: white;  background-color: black;  padding: 5px 10px;  border-radius: 0;  border: 0;  font-size: 14px;}button:hover,button:focus {  color: #999999;}button:active {  background-color: white;  color: black;  outline: 1px solid black;}

Ce qui est le plus notable ici est l'utilisation de la propriété CSSappearance (avec les préfixes nécessaires pour certains navigateurs). Par défaut, les boutons radio (et lescases à cocher) sont mis en forme avec le style natif du système d'exploitation pour ces contrôles. En indiquantappearance: none, vous pouvez supprimer totalement le style natif et créer vos propres styles. Ici, nous avons utiliséborder avecborder-radius ettransition pour créer une animation agréable lors de la sélection. Remarquez aussi comment la pseudo-classe CSS:checked est utilisée pour définir le style du bouton radio lorsqu'il est sélectionné.

Remarquez qu'en cliquant sur un bouton radio, il y a un bel effet de fondu lors du changement d'état entre les boutons. De plus, le style et la couleur de la légende et du bouton d'envoi sont personnalisés pour offrir un contraste marqué. Ce n'est peut-être pas l'apparence que vous souhaiteriez dans une vraie application web, mais cela illustre bien les possibilités.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément<input> et l'interfaceHTMLInputElement du DOM qui est implémentée par cet élément
• L'interfaceRadioNodeList qui décrit une liste de boutons radio