Les boutons radios permettent de faire un choix exclusif parmi plusieurs options possibles.

### Principes de fonctionnement

Exemple : boutons radio
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Fromulaire</title> </head> <body> <h3>Boutons radio</h3> <form method="POST" action="dossier/reception.php"> Ce tutoriel est : <input type="radio" name="radTuto" value="3" checked id="radExcel"> <label for="radExcel">excellent</label> <input type="radio" name="radTuto" value="2" id="radTB"> <label for="radTB">très bien</label> <input type="radio" name="radTuto" value="1" id="radMoyen"> <label for="radMoyen">moyen</label> <input type="radio" name="radTuto" value="0" id="radNul"> <label for="radNul">nul</label> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `radio`. L'élément input est un élement vide (ie sans balise de fermeture).

Un bouton radio seul n'a aucun sens car les boutons radio sont conçus pour faire un choix exclusif parmi un ensemble de propositions. Ils fonctionnent donc toujours en groupe.

Ce qui détermine l'appartenance d'un bouton radio à un groupe c'est la valeur de l'attribut `name` qui doit être la même pour tous les boutons du groupe.

Un des boutons radio du groupe devrait toujours être sélectionné par défaut puisque ce type de zone sert à faire un choix exclusif : c'est soit "oui", soit "non", mais pas "oui et non" et pas "ni oui ni non".

Pour sélectionner un bouton radio par défaut, il suffit qu'il ait l'attribut `checked` .
`checked` est un attribut booléen qui n'a pas de valeur : sa présence ou son absence dans la balise d'ouverture définit la valeur `true` (présence) ou `false` (absence). Le piège est d'écrire :
`<input type="radio" checked="false"...`
Comme `checked` est présent, la valeur sera `true` et le navigateur ne tiendra pas compte de l'égalité faite dans le code HTML.

L'utilisation d'un élément label attaché à un bouton radio est particulièrement intéressante car la sélection/déselection du bouton est facilitée par la surface plus grande du label.

Attention a bien donner une valeur d'`id` différente pour chacun des boutons radio, mais d'avoir une valeur identique pour l'attribut `name` des boutons d'un même groupe.

Attribut possible | Utilité
`checked` | Etat par défaut (coché ou non). Attribut booléen.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`name` | Nom de la zone. Tous les boutons d'un même groupe DOIVENT avoir le même.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`required` | Zone obligatoire. Attribut booléen.
`value` | Valeur initiale de la zone et valeur transmise au serveur après saisie.

### Groupes de boutons radio

Complétez le code HTML pour obtenir le résultat ci-dessous.

groupes de boutons radio
arborescence de l'exercice

Les images s'appellent du nom du personnage, tout en minuscules, et les espaces éventuels remplacés par un _ (underscore). L'extension du fichier est `.png`

(Personnages : Yoda, Luke Skywalker, Chewbacca, Palpatine, Dark vador, Comte Dooku.)

Quand on clique sur les images, le bouton radio correspondant est sélectionné ou déselectionné.

Le dernier bouton radio de chaque groupe est sélectionné par défaut.

La valeur d'un bouton radio est le nom du personnage auquel il est associé.

Le formulaire utilise la méthode `POST` pour envoyer les informations saisies à `recuperer.php`.

Les boutons s'appellent `btnReset` et `btnSubmit`.

Code à compléter

Exercice : groupes de boutons radio
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Groupes de boutons radio</title> </head> <body> <form> <h2>Eliminez un concurrent.</h2> <hr> <p> Je suis : </p> <hr> <h3>Il ne continue pas l'aventure : </h3> <hr> <h3>Il ne continue pas l'aventure :</h3> <hr> <p> </p> </form> </body> </html>

Une solution possible

Exercice : groupes de boutons radio
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Groupes de boutons radio</title> </head> <body> <form method="POST" action="recuperer.php"> <h2>Eliminez un concurrent.</h2> <hr> <p> Je suis : <input type="radio" name="radGenre" id="radF" value="F"> <label for="radF">une femme</label> <input type="radio" name="radGenre" id="radH" checked value="H"> <label for="radH">un homme</label> </p> <hr> <h3>Il ne continue pas l'aventure : </h3> <input type="radio" name="radGentil" id="rad1" value="yoda"> <label for="rad1"> <img src="../exemples/star_wars/images/yoda.png"> </label> <input type="radio" name="radGentil" id="rad2" value="luke"> <label for="rad2"> <img src="../exemples/star_wars/images/luke_skywalker.png"> </label> <input type="radio" name="radGentil" id="rad3" value="chewbacca" checked> <label for="rad3"> <img src="../exemples/star_wars/images/chewbacca.png"> </label> <hr> <h3>Il ne continue pas l'aventure :</h3> <input type="radio" name="radMechant" id="rad4" value="palpatine"> <label for="rad4"> <img src="../exemples/star_wars/images/palpatine.png"> </label> <input type="radio" name="radMechant" id="rad5" value="dark_vador"> <label for="rad5"> <img src="../exemples/star_wars/images/dark_vador.png"> </label> <input type="radio" name="radMechant" id="rad6" value="comte_dooku" checked> <label for="rad6"> <img src="../exemples/star_wars/images/comte_dooku.png"> </label> <hr> <p> <input type="reset" value="Effacer" name="btnReset"> <input type="submit" value="Voter" name="btnSubmit"> </p> </form> </body> </html>