HTML - Case à cocher

  »   HTML  »   Tutoriel HTML - Utiliser la dimension Checkbox

Les cases à cocher, comme mentionné dans le tutoriel précédent, font parties des pratiques offertes par la dimension input.

Ce qui est différent du tutoriel précédent est que nous développerons le sujet davantage cette fois.

Case à cocher - Créer les listes

Les cases à cocher viennent aider l'utilisateur, en lui permettant de choisir simultanément plus d'une option parmi les options proposées.

html<p>Choisissez vos couleurs favorites .</p>
<p>
	Bleu: <input type="checkbox" name="colors" value="blue" /><br />
	Jaune: <input type="checkbox" name="colors" value="yellow" /><br />
	Rouge: <input type="checkbox" name="colors" value="red" /><br />
	Vert: <input type="checkbox" name="colors" value="green" />
</p>

Demo

Choisissez vos couleurs favorites .

Bleu:
Jaune:
Rouge:
Vert:

Case à cocher - Les cases sélectionnées par défaut

Les cases à cocher offrent également la possibilité d'être déjà cochées dans le but de faciliter le travail de l'utilisateur dans certaines situations.

Cela est fait avec l'aide de l'attribut checked, en définissant sa valeur comme yes, comme suivant.

html<p>Choisissez vos couleurs favorites .</p>
<p>
	Bleu: <input type="checkbox" name="colors" value="blue" checked="yes" /><br />
	Jaune: <input type="checkbox" name="colors" value="yellow" /><br />
	Rouge: <input type="checkbox" name="colors" value="red" /><br />
	Vert: <input type="checkbox" name="colors" value="green" checked="yes" />
</p>

Demo

Choisissez vos couleurs favorites .

Bleu:
Jaune:
Rouge:
Vert:

Vous pouvez essayer de jouer un peu avec cette pratique. C'est assez simple mais très utile comme vous le verrez.