MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<input type="radio">

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

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

Spécifications

Spécification État Commentaires
WHATWG 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
 Dernière mise à jour par : SphinxKnight,