HTML
Commandes du menu de sélection

Syntaxe

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Sélectionnez le menu

L'élément <select> génère un menu déroulant à partir duquel l'utilisateur peut choisir une option.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Changer la taille

Vous pouvez modifier la taille du menu de sélection avec l'attribut size . Une taille de 0 ou 1 affiche le menu de style déroulant standard. Une taille supérieure à 1 convertira la liste déroulante en une boîte affichant autant de lignes, avec une option par ligne et une barre de défilement afin de faire défiler les options disponibles.

<select name="" size="4"></select>

Menus de sélection multi-options

Par défaut, les utilisateurs ne peuvent sélectionner qu'une seule option. L'ajout de l'attribut multiple permet aux utilisateurs de sélectionner plusieurs options à la fois et de soumettre toutes les options sélectionnées au formulaire. L'utilisation de l'attribut multiple convertit automatiquement le menu déroulant en une zone comme si sa taille était définie. La taille par défaut lorsque cela se produit est déterminée par le navigateur que vous utilisez, et il est impossible de la rétablir dans un menu de style déroulant tout en autorisant plusieurs sélections.

<select name="" multiple></select>

Lorsque vous utilisez l'attribut multiple , il existe une différence entre 0 et 1 pour la taille, alors qu'aucune différence n'existe lorsque vous n'utilisez pas l'attribut. Si vous utilisez 0, le navigateur se comportera de la manière programmée par défaut. L'utilisation de 1 définit explicitement la taille de la boîte résultante sur une seule ligne de haut.

Groupes d'options

Vous pouvez facilement regrouper vos options dans un menu de sélection afin de fournir une mise en page plus structurée dans une longue liste d'options à l'aide de l'élément <optgroup> .

La syntaxe est très simple, en utilisant simplement l'élément avec un attribut label pour identifier le titre du groupe et en contenant zéro ou plusieurs options qui doivent figurer dans ce groupe.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Lorsque vous utilisez des groupes d'options, toutes les options ne doivent pas être contenues dans un groupe. De même, la désactivation d'un groupe d'options désactivera toutes les options du groupe et il n'est pas possible de réactiver manuellement une seule option dans un groupe désactivé.

Les options

Les options à l'intérieur d'un menu de sélection correspondent à la sélection de l'utilisateur. La syntaxe normale d'une option est la suivante:

<option>Some Option</option>

Cependant, il est important de noter que le texte à l'intérieur de l'élément <option> lui-même n'est pas toujours utilisé et devient essentiellement la valeur par défaut des attributs qui ne sont pas spécifiés.

Les attributs qui contrôlent l'apparence et la fonction de l'option sont value et label . L'étiquette représente le texte qui sera affiché dans le menu déroulant (ce que vous regardez et cliquez sur pour le sélectionner). La valeur représente le texte qui sera envoyé avec l'envoi du formulaire. Si l'une de ces valeurs est omise, elle utilise le texte à l'intérieur de l'élément à la place. Ainsi, l'exemple que nous avons donné ci-dessus pourrait être "élargi" à ceci:

<option label="Some Option" value="Some Option">

Notez l'omission du texte interne et de la balise de fin, qui ne sont pas nécessaires pour créer une option dans le menu. S'ils étaient inclus, le texte intérieur serait ignoré car les deux attributs sont déjà spécifiés et le texte n'est pas nécessaire. Cependant, vous ne verrez probablement pas beaucoup de gens les écrire de cette façon. La façon la plus courante d'écrire est d'utiliser une valeur qui sera envoyée au serveur, avec le texte intérieur qui deviendra éventuellement l'attribut label, comme ceci:

<option value="option1">Some Option</option>

Sélection d'une option par défaut

Vous pouvez également spécifier une certaine option à sélectionner dans le menu par défaut en lui associant l'attribut selected . Par défaut, si aucune option n'est spécifiée dans le menu, la première option du menu sera sélectionnée lors du rendu. Si l'attribut selected associé à plusieurs options, la dernière option présente dans le menu avec l'attribut sera celle sélectionnée par défaut.

<option value="option1" selected>Some option</option>

Si vous utilisez l'attribut dans un menu de sélection multi-options, toutes les options avec l'attribut seront sélectionnées par défaut et aucune ne sera sélectionnée si aucune option ne possède l'attribut.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datalist

La <datalist> spécifie une liste d'options prédéfinies pour un élément <input> . Il fournit une fonctionnalité "autocomplete" sur <input> éléments <input> . Les utilisateurs verront une liste déroulante d'options à mesure qu'ils écrivent.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

Prise en charge du navigateur