Les cases à cocher

Les cases à cocher permettent à l'utilisateur d'activer une ou plusieurs options dans un formulaire. Dans ce cours, nous allons les découvrir, en commençant par leur différence avec les listes à puce, puis en voyant comment créer une case à cocher en HTML et enfin comment précocher une option.

Différence entre les cases à cocher et les listes à puce

Quand on débute, on peut facilement confondre les cases à cocher et les listes à puce, car dans les deux cas il s'agit de proposer plusieurs choix dans un formulaire.

La différence essentielle est la suivante : avec une liste à puce, l'utilisateur choisit une seule réponse. Avec des cases à cocher, il peut choisir plusieurs réponses en même temps.

Par exemple, si vous demandez un mode de livraison, une seule réponse est logique. En revanche, si vous demandez quels ingrédients l'utilisateur souhaite sur une pizza, plusieurs réponses sont possibles.

						
							<form>
								<p>Choisissez vos ingrédients</p>
								<input type="checkbox" id="fromage">
								<label for="fromage">Fromage</label><br>

								<input type="checkbox" id="champignons">
								<label for="champignons">Champignons</label><br>

								<input type="checkbox" id="olives">
								<label for="olives">Olives</label>
							</form>
						
					

Ici, l'utilisateur peut cocher une, deux ou trois options selon ses envies.

Retenez donc cette idée simple : radio = un seul choix, checkbox = plusieurs choix possibles.

<input> de type checkbox

Pour créer une case à cocher en HTML, on utilise une balise <input> avec l'attribut type="checkbox".

Chaque balise représente une case indépendante. Contrairement aux boutons radio, une case à cocher ne désactive pas automatiquement les autres cases autour d'elle.

Autrement dit, une option = une balise input de type checkbox.

						
							<input type="checkbox">
							<input type="checkbox">
							<input type="checkbox">
						
					

Toutes seules, ces cases ne disent pas à quoi elles correspondent. Comme pour les autres champs de formulaire, il faut donc ajouter un <label> pour rendre chaque choix compréhensible.

						
							<input type="checkbox" id="html">
							<label for="html">HTML</label><br>

							<input type="checkbox" id="css">
							<label for="css">CSS</label><br>

							<input type="checkbox" id="javascript">
							<label for="javascript">JavaScript</label>
						
					

Grâce aux labels, chaque case est clairement associée à une option précise.

Dans un vrai formulaire, on écrit souvent plusieurs cases à cocher l'une à la suite de l'autre pour laisser l'utilisateur sélectionner tout ce qui lui convient.

Préselectionner une option avec checked

Si vous voulez qu'une case soit déjà cochée au chargement de la page, il suffit d'ajouter l'attribut checked dans la balise concernée.

Cela permet de proposer une valeur active par défaut. Par exemple, on peut précocher l'abonnement à une newsletter ou une option souvent choisie.

						
							<input type="checkbox" id="newsletter" checked>
							<label for="newsletter">Recevoir la newsletter</label>
						
					

La case est déjà activée dès que le formulaire s'affiche.

Avec les cases à cocher, plusieurs options différentes peuvent être précochées en même temps. Ce n'est pas le cas avec les listes à puce, où une seule réponse peut rester active dans un groupe.

						
							<form>
								<p>Recevoir des notifications pour</p>
								<input type="checkbox" id="email" checked>
								<label for="email">Les e-mails</label><br>

								<input type="checkbox" id="commentaires" checked>
								<label for="commentaires">Les commentaires</label><br>

								<input type="checkbox" id="promotions">
								<label for="promotions">Les promotions</label>
							</form>
						
					

Vous savez maintenant reconnaître quand utiliser des cases à cocher, créer un <input type="checkbox"> et précocher une ou plusieurs options avec checked.