Zones de listes

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

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 ?

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.

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>

Listes de sélection

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

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>
			
			<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>

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

<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>

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.

Les boutons s'appellent btnReset et btnSubmit.

Code à compléter

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>