Les zones de saisie liste sont une structure HTML faite avec 2 éléments dont l'un fournit le nom de la zone et l'autre sa valeur.

### Structure d'une liste

Exemple : zone liste
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de liste</h3> <form method="POST" action="dossier/reception.php"> <label for="selHeros">Héros préféré</label> <select name="selHeros" id="selHeros"> <option value="moi">Moi</option> <option value="piat">François Piat</option> <option value="yoda">Yoda</option> <option value="vador">Dark Vador</option> <option value="gandalf">Gandalf</option> <option value="legolas">Legolas</option> </select> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

Les listes se construisent avec 2 éléments : l'élément select est le conteneur des lignes de la liste qui sont faites avec des éléments option .
Il doit y avoir une balise d'ouverture `<select>` et une balise de fermeture `</select>`.

L'élément select doit avoir un attribut `name` et la valeur de cet attribut doit être unique parmi toutes les zones composant le formulaire.
L'élément select n'a pas d'attribut `value`.

Les lignes de la liste sont faites avec des éléments option qui contiennent le texte affiché pour la ligne.
Les éléments option doivent avoir un attribut `value`.
Quand le formulaire sera envoyé au serveur pour traiement, l'attribut `value` de l'option sélectionnée sera associé à l'attribut `name` du select pour contituer un couple nom / valeur.

Si aucune ligne n'apparait comme sélectionnée dans la liste, c'est la première ligne de la liste qui sera choisie comme valeur pour le couple nom / valeur envoyé au serveur.

Une ligne peut être sélectionnée par défaut : il suffit qu'elle ait l'attribut `selected` .
`selected` 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 :
`<option selected="false"...`
Comme `selected` est présent, la valeur sera `true` et le navigateur ne tiendra pas compte de l'égalité faite dans le code HTML.

Attributs de l'élément select

Attribut possible | Utilité
`autofocus` | 1er élément activé dans le formulaire. 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.
`multiple` | Sélection possible de plusieurs lignes. Attribut booléen.
`name` | Nom de la zone. Tous les boutons d'un même groupe DOIVENT avoir le même.
`required` | Zone obligatoire. Attribut booléen.
`size` | Nombre de lignes visibles directement. Si l'attribut est absent, la valeur est 1.

Attributs de l'élément option

