Cases à cocher

Les cases à cocher permettent généralement de faire un choix multiple parmi plusieurs options possibles.

Principes de fonctionnement

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

La zone doit avoir un attribut name dont la valeur doit être unique parmi toutes les zones composant le formulaire.

Les cases à cocher font le plus souvent parmi d'un groupe de réponses possibles à un choix. Elles sont prévues pour que l'utilisateur puisse choisir plusieurs réponses possibles parmi celles qui lui sont proposées.
On peut aussi utiliser les cases à cocher seules comme dans l'exemple ci-dessous.

Exemple : cases à cocher solitaires

Comme vous le voyez en testant l'exemple, si une case n'est pas cochée, rien n'est envoyé au serveur. Cette particularité rend le traitement des cases à cocher sur le serveur un peu plus complexe que pour les autres zones de formulaire. Je vous conseille donc d'éviter l'utilisation des cases à cocher quand vous le pouvez.

Pour cocher une case par défaut, il suffit qu'elle 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="checkbox" 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é à une case à cocher est particulièrement intéressante car la sélection/déselection de la case est facilitée par la surface plus grande du label.

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.

Ajouter à mes amis

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 : Gandalf, Frodon, Gimli, Sauron, Saroumane, Gollum, Yoda, Luke Skywalker, Chewbacca, Palpatine, Dark vador, Comte Dooku.)

Quand on clique sur les images ou sur les noms des personnages, la case à cocher correspondante est sélectionnée ou déselectionnée.

Les cases à cocher impaires sont sélectionnées par défaut (Gandalf, Gimli, Saroumane, Yoda, Chewbacca, Dark vador).

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

Les boutons s'appellent btnReset et btnSubmit.

Code à compléter

Une solution possible

Exercice : ajouter à mes amis

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Ajouter des amis</title>
	</head>
	<body>
		<form method="POST" action="ajouter.php">
			<h3>Ajouter à ma liste d'amis</h3>
			<hr>
			<input type="checkbox" name="chk1" 
				   value="gandalf" checked id="chk1">
			<label for="chk1">
				Gandalf<img src="../exemples/lord_rings/images/gandalf.png">
			</label>
			<hr>
			<input type="checkbox" name="chk2" 
				   value="frodon" id="chk2">
			<label for="chk2">
				Frodon<img src="../exemples/lord_rings/images/frodon.png">
			</label>
			<hr>
			<input type="checkbox" name="chk3" 
				   value="gimli" checked id="chk3">
			<label for="chk3">
				Gimli<img src="../exemples/lord_rings/images/gimli.png">
			</label>
			<hr>
			<input type="checkbox" name="chk4" 
				   value="sauron" id="chk4">
			<label for="chk4">
				Sauron<img src="../exemples/lord_rings/images/sauron.png">
			</label>
			<hr>
			<input type="checkbox" name="chk5"
				   value="saroumane" checked id="chk5">
			<label for="chk5">
				Saroumane<img src="../exemples/lord_rings/images/saroumane.png">
			</label>
			<hr>
			<input type="checkbox" name="chk6" 
				   value="gollum" id="chk6">
			<label for="chk6">
				Gollum<img src="../exemples/lord_rings/images/gollum.png">
			</label>
			<hr>
			<input type="checkbox" name="chk7" 
				   value="yoda" checked id="chk7">
			<label for="chk7">
				Yoda<img src="../exemples/star_wars/images/yoda.png">
			</label>
			<hr>
			<input type="checkbox" name="chk8" 
				   value="luke" id="chk8">
			<label for="chk8">
				Luke Skywalker<img src="../exemples/star_wars/images/luke_skywalker.png">
			</label>
			<hr>
			<input type="checkbox" name="chk9"
				   value="chewbacca" checked id="chk9">
			<label for="chk9">
				Chewbacca<img src="../exemples/star_wars/images/chewbacca.png">
			</label>
			<hr>
			<input type="checkbox" name="chk10"
				   value="palpatine" id="chk10">
			<label for="chk10">
				Palpatine<img src="../exemples/star_wars/images/palpatine.png">
			</label>
			<hr>
			<input type="checkbox" name="chk11" 
				   value="vador" checked id="chk11">
			<label for="chk11">
				Dark Vador<img src="../exemples/star_wars/images/dark_vador.png">
			</label>
			<hr>
			<input type="checkbox" name="chk12" 
				   value="dooku" id="chk12">
			<label for="chk12">
				Comte Dooku<img src="../exemples/star_wars/images/comte_dooku.png">
			</label>
			<hr>
			<p>
				<input type="reset" value="Effacer"
					   name="btnReset">
				<input type="submit" value="Ajouter"
					   name="btnSubmit">
			</p>
		</form>
	</body>
</html>