Nous allons maintenant voir les éléments d'options, qui permettent non pas d'écrire du texte comme nous l'avons vu avec les zones de saisies, mais bien de choisir entre une ou plusieurs options prédéfinies.
Nous allons passer en revue trois éléments d'options :
les cases à cocher
les groupes d'options
les listes déroulantes
Toutes ont leur particularité que nous verrons ensemble.
Les cases à cocher
Pour créer une case à cocher il suffit d'utiliser la balise <input /> que nous avons vu à plusieurs reprises précédemment.
Sauf qu'ici nous lui mettrons un attribut type de valeur "checkbox", comme ceci :
<input type="checkbox" name="monchoix" />
Si vous en mettez plusieurs à la suite, n'oubliez pas de mettre un attribut "name" différent !
Voici un exemple de liste d'options :
Les groupes d'options
Les groupes d'options ressemblent assez aux cases à cocher à la différence près que vous ne pouvez choisir qu'un seul élément parmi le groupe d'options.
Pour cela il suffit de changer le type de la balise de "checkbox" à "radio".
Cependant il y a deux choses à faire avec ce groupe d'options. Premièrement il faut que toutes les balises qui la composent aient le même nom, et deuxièmement il faut leur rajouter des attributs "value" de valeur différente.
Un groupe d'options est constitué de plusieurs de ces balises.
En voici un exemple :
Les listes déroulantes
Pour les listes déroulantes ça se complique un peu puisque l'on va utiliser deux balises principalement.
La première balise que nous allons voir est la balise <select>, c'est elle qui englobe le tout (un peu comme la balise <form>).
Et à l'intérieur de cette balise <select>, qui délimite la liste déroulante, on va mettre des balises <option> : une par option.
Pour les attributs on utilisera "name" et "value", comme on a vu précédemment, sauf que cette fois il y a une particularité à prendre en compte.
L'attribut "name" se met sur la balise <select> et l'attribut "value" se met sur la balise sur chaque balise <option> avec une valeur différente à chaque fois évidemment.