Attribut possible | Utilité
`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.
`selected` | Ligne sélectionnée par défaut dans une liste.
`value` | Valeur initiale de la zone et qui sera transmise au serveur si la ligne est sélectionnée dans la liste.

### Déroulante ou défilante ?

liste déroulante

Une liste est dite déroulante si une seule ligne est affichée et que les autres lignes de la liste apparaissent quand on clique sur la fléche à droite.

liste défilante

Une liste est dite défilante si plusieurs lignes sont affichées et qu'une barre de défilement verticale permet de faire apparaitre les autres lignes de la liste.

C'est l'attribut `size` de l'élément select qui permet de définir le nombre de lignes affichées.
Si l'attribut `size` est absent ou égal à 1 on obtient une liste déroulante, sinon on obtient une liste défilante.

Si on peut choisir la hauteur de la liste avec l'attribut `size`, aucun attribut ne permet de définir sa largeur qui est déterminée par la plus longue ligne. Pour uniformiser la largeur des listes entre elles et avec les autres zones de saisie du formulaire, on utilise des règles de style CSS. A part la largeur, les autres éléments d'une liste (lignes, marges interne et externe, soulignement, zone interactive d'affichage/masquage, etc.) sont très difficiles à styler de façon homogènes dans les navigateurs (de pratiquement impossible avec Internet Explorer et Chrome à mieux pour Firefox).

Exemple : liste défilante et liste déroulante
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste défilante et liste déroulante</title> <style> form {width: 200px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {float:right; margin: 1.5em 0} select {width: 200px} </style> </head> <body> <form method="POST" action="dossier/reception.php"> <h3>Liste déroulante</h3> <label for="selDeroule">Héros préféré</label> <select name="selDeroule" id="selDeroule"> <option value="moi">Moi</option> <option value="piat">François Piat</option> <option value="yoda">Yoda</option> <option value="vador">Dark Vador</option> <option value="gandalf">Gandalf</option> <option value="legolas">Legolas</option> </select> <h3>Liste défilante</h3> <label for="selDefile">Film préféré</label> <select size="5" name="selDefile" id="selDefile"> <option value="SW1">La Menace fantôme</option> <option value="SW2">L'Attaque des Clones </option> <option value="SW3">La Revanche des Sith </option> <option value="SW4">Un nouvel espoir</option> <option value="SW5">L'Empire contre-attaque </option> <option value="SW6">Le Retour du Jedi</option> <option value="LR1">La Communauté de l'anneau </option> <option value="LR2">Les Deux Tours</option> <option value="LR3">Le Retour du roi</option> </select> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

#### Listes de sélection

Ajouter à mes amis

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (`form05.css`) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode `POST` pour envoyer les informations saisies à `informatique.php`.

Les listes s'appellent respectivement `slcEdit` et `slcPref`.

Les lignes de `slcEdit` affichent : NetBeans, Eclipse, Scite, Notepad ++. La liste n'affiche qu'une ligne et la ligne Eclipse est sélectionnée par défaut. Les valeurs des lignes sont le texte affiché par la ligne.

Les lignes de `txtPref` affichent : C, C#, C++, CSS, HTML, JavaScript, Java, Perl, PHP, Python, Ruby. La liste affiche 6 lignes et la ligne HTML est sélectionnée par défaut. Les valeurs des lignes sont le texte affiché par la ligne.

Les boutons s'appellent `btnReset` et `btnSubmit`.

Code à compléter

Exercice : liste de sélection
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste de sélection</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> label {display:block; margin: 1em 0 0.2em 0;} select {width: 200px;} </style> </head> <body> <form> </form> </body> </html>

Une solution possible

Exercice : ajouter à mes amis
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste de sélection</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> label {display:block; margin: 1em 0 0.2em 0;} select {width: 200px;} </style> </head> <body> <form method="POST" action="informatique.php"> <fieldset> <legend>Informatique</legend> <label for="slcEdit">Editeur de code</label> <select id="slcEdit" name="slcEdit"> <option value="NetBeans">NetBeans</option> <option selected value="Eclipse">Eclipse</option> <option value="Scite">Scite</option> <option value="Notepad ++"> Notepad ++</option> <option value="Autre">Autre</option> </select> <label for="slcPref">Langage préféré</label> <select size="6" id="slcPref" name="slcPref"> <option value="C">C</option> <option value="C#">C#</option> <option value="C++">C++</option> <option value="CSS">CSS</option> <option selected value="HTML">HTML</option> <option value="JavaScript"> JavaScript</option> <option value="Java">Java</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Python">Python</option> <option value="Ruby">Ruby</option> </select> </fieldset> <fieldset> <input type="reset" value="J'efface" name="btnReset"> <input type="submit" value="J'envoie" name="btnSubmit"> </fieldset> </form> </body> </html>

### Sélections multiples

L'attribut `multiple` de l'élément select permet de sélectionner plusieurs lignes dans la liste.
`multiple` 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 :
`<select multiple="false"...`
Comme `multiple` est présent, la valeur sera `true` et le navigateur ne tiendra pas compte de l'égalité faite dans le code HTML.

Avec `multiple`, la sélection des lignes peut se faire en appuyant sur la touche Ctrl du clavier ou sur la touche Maj.

Si `multiple` est utilisé, la liste créée doit être obligatoirement une liste défilante, le seul type permettant une saisie multiple effective. Si `size` n'est pas précisé ou égal à 1, le navigateur créera automatiquement une liste défilante affichant 4 lignes.

Pour que les ligne sélectionnées puissent être traitées correctement sur le serveur par un script PHP, il faut que le nom de l'élément select soit terminé par `[]` de façon à définir un tableau pour le script de traitement PHP.

Exemple : sélections multiples
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Sélections multiples</title> <style> form {width: 200px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {float:right; margin: 1.5em 0} select {width: 200px} </style> </head> <body> <form method="POST" action="dossier/reception.php"> <h3>Sélections multiples</h3> <label for="selDeroule">Héros préféré</label> <!-- cette liste n'a pas d'attribut size et sera automatiquement transformée en liste défilante --> <select multiple name="selDeroule[]" id="selDeroule" > <option value="moi">Moi</option> <option value="piat">François Piat</option> <option value="yoda">Yoda</option> <option value="vador">Dark Vador</option> <option value="gandalf">Gandalf</option> <option value="legolas">Legolas</option> </select> <label for="selDefile">Film préféré</label> <select size="5" multiple name="selDefile[]" id="selDefile" > <option value="SW1">La Menace fantôme</option> <option value="SW2">L'Attaque des Clones </option> <option value="SW3">La Revanche des Sith </option> <option value="SW4">Un nouvel espoir</option> <option value="SW5">L'Empire contre-attaque </option> <option value="SW6">Le Retour du Jedi</option> <option value="LR1">La Communauté de l'anneau </option> <option value="LR2">Les Deux Tours</option> <option value="LR3">Le Retour du roi</option> </select> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

### Groupement de lignes

On peut regrouper les lignes d'une liste par catégories. C'est particulièrement utile quand les listes ont beaucoup de lignes. On utilise l'élément optgroup comme conteneur des option à regrouper.

Le libellé du regroupement est contenu dans l'attribut `label` de la balise ouvrante optgroup. Ce libellé constituera une ligne dans la liste, mais cette ligne ne sera pas sélectionnable.

Exemple : groupement de lignes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Groupement de lignes</title> <style> form {width: 200px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {float:right; margin: 1.5em 0} select {width: 200px} </style> </head> <body> <form method="POST" action="dossier/reception.php"> <h3>Groupement de lignes</h3> <label for="selDeroule">Héros préféré</label> <select name="selDeroule" id="selDeroule" > <optgroup label="V d M"> <option value="moi">Moi</option> <option value="piat">François Piat </option> </optgroup> <optgroup label="Star Wars"> <option value="yoda">Yoda</option> <option value="vador">Dark Vador</option> </optgroup> <optgroup label="Le seigneur des anneaux"> <option value="gandalf">Gandalf</option> <option value="legolas">Legolas</option> </optgroup> </select> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>
Exemple : groupement de lignes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Groupement de lignes</title> <style> form {width: 200px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {float:right; margin: 1.5em 0} select {width: 200px} </style> </head> <body> <form method="POST" action="dossier/reception.php"> <h3>Groupement de lignes</h3> <label for="selDefile">Film préféré</label> <select size="5" name="selDefile" id="selDefile"> <optgroup label="Star Wars trilogie 1"> <option value="SW1">La Menace fantôme </option> <option value="SW2">L'Attaque des Clones </option> <option value="SW3">La Revanche des Sith </option> </optgroup> <optgroup label="Star Wars trilogie 2"> <option value="SW4">Un nouvel espoir </option> <option value="SW5">L'Empire contreattaque </option> <option value="SW6">Le Retour du Jedi </option> </optgroup> <optgroup label="Le seigneur des anneaux"> <option value="LR1">Communauté de l'anneau </option> <option value="LR2">Les Deux Tours </option> <option value="LR3">Le Retour du roi </option> </optgroup> </select> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

### Voyages-sncf.com

Voyages-sncf.com

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (`form05.css`) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode `POST` pour envoyer les informations saisies à `voyages-sncf.php`.

Les listes s'appellent respectivement `slcDepart`, `slcArrivee`, `slcAdulte` et `slcEnfant`. Les listes affichent une seule ligne. Les valeurs des lignes sont le numéro de la ligne (1, 2, 3, etc), sauf pour la liste `slcEnfant` où la numérotation commence à 0.

liste des points de départ
liste des points d'arrivée

Les boutons s'appellent `btnReset` et `btnSubmit`.

Code à compléter

Exercice : Voyages-sncf.com
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Voyages-sncf.com</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> select {width: 160px;} select[name="slcAdulte"], select[name="slcEnfant"] { width: auto;} </style> </head> <body> <form> </form> </body> </html>

Une solution possible

Exercice : Voyages-sncf.com
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Voyages-sncf.com</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> select {width: 160px;} select[name="slcAdulte"], select[name="slcEnfant"] { width: auto;} </style> </head> <body> <form method="POST" action="voyages-sncf.php"> <fieldset> <legend>Mon billet</legend> <div> <label for="slcDepart">Départ</label> <select id="slcDepart" name="slcDepart"> <optgroup label="La Comté"> <option value="1"> Hobbitebourg</option> <option value="2"> Vieille forêt</option> </optgroup> <optgroup label="Rohan"> <option value="3"> Isengard</option> <option value="4"> Gouffre de Helm</option> <option value="5">Edoras</option> </optgroup> <optgroup label="Mordor"> <option value="6"> Minas Morgul</option> <option value="7"> Barad-Dûr</option> </optgroup> </select> </div> <div> <label for="slcArrivee">Arrivée</label> <select id="slcArrivee" name="slcArrivee"> <optgroup label="Bordure extérieur"> <option value="1"> Tatooine</option> <option value="2">Bespin</option> <option value="3">Dagobah</option> <option value="4">Endor</option> <option value="5">Hoth</option> <option value="6">Yavin</option> </optgroup> <optgroup label="Bordure médiane"> <option value="2">Naboo</option> </optgroup> <optgroup label="Hors de la galaxie"> <option value="7">Kamino</option> </optgroup> <optgroup label="Mondes du Noyau"> <option value="8"> Alderaan</option> <option value="9"> Coruscant</option> </optgroup> </select> </div> <div> <input type="radio" name="radAR" id="r1" value="aller simple" checked> <label for="r1">Aller simple</label> <input type="radio" name="radAR" id="r2" value="aller retour"> <label for="r2">Aller-retour</label> </div> <div> <select id="slcAdulte" name="slcAdulte"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <label for="slcAdulte">adulte(s)</label> <select id="slcEnfant" name="slcEnfant"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <label for="slcEnfant">enfant(s)</label> </div> </fieldset> <fieldset> <input type="reset" value="J'efface" name="btnReset"> <input type="submit" value="Je réserve" name="btnSubmit"> </fieldset> </form> </body> </html>