Boutons radio

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

Principes de fonctionnement

Exemple : boutons radio

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.

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

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>