Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

<input type="select">: zone de saisie avec une liste déroulante

Une liste déroulante se définit à l'aide d'un élément <input type="select"> contenant plusieurs éléments <option>. La liste va permettre à l'utilisateur de choisir une option parmi toutes celles qui sont proposées.


Exemple de liste déroulante

Quelle est votre langue marternelle ?

Code de cet exemple
<input type="select">
   <nom>langue</nom>
   <libellé>Quelle est votre langue marternelle ?</libellé>
   <option valeur="fr">Français</option>
   <option valeur="nl">Néerlandais</option>
   <option valeur="en">Anglais</option>
   <option valeur="other">Autre</option>
</input>

Contenu de l'élément <input type="select">

L'élément <input type="select"> peut posséder les sous-éléments suivants (ils ne sont pas obligatoires):

<nom>

donne le nom du paramètre à envoyer avec les données du formulaire ou à utiliser dans le reste de la page (ce nom sera utilisé pour toutes les options de la liste déroulante, mais vous pouvez le remplacer par un nom individuel, propre à chaque option).

<libellé>

donne le libellé à afficher dans le formulaire (visible par l'utilisateur, mais qui ne sera pas envoyé avec les données du formulaire)

<option>

un ou plusieurs éléments qui créent les options dans la liste déroulante, parmi lesquelles l'utilisateur devra faire un choix

La syntaxe de ces éléments <option> dans une liste déroulante est la même que celle utilisée dans des boutons radios ou des cases à cocher.

<valeur>

un ou plusieurs éléments qui donnent les valeurs par défaut à sélectionner dans la liste déroulante. Une autre façon de procéder est de placer un attribut sélectionnée="oui" ou cochée="oui" sur le ou les éléments <option> concernés

<p>

permet d'ajouter un commentaire en dessous de la liste déroulante

<taille>

permet de préciser le nombre d'options visibles dans la liste déroulante (en cas de sélections multiples)

<choix/>

permet de ne pas sélectionner la première option comme valeur par défaut dans la liste déroulante, mais d'afficher une option "faites un choix..." à la place

<obligatoire/>

impose à l'utilisateur de faire un choix parmi les options de la liste déroulante

Ces sous-éléments peuvent être complétés par tous les éléments communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la liste déroulante.


L'élément <input type="select"> peut posséder les attributs suivants (ils ne sont pas obligatoires):

multiple="..."

indique si la sélection sera multiple (multiple="oui") ou non (si vous n'utilisez pas cet attribut ou s'il est égal à "non")

envoyer="..."

précise s'il faut envoyer ou non un paramètre à l'application distante

Ces attributs peuvent être complétés par tous les attributs communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la liste déroulante.


Il est également possible d'utiliser les synonymes suivants:

<name>

synonyme de <nom>

<label>

synonyme de <libellé>

<title>

synonyme de <libellé>

<value>

synonyme de <valeur>

<choice/>

synonyme de <choix>

<mandatory/>

synonyme de <obligatoire>
Exemple
			
<input type="select">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
   <p>Si vous utilisez plusieurs formats, cochez celui qui est le plus fréquent.</p>
</input>

Support actuel de vos images:

Si vous utilisez plusieurs formats, cochez celui qui est le plus fréquent.

Sélection multiple

Par défaut, une seule option peut être sélectionnée à la fois.

Vous pouvez modifier ce comportement grâce à un attribut multiple="oui" (ou multiple="yes") à placer sur l'élément <input type="select">.

La sélection se fait en maintenant le bouton Control (Ctrl) sur PC ou Command sur Mac enfoncé.
Exemple
<input type="select" multiple="oui">
   <nom>format[]</nom>
   <libellé>format de vos images</libellé>
   <option valeur="gif">format GIF</option>
   <option valeur="jpg">format JPG</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="png">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="svg">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

Comme on le voit dans l'exemple précédent, lorsque la sélection est multiple, la liste déroulante s'affiche par défaut avec quatre options visibles (contrairement à une seule option lorsque la sélection n'est pas multiple).

On peut changer cela grâce à un élément <taille> (ou <size>) qui indique le nombre d'options qui seront visibles simultanément.


Paramètre(s) envoyé(s) en cas de sélection multiple

Mode de fonctionnement normal

Le fonctionnement normal, comme en html, est de n'utiliser qu'un seul nom de paramètre pour une liste déroulante. Ce nom est ici donné par l'élément <nom> (dans l'exemple ci-dessus, le nom sera format[], cf remarque ci-contre).

Le paramètre sera envoyé plusieurs fois, et ce pour chaque option sélectionnée. Il contiendra à chaque fois la valeur de l'option en question.

Vous pouvez changer ce mode de fonctionnement par défaut de deux manières:

Si votre application est écrite en PHP et qu'un même paramètre est envoyé plusieurs fois, il faut ajouter "[]" au nom de ce paramètre afin de récupérer la liste des options sélectionnées sous la forme d'une Array (un tableau).

Donner un nom de paramètre à une option en particulier

Par défaut, le nom du paramètre associé à chaque option est donné par l'élément <nom> placé dans l'élément <input type="select">.

Vous pouvez remplacer ce nom individuellement pour chaque option, en placant un attribut nom="..." (ou name="...") sur l'élément <option> concerné (ce n'est pas nécessaire de le faire pour tous les éléments <option>: si l'attribut n'est pas présent, on prendra le nom donné par <nom>).

