MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Les éléments <input> dont l'attribut type vaut radio sont affichés avec des icônes circulaires qui sont remplies lorsque les options sont activées. Les boutons radios permettent de sélectionner une seule option parmi plusieurs au sein d'un formulaire.

<input id="radioButton" type="radio">

Note : Les cases à cocher (checkbox) sont semblables aux boutons radios mais les boutons radios permettent uniquement de sélectionner une seule valeur pami plusieurs. Les cases à cocher permet de cocher plusieurs valeurs si nécessaire.

Valeur Une chaîne de caractères (DOMString) qui contient la valeur du bouton radio.
Évènements change et input
Attributs pris en charge checked
Attributs IDL checked et value
Méthodes select()

Attributs

checked

Cet attribut booléen indique si l'élément est sélectionné ou non. On utilise soit checked="checked" soit plus simplement checked

value
Donne une valeur à élément, dans notre cas à un bouton radio.
Note : Mettre un terme à côté du bouton radio, ne lui donne aucune valeur.
name
Cet attribut est utilisé pour lier les "bouton radio" entres eux, à la condition qu'il y soit renseigné la même valeur.

Valeur

Une chaîne de caractères (DOMString) qui représente la valeur du bouton radio. Cette valeur n'est pas visible côté client mais est envoyée au serveur pour indiquer la valeur (value) envoyée dans le formulaire et associée au nom (name) du bouton. Par exemple :

<form>
Merci d'indiquer votre genre :
<br>
  <div>
    <input type="radio" id="genderChoice1" name="gender" value="male">
    <label for="genderChoice1">Homme</label>

    <input type="radio" id="genderChoice2" name="gender" value="female">
    <label for="genderChoice2">Femme</label>

    <input type="radio" id="genderChoice3" name="gender" value="other">
    <label for="genderChoice3">Autre</label>

    <input type="radio" id="genderChoice4" name="gender" value="notSpecified">
    <label for="genderChoice4">Préfère ne pas répondre</label>
  </div>
  <div>
    <button type="submit">Envoyer</button>
  </div>
</form>

Dans l'exemple précédent, on possède quatre options pour autant de boutons radios. Le premier bouton a pour identifiant la chaîne "genderChoice1", pour nom la chaîne "gender",  et pour valeur "male". Si la première valeur est sélectionnée lors de l'envoi du formulaire, la paire nom/valeur envoyée sera  "gender=male".

L'attribut name est particulièrement important pour les boutons radios car il permet d'identifier à quel groupe se rattache un bouton. Chaque groupe de boutons se comporte comme une entité distincte et on ne peut choisir qu'une seule option dans un groupe donnée (cliquer sur une autre option déselectionnera l'option précédemment choisie). Si on a plusieurs groupes de boutons radios sur une même page, ces groupes doivent avoir différents noms (autrement dit, différentes valeurs pour l'attribut name).

Utiliser les boutons radio

Nous avons vu les principales fonctionnalités des boutons radio dans les paragraphes précédents. Voyons désormais quelques exemples et les techniques associées.

Sélectionner un bouton radio par défaut

Afin de sélectionner un bouton radio par défaut, il suffit d'ajouter l'attribut booléen checked. Par exemple :

<form> Merci d'indiquer votre genre :
  <div>
    <input type="radio" id="genderChoice1"
     name="gender" value="male">
    <label for="genderChoice1">Homme</label>
    <input type="radio" id="genderChoice2"
     name="gender" value="female">
    <label for="genderChoice2">Femme</label>
    <input type="radio" id="genderChoice3"
     name="gender" value="other">
    <label for="genderChoice3">Autre</label>
    <input type="radio" id="genderChoice4"
     name="gender" value="notSpecified" checked>
    <label for="genderChoice4">Préfère ne pas répondre</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

Dans ce cas, c'est le dernier bouton radio qui est sélectionné.

Note : Si on utilise l'attribut checked sur plusieurs boutons radio, ce sera le dernier bouton (dans l'ordre des éléments du document) qui sera sélectionné.

Fournir une zone de sélection plus grande

Dans les exemples précédents, vous avez pu remarquer qu'il était possible de sélectionner un bouton radio en cliquant sur l'élément <label> associé. Cette fonctionnalité permet de sélectionner plus facilement les différentes options, notamment sur les appareils avec des écrans plus petits.

Au-delà des raisons liées à l'accessibilité, il s'agit d'un bon argument pour paramétrer correctement des éléments <label> dans les formulaires.

Validation

Il n'y a pas de mécanisme de validation native associé aux boutons radio.

Exemples

L'exemple qui suit reprend la sélection du genre abordée auparavant et à laquelle on a ajouté une mise en forme. Voici le code HTML :

<form>
  <fieldset>
  <legend>Merci d'indiquer votre genre</legend>
    <div>
      <input type="radio" id="genderChoice1"
       name="gender" value="male">
      <label for="genderChoice1">Homme</label>
      <input type="radio" id="genderChoice2"
       name="gender" value="female">
      <label for="genderChoice2">Femme</label>
      <input type="radio" id="genderChoice3"
       name="gender" value="other">
      <label for="genderChoice3">Autre</label>
      <input type="radio" id="genderChoice4"
       name="gender" value="notSpecified" checked>
      <label for="genderChoice4">Préfère ne pas répondre</label>
    </div>
    <div>
      <button>Envoyer</button>
    </div>
  </fieldset>
</form>

Il n'y a pas grand chose à ajouter ici en dehors de l'ajout des éléments <fieldset> et <legend> qui permettent de former un groupe.

Voici ensuite la feuille de style CSS utilisée :

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 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  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: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

L'élément le plus important ici est sans doute l'utilisation de la propriété appearance (avec les différents préfixes des navigateurs). Par défaut, les boutons radio (et les cases à cocher) sont mises en forme avec les contrôles natifs du système d'exploitation. En utilisant appearance: none, on peut retirer cette mise en forme native et appliquer une mise en forme personnalisée. Ici, on utilise border et border-radius ainsi que transition afin de créer une animation lors de la sélection. On notera également que la pseudo-classe :checked est utilisée pour indiquer la mise en forme à appliquer lorsqu'une option est sélectionnée.

Attention toutefois, cette solution n'est pas parfaite, appearance fonctionne sans souci pour une mise en forme simple mais peut avoir un comportement différent selon le navigateur utilisé et cette propriété ne fonctionne pas sur IE. Testez votre mise en forme sur différents navigateurs lorsque vous l'utilisez.

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<input type="radio">' dans cette spécification.
Standard évolutif Définition initiale.
HTML5
La définition de '<input type="radio">' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, FanJiyong
 Dernière mise à jour par : SphinxKnight,