12 - Les éléments d'options

HTML vous offre une ribambelle d'éléments d'options à utiliser dans votre formulaire. Ce sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités. Nous allons passer en revue :

• les cases à cocher ;
• les zones d'options ;
• les listes déroulantes.

Les cases à cocher

Créer une case à cocher ? Rien de plus simple ! Nous allons réutiliser la balise <input />, en spécifiant cette fois le type checkbox :

1<input type="checkbox" name="choix" />

Rajoutez un <label> bien placé, et le tour est joué !

1<form method="post" action="traitement.php">

2   <p>

3       Cochez les aliments que vous aimez manger :<br />

4       <input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />

5       <input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />

6       <input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />

7       <input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>

8   </p>

9</form>

Des cases à cocher

N'oubliez pas de donner un nom différent à chaque case à cocher, cela vous permettra d'identifier plus tard lesquelles ont été cochées par le visiteur.

Enfin, sachez que vous pouvez faire en sorte qu'une case soit cochée par défaut avec l'attribut checked:

1<input type="checkbox" name="choix" checked />

Normalement, tout attribut possède une valeur. Dans le cas présent, en revanche, ajouter une valeur n'est pas obligatoire : la présence de l'attribut suffit à faire comprendre à l'ordinateur que la case doit être cochée.
Si cela vous perturbe, sachez que vous pouvez donner n'importe quelle valeur à l'attribut (certains webmasters écrivent parfois checked="checked" mais c'est un peu redondant !). Dans tous les cas, la case sera cochée.

Les zones d'options

Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de possibilités. Elles ressemblent un peu aux cases à cocher mais il y a une petite difficulté supplémentaire : elles doivent être organisées en groupes. Les options d'un même groupe possèdent le même nom (name), mais chaque option doit avoir une valeur (value) différente.

La balise à utiliser est toujours un <input />, avec cette fois la valeur radio pour l'attribut type.

Les choses seront plus claires sur l'exemple ci-dessous :

1<form method="post" action="traitement.php">

2   <p>

3       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />

4       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />

5       <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />

6       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />

7       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>

8   </p>

9</form>

Ce qui nous donne la figure suivante.

Des boutons radio

Pourquoi avoir mis le même nom pour chaque option ? Tout simplement pour que le navigateur sache de quel « groupe » le bouton fait partie.
Essayez d'enlever les attributs name, vous verrez qu'il devient possible de sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les « lie » entre eux en leur donnant un nom identique.

Vous noterez que cette fois on a choisi un id différent de name. En effet, les valeurs de nameétant identiques, on n'aurait pas pu différencier les id (et vous savez bien qu'un id doit être unique !). Voilà donc pourquoi on a choisi de donner à l'id la même valeur que value.

Si vous avez deux zones d'options différentes, il faut donner un name unique à chaque groupe, comme ceci :

1<form method="post" action="traitement.php">

2   <p>

3       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />

4       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />

5       <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />

6       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />

7       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>

8   </p>

9   <p>

10       Sur quel continent habitez-vous ?<br />

11       <input type="radio" name="continent" value="europe" id="europe" /> <label for="europe">Europe</label><br />

12       <input type="radio" name="continent" value="afrique" id="afrique" /> <label for="afrique">Afrique</label><br />

13       <input type="radio" name="continent" value="asie" id="asie" /> <label for="asie">Asie</label><br />

14       <input type="radio" name="continent" value="amerique" id="amerique" /> <label for="amerique">Amérique</label><br />

15       <input type="radio" name="continent" value="australie" id="australie" /> <label for="australie">Australie</label>

16   </p>

17</form>

L'attribut checked est, là aussi, disponible pour sélectionner une valeur par défaut.

Les listes déroulantes

Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs possibilités. Le fonctionnement est un peu différent. On va utiliser la balise <select> </select> qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name à la balise pour donner un nom à la liste.

Puis, à l'intérieur du <select> </select>, nous allons placer plusieurs balises <option> </option> (une par choix possible). On ajoute à chacune d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi.

Voici un exemple d'utilisation :

1<form method="post" action="traitement.php">

2   <p>

3       <label for="pays">Dans quel pays habitez-vous ?</label><br />

4       <select name="pays" id="pays">

5           <option value="france">France</option>

6           <option value="espagne">Espagne</option>

7           <option value="italie">Italie</option>

8           <option value="royaume-uni">Royaume-Uni</option>

9           <option value="canada">Canada</option>

10           <option value="etats-unis">États-Unis</option>

11           <option value="chine">Chine</option>

12           <option value="japon">Japon</option>

13       </select>

14   </p>

15</form>

Le résultat obtenu est représenté à la figure suivante.

Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :

1<option value="canada" selected>Canada</option>

Vous pouvez aussi grouper vos options avec la balise <optgroup> </optgroup>. Dans notre exemple, pourquoi ne pas séparer les pays en fonction de leur continent ?

1<form method="post" action="traitement.php">

2   <p>

3       <label for="pays">Dans quel pays habitez-vous ?</label><br />

4       <select name="pays" id="pays">

5           <optgroup label="Europe">

6               <option value="france">France</option>

7               <option value="espagne">Espagne</option>

8               <option value="italie">Italie</option>

9               <option value="royaume-uni">Royaume-Uni</option>

10           </optgroup>

11           <optgroup label="Amérique">

12               <option value="canada">Canada</option>

13               <option value="etats-unis">Etats-Unis</option>

14           </optgroup>

15           <optgroup label="Asie">

16               <option value="chine">Chine</option>

17               <option value="japon">Japon</option>

18           </optgroup>

19       </select>

20   </p>

21</form>