On pourra ainsi envoyer plusieurs paramètres différents en fonction des options sélectionnées.

Dans cet exemple, chaque option possède son propre paramètre (gif, jpg...) qui enverra la valeur "oui" si l'option correspondante est sélectionnée.

Exemple
<input type="select" multiple="oui">
   <libellé>format de vos images</libellé>
   <option nom="gif" valeur="oui">format GIF</option>
   <option nom="jpg" valeur="oui">format JPG</option>
   <option nom="bmp" valeur="oui">format BMP</option>
   <option nom="png" valeur="oui">format PNG</option>
   <option nom="tiff" valeur="oui">format TIFF</option>
   <option nom="svg" valeur="oui">format SVG</option>
   <option nom="raw" valeur="oui">format RAW</option>
</input>

Format de vos images:

Envoyer un seul paramètre avec plusieurs valeurs

Vous pouvez également décider de n'envoyer qu'un seul paramètre, sous la forme d'une chaîne de caractères contenant toutes les valeurs des options sélectionnées séparées par le caractère |.

Le nom de ce paramètre est donné par l'élément <nom>. Il suffit d'ajouter à cet élément un attribut type="string" pour indiquer de n'envoyer qu'un seul paramètre avec plusieurs valeurs.

Dans cet exemple, un seul paramètre sera envoyé avec plusieurs valeurs si plusieurs options sont sélectionnées (format=gif|jpg|png, par exemple).

Exemple
<input type="select" multiple="oui">
   <nom type="string">format</nom>
   <libellé>format de vos images</libellé>
   <option valeur="gif">format GIF</option>
   <option valeur="jpg">format JPG</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="png">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="svg">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

Option par défaut à afficher dans la liste déroulante

Comme en html, si vous ne précisez rien, c'est la première option de la liste déroulante qui est sélectionnée par défaut dans le cas d'une sélection unique. Si l'utilisateur n'effectue pas de sélection, c'est cette option qui sera récoltée par le formulaire.

Dans le cas d'une sélection multiple, aucune des option n'est sélectionnée par défaut et rien ne sera envoyé si l'utilisateur n'effectue pas de sélection.

Ne pas sélectionner d'option par défaut

Si vous désirez forcer l'utilisateur à faire un choix, sans sélectionner d'option par défaut, vous pouvez ajouter un élément <choix/> (ou <choice/>). Une option supplémentaire sera automatiquement ajoutée, sans valeur, dont le libellé invitera l'utilisateur à faire un choix (ici, "faites votre choix").
Exemple
			
<input type="select">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <choix/>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Support actuel de vos images:

