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

### Principes de fonctionnement

Exemple : cases à cocher
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Cases à cocher</h3> <form method="POST" action="dossier/reception.php"> Je connais les langages : <input type="checkbox" name="chkHTML" value="html" checked id="chkHTML"> <label for="chkHTML">HTML</label> <input type="checkbox" name="chkCSS" value="css" checked id="chkCSS"> <label for="chkCSS">CSS</label> <input type="checkbox" name="chkJavaS" value="js" id="chkJavaS"> <label for="chkJavaS">JavaScript</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 `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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Cases à cocher solitaires</title> </head> <body> <form method="POST" action="dossier/reception.php"> <input type="checkbox" name="chkUtil" value="util" id="chkUtil"> <label for="chkUtil"> J'ai lu les conditions d'utilisation </label> <br> <input type="checkbox" name="chkNews" value="news" id="chkNews"> <label for="chkNews"> Je m'inscris à la news letter </label> <br> <input type="checkbox" name="chkPub" value="pub" id="chkPub"> <label for="chkPub"> J'accepte de recevoir des publicités des sites partenaires </label> <p> <input type="submit" name="btnEnvoi" value="Je m'inscris"> </p> </form> </body> </html>

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.

Ajouter à mes amis
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 : 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

Exercice : ajouter à mes amis
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Groupes de boutons radio</title> </head> <body> <form> <h3>Ajouter à ma liste d'amis</h3> <hr> <p> </p> </form> </body> </html>

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>