L'objet de formulaire select et l'envoi des données

Pour créer des listes et des menus en HTML, on utilise les balises select et option. Mais comment récupérer l'option choisie par l'utilisateur avec les autres données de formulaire?

Voici la syntaxe de la balise select:

<form method="GET" action="page.html">
  <select name="">
    <option value="" selected></option>
    <option value=""></option>
    <option value=""></option>
    ....
  </select>
</form>

Les formulaires transmettent les données sous la forme nom=valeur ou nom est l'attribut name de l'objet et valeur l'attribut value.
Dans le cas d'une liste d'options, le nom qui est passé avec les données de formulaire est celui de la balise select et la valeur est celle de l'attribut value de l'option choisie.

Par exemple:

<select name="maliste">
  <option value="option1"></option>
  <option value="option2"></option>
</select>

Si on a choisi la deuxième option, avec les données de formulaire sera envoyé ceci:

maliste=option2 

Et si une option à l'attribut selected et que l'utilisateur n'a fait aucun choix, c'est la valeur de cette option qui sera passée.

L'attribut selected détermine un choix par défaut

Par défaut, c'est la première option qui est sélectionnée si l'utilisateur ne fait aucun choix.
On peut changer l'option sélectionnée par défaut en lui associant l'attribut selected.
Exemple:

  <select name="couleur">
    <option value="orange"></option>
    <option value="bleu" selected></option>
    <option value="rouge"></option>
    ....
  </select>

Dans l'exemple, le menu affiche la couleur bleue par défaut et c'est cette option qui sera envoyées avec les données de formulaire, si l'utilisateur ne change pas le choix.

On écrit quelque fois aussi l'attribut selected:

    <option value="bleu" selected="selected"></option>

Cela ne semble rien apporter de plus, tout au moins avec les navigateurs modernes.

L'attribut multiple permet des sélectionner plusieurs options à la fois

On peut sélectionner plusieurs options à la fois en combinant la touche CTRL avec la souris, si cet attribut est ajouté.

<select name="couleur" multiple>
    <option value="orange"></option>
    <option value="bleu" selected></option>
    <option value="rouge"></option>
    ....
</select>

Dans ce cas, le nom de l'objet select est passé parmi les données de formulaire avec successivement la valeur de chaque option cliquée.
Ainsi si on selectionne à la fois la couleur bleue et la couleur rouge, on aura en paramètres dans l'URL:

?couleur=bleu&couleur=rouge 

L'attribut size définit le nombre de lignes à afficher

Il définit le nombre d'options affichées à la fois. Par défaut une seule ligne sera affichée.

Dans la démonstration en bas de page, on voit que l'attribut size="4" affiche quatre lignes, donc quatre options.

L'attribut label contient l'option affichée en forme courte

Une option a une valeur assignée à l'attribut value, et un texte correspondant à afficher qui est soit inclut dans la balise, ou assigné à l'attribut label.

Dans la forme courte, l'attribut label spécifie le texte à afficher. Par exemple cette option en forme longue:

  <option value="orange">Orange</option>

Peut être écrite en forme courte:

  <option value="orange" label="Orange" />

Si un attribut label est ajouté alors que la balise à la forme longue avec un contenu inclus, c'est la valeur de label qui est affichée et non le contenu inclus.

Mais dans tous les cas c'est ce qui est assigné à value qui est envoyé avec les données de formulaire.

La balise optgroup subdivise les options

Il permet de créer une hiérarchie de menus en regroupant les options d'un même sous-menu.

<select name="couleur" multiple>
  <optgroup label="Couleur">
    <option value="orange">Orange</option>
    <option value="bleu" selected>Bleu</option>
    <option value="rouge">Rouge</option>
  </optgroup>
  <optgroup label="Taille">
   <option value="un">Un</un>
 </optgroup>
</select> 

Cela affichera ceci dans la boite de sélection:

Couleur
   Orange
   Bleu
   Rouge
Taille
   Un 

Connaître l'option choisie par l'utilisateur grâce à JavaScript

Pour utiliser select en JavaScript, et savoir quelle option l'utilisateur a choisie, on utilise l'attribut selectedIndex (défini dans DOM).
Si la balise select a pour nom "couleur", l'instruction suivante affiche le numéro de l'option choisie, en partant de zéro:

document.forms[0].couleur.selectedIndex;

Et pour accéder aux valeurs, avec le tableau options:

var object = document.forms[0].couleur;
var index = object.selectedIndex;
var value =  object.options[index].value;
var content = object.options[index].text;

On peut aussi choisir une option à partir de code JavaScript:

document.forms[0].couleur.selectedIndex = 3; 

La gestion dynamique des listes en JavaScript est développée dans l'article Select dynamique.

Démonstration de la balise select avec une liste de fruits

Comment on passe le choix fait par l'utilisateur dans une liste parmi les données de formulaire envoyées à un script ou une autre page.

Choisir une valeur dans la liste et cliquer sur Envoyer pour passer le formulaire à la page, qui sera rechargée.
Cliquer sur JavaScript pour afficher le numéro de l'option sélectionnée.

Le code JavaScript:

function receive()
{
  var parameters = location.search.substring(1).split("&");
  var temp = parameters[0].split("=");
  varname = unescape(temp[0]);
  if(varname == "") return;
  value = unescape(temp[1]);
  alert(varname + "=" + value);
}
window.onload=receive;

Le code HTML avec la méthode GET pour avoir les données de formulaire dans l'URL:

<form name="form1" method="get" action="select.php">
  <select name="couleur" id="couleur" multiple size="4">
    <option>orange</option>
    <option selected>bleu</option>
    <option>vert</option>
    <option>rouge</option>
  </select>
  <input type="submit" value="Envoyer">
  <input type="button" value="Javascript" onClick="show()">
</form>

Voir aussi

• Passer des paramètres à une page Web. Comment récupérer les données de formulaire dans une autre page.

<div style="position:absolute;top:360px; width:600px; height:400px; z-index:2; "><SELECT NAME=Continent>
<OPTION>Europe
<OPTION>Asie
<OPTION>Afrique
<OPTION>Amérique
<OPTION>Océanie
</SELECT>
</div>

position:relative

position:absolute