Du fait que cette option supplémentaire ne possède pas de valeur, le paramètre lié à la liste déroulante ne fera pas partie des données transmises à l'application distante si cette option supplémentaire est sélectionnée lors de l'envoi du formulaire (vous pouvez forcer un choix en ajoutant un élément <obligatoire/>).

Le libellé de cette option dépend de la langue de la page ("faites un choix", "make a choice", "maak een keuze"...). Vous pouvez le changer en mettant votre propre libellé au sein de l'élément <choix>.

Dans cet exemple, on change le libellé par défaut par "sélectionnez un format".

Exemple
			
<input type="select">
   <nom>images-type</nom>
   <libellé>support de vos images</libellé>
   <choix>sélectionnez un format</choix>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Support de vos images:

Sélectionner une autre option par défaut

Vous pouvez indiquer quelle option sera sélectionnée par défaut grâce à un attribut sélectionnée="oui" (ou selected="yes") à placer sur l'élément <option> correspondant. cochée="oui" (ou checked="yes") aura le même effet.

Dans cet exemple, c'est l'option "numeriques" qui sera sélectionnée par défaut.

Exemple
<input type="select">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques" sélectionnée="oui">images numériques</option>
</input>

Support actuel de vos images:

Une autre façon de procéder et d'utiliser un élément <valeur> (ou <value>) qui contiendra la valeur de l'option à sélectionner par défaut.

Dans cet exemple, c'est l'option "dia" qui sera sélectionnée par défaut.

Exemple
<input type="select">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <valeur>dia</valeur>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Support actuel de vos images:

Valeurs par défaut en cas de sélection multiple

En cas de sélection multiple, plusieurs options peuvent être sélectionnées par défaut:


soit à l'aide d'un attribut sélectionnée="oui" (ou selected="yes") à placer toutes les options à pré-sélectionner:
Exemple
<input type="select" multiple="oui">
   <nom>format[]</nom>
   <libellé>format de vos images</libellé>
   <option valeur="gif" sélectionnée="oui">format GIF</option>
   <option valeur="jpg" sélectionnée="oui">format JPG</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="png" sélectionnée="oui">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="svg">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

soit à l'aide de plusieurs éléments <valeur>:
Exemple
<input type="select" multiple="oui">
   <nom>format[]</nom>
   <libellé>format de vos images</libellé>
   <valeur>gif</valeur>
   <valeur>jpg</valeur>
   <valeur>png</valeur>
   <option valeur="gif">format GIF</option>
   <option valeur="jpg">format JPG</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="png">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="svg">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

soit à l'aide d'un seul élément <valeur> mentionnant les valeurs des différentes options pré-sélectionnées séparées par le caractère '|':
Exemple
<input type="select" multiple="oui">
   <nom>format[]</nom>
   <libellé>format de vos images</libellé>
   <valeur>gif|jpg|png</valeur>
   <option valeur="gif">format GIF</option>
   <option valeur="jpg">format JPG</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="png">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="svg">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

soit à l'aide d'un mélange des syntaxes qui précèdent:
Exemple
<input type="select" multiple="oui">
   <nom>format[]</nom>
   <libellé>format de vos images</libellé>
   <valeur>gif|jpg</valeur>
   <valeur>png</valeur>
   <option valeur="gif">format GIF</option>
   <option valeur="jpg">format JPG</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="png">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="svg" sélectionnée="oui">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

Modification de l'apparence de la liste déroulante

Style de la liste déroulante

Une zone de saisie par liste déroulante est considérée comme un bloc. Tous les attributs (style, bords et ses variantes) définis pour les blocs peuvent être utilisés (l'élément <titre>, ici, n'a pas lieu d'être).

Si vous n'utilisez pas d'attribut style, la zone sera affiché sans mise en page particulière (identique à style="transparent"). Dans le cas contraire c'est un bloc dont la mise en page est définie par cet attribut style qui sera affiché.
Exemple
<input type="select" style="colorBar4" bords="arrondis">
   <nom>images-type</nom>
   <libellé>support de vos images</libellé>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Support de vos images:

Nombre d'options visibles

Dans le cas d'une sélection unique, il n'y a qu'une seule option qui est visible lorsque la sélection n'est pas déroulée. Dans le cas d'une sélection multiple, seules quatres options seront visibles.

On peut changer cela grâce à un élément <taille> qui va servir à indiquer combien d'options il faudra afficher (Attention: ce n'est pas toujours fonctionnel dans tous les navigateurs. Une taille égale à 1 ne fonctionne pas de manière optimale dans aucun navigateur en cas de sélection multiple).

Dans cet exemple de sélection unique, on affiche 5 options à la fois (le "faites un choix" compte pour une option, et elle est sélectionnée par défaut car elle est la première de la liste).

Exemple
		
<input type="select">
   <nom>destination</nom>
   <libellé>sélectionnez une destination</libellé>
   <choix/>
   <taille>5</taille>
   <option valeur="amsterdam">Amsterdam</option>
   <option valeur="paris">Paris</option>
   <option valeur="berlin">Berlin</option>
   <option valeur="brussels">Bruxelles</option>
   <option valeur="budapest">Budapest</option>
   <option valeur="london">Londres</option>
   <option valeur="madrid">Madrid</option>
   <option valeur="paris">Paris</option>
   <option valeur="roma">Rome</option>
</input>

Sélectionnez une destination:

Le même exemple, mais avec une sélection multiple (le "faites un choix" n'est plus sélectionné par défaut car il n'y a pas de défaut dans le cas d'une sélection multiple).

Exemple
		
<input type="select" multiple="oui">
   <nom>destination</nom>
   <libellé>sélectionnez une destination</libellé>
   <choix/>
   <taille>5</taille>
   <option valeur="amsterdam">Amsterdam</option>
   <option valeur="paris">Paris</option>
   <option valeur="berlin">Berlin</option>
   <option valeur="brussels">Bruxelles</option>
   <option valeur="budapest">Budapest</option>
   <option valeur="london">Londres</option>
   <option valeur="madrid">Madrid</option>
   <option valeur="paris">Paris</option>
   <option valeur="roma">Rome</option>
</input>

Sélectionnez une destination:

Dans cet autre exemple, la sélection est multiple et deux options seront visibles à la fois.

Exemple
<input type="select" multiple="oui">
   <nom>format[]</nom>
   <libellé>format de vos images</libellé>
   <taille>2</taille>
   <option valeur="gif">format GIF</option>
   <option valeur="jpg">format JPG</option>
   <option valeur="png">format PNG</option>
   <option valeur="tiff">format TIFF</option>
   <option valeur="bmp">format BMP</option>
   <option valeur="svg">format SVG</option>
   <option valeur="raw">format RAW</option>
</input>

Format de vos images:

Contrôle de la valeur entrée dans la liste déroulante

Rendre le choix obligatoire

Un élément <obligatoire/> (ou <mandatory/> qui est un synonyme) permet de rendre la sélection dans la liste déroulante obligatoire.

Ce n'est réellement utile que si vous l'utilisez conjointement avec l'élément <choix/>. Dans le cas contraire, il y aura toujours une option sélectionnée par défaut.
Exemple
		
<input type="select">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <choix/>
   <obligatoire/>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Support actuel de vos images:

Dans le cas d'une sélection multiple, au moins une option doit avoit été sélectionnée et autant qu'on veut. Vous pouvez changer cela grâce aux attributs minimum et maximum.
Exemple
		
<input type="select" multiple="oui">
   <nom>destination[]</nom>
   <libellé>sélectionnez deux ou trois destinations</libellé>
   <choix/>
   <obligatoire minimum="2" maximum="3"/>
   <option valeur="amsterdam">Amsterdam</option>
   <option valeur="paris">Paris</option>
   <option valeur="berlin">Berlin</option>
   <option valeur="brussels">Bruxelles</option>
   <option valeur="budapest">Budapest</option>
   <option valeur="london">Londres</option>
   <option valeur="madrid">Madrid</option>
   <option valeur="paris">Paris</option>
   <option valeur="roma">Rome</option>
</input>

Sélectionnez deux ou trois destinations:
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique