Attribut HTML : multiple

Exemple interactif

<label for="recipients">O devrions-nous envoyer le reu&nbsp;?</label>
<input id="recipients" name="recipients" type="email" multiple />

<label for="shakes">Quels milkshakes aimeriez-vous commander&nbsp;?</label>
<select id="shakes" name="shakes" multiple>
  <option>Milkshake  la vanille</option>
  <option>Milkshake  la fraise</option>
  <option>Milkshake au chocolat</option>
</select>

<label for="payment">Comment souhaitez-vous payer&nbsp;?</label>
<select id="payment" name="payment">
  <option>Carte de crdit</option>
  <option>Virement bancaire</option>
</select>

label {
  display: block;
  margin-top: 1em;
}

input,
select {
  width: 100%;
}

input:invalid {
  background-color: lightpink;
}

Vue d'ensemble

Selon le type, le contrle de formulaire peut avoir une apparence diffrente si l'attribut multiple est dfini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffre. Dans Firefox, l'entre de fichier indique  Aucun fichier slectionn  lorsque l'attribut est prsent et  Aucun fichier slectionn  dans le cas contraire, lorsqu'aucun fichier n'est slectionn. La plupart des navigateurs affichent une zone de liste droulante pour un contrle <select> avec l'attribut multiple dfini contre une liste droulante une ligne lorsque l'attribut est omis. L'entre email s'affiche de la mme manire, mais correspond la pseudo-classe :invalid si plus d'une adresse lectronique spare par des virgules est incluse en l'absence de l'attribut. Selon le type, le contrle de formulaire peut avoir une apparence diffrente si l'attribut multiple est dfini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffre. Dans Firefox, l'entre de fichier indique  Aucun fichier slectionn  lorsque l'attribut est prsent et  Aucun fichier slectionn  dans le cas contraire, lorsqu'aucun fichier n'est slectionn. La plupart des navigateurs affichent une zone de liste droulante pour un contrle <select> avec l'attribut multiple dfini contre une liste droulante une ligne lorsque l'attribut est omis. L'entre email s'affiche de la mme manire, mais correspond la pseudo-classe :invalid si plus d'une adresse lectronique spare par des virgules est incluse en l'absence de l'attribut.

Lorsque multiple est dfini sur le type de saisie email, l'utilisateurice peut inclure zro (si ce n'est pas galement required), une ou plusieurs adresses lectroniques spares par des virgules.

<input type="email" multiple name="emails" id="emails" />

Si et seulement si l'attribut multiple est dfini, la valeur peut tre une liste d'adresses lectroniques correctement formes et spares par des virgules. Tout espace blanc de queue et de tte est supprim de chaque adresse de la liste.

Lorsque multiple est dfini sur le type d'entre file, l'utilisateurice peut slectionner un ou plusieurs fichiers. L'utilisateurice peut choisir plusieurs fichiers dans le slecteur de fichiers de n'importe quelle manire que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche Maj ou Ctrl enfonce, puis en cliquant).

<input type="file" multiple name="uploads" id="uploads" />

Lorsque l'attribut est omis, l'utilisateurice ne peut slectionner qu'un seul fichier par <input>.

L'attribut multiple de l'lment <select> reprsente un contrle permettant de slectionner zro ou plusieurs options dans la liste d'options. Sinon, l'lment <select> reprsente un contrle permettant de slectionner une seule <select> dans la liste d'options.

<select multiple name="nains" id="nains">
  <option>Grincheux</option>
  <option>Joyeux</option>
  <option>Dormeur</option>
  <option>Timide</option>
  <option>Atchoum</option>
  <option>Simplet</option>
  <option>Doc</option>
</select>

Lorsque multiple est dfini, la plupart des navigateurs affichent une bote de liste dfilante au lieu d'une liste droulante ligne unique.

Les options slectionnes en nombre sont transmises selon la convention de tableau URLSearchParams, c'est--dire name=value1&name=value2.

Problmes d'accessibilit

Fournissez des instructions pour aider les utilisateurices comprendre comment remplir le formulaire et utiliser les diffrents contrles du formulaire. Indiquez les champs obligatoires et facultatifs, les formats de donnes et toute autre information pertinente. Lorsque vous utilisez l'attribut multiple, informez l'utilisateurice que plusieurs valeurs sont autorises et donnez des instructions sur la manire de saisir plusieurs valeurs, par exemple  sparez les adresses e-mail par une virgule. 

Dfinir size="1" sur une liste de slection multiple peut la faire apparatre comme une liste de slection simple dans certains navigateurs, mais elle ne s'tend alors pas lorsque l'utilisateurice y place le curseur, ce qui nuit l'ergonomie. vitez cette pratique. Si vous modifiez l'apparence d'une liste de slection, et mme si vous ne le faites pas, veillez informer l'utilisateurice qu'il est possible de slectionner plusieurs options par un autre moyen.

Exemples

Saisie d'adresses lectroniques

<label for="emails">A qui voulez-vous adresser un courriel&nbsp;?</label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="emails-nains"
  required
  size="64" />

<datalist id="emails-nains">
  <option value="grincheux@menuisiers.fr">Grincheux</option>
  <option value="joyeux@menuisiers.fr">Joyeux</option>
  <option value="dormeur@menuisiers.fr">Dormeur</option>
  <option value="timide@menuisiers.fr">Timide</option>
  <option value="atchoum@menuisiers.fr">Atchoum</option>
  <option value="simplet@menuisiers.fr">Simplet</option>
  <option value="doc@menuisiers.fr">Doc</option>
</datalist>

input:invalid {
  border: red solid 3px;
}

Si et seulement si l'attribut multiple est dfini, la valeur peut tre une liste d'adresses lectroniques correctement formes et spares par des virgules. Tout espace blanc de queue et de tte est supprim de chaque adresse de la liste. Si l'attribut required est prsent, au moins une adresse lectronique est requise.

Certains navigateurs prennent en charge l'apparition de la list d'options de la <datalist> pour les adresses lectroniques ultrieures lorsque multiple est prsent. D'autres ne le font pas.

Saisie de fichiers

Lorsque multiple est dfini sur le type de saisie file, l'utilisateurice peut slectionner un ou plusieurs fichiers :

<p>
  <label for="uploads">
    Choisissez les images que vous voulez tlcharger&nbsp;:
  </label>
  <input
    type="file"
    id="uploads"
    name="uploads"
    accept=".jpg, .jpeg, .png, .svg, .gif"
    multiple />
</p>
<p>
  <label for="text">Choisissez un fichier texte  tlcharger&nbsp;:</label>
  <input type="file" id="text" name="text" accept=".txt" />
</p>

Notez la diffrence d'aspect entre l'exemple avec multiple dfini et l'autre entre file sans.

Si ces champs sont inclus dans un formulaire envoy en utilisant method="get", le nom de chaque fichier slectionn est ajout aux paramtres de l'URL sous la forme ?uploads=img1.jpg&uploads=img2.svg. Pour envoyer les fichiers en tant que donnes de formulaire multipart, utilisez method="post" et enctype="multipart/form-data". Voir l'lment <form> et la page Envoi de donnes de formulaire pour plus d'informations.

Saisir plusieurs options

L'attribut multiple de l'lment <select> reprsente un contrle permettant de slectionner zro ou plusieurs options dans la liste d'options. Sinon, l'lment <select> reprsente un contrle permettant de slectionner une seule <select> dans la liste des options. L'apparence du contrle varie gnralement en fonction de la prsence de l'attribut multiple, la plupart des navigateurs affichant une liste droulante dfilement au lieu d'une liste droulante ligne unique lorsque l'attribut est prsent.

<p>
  <label for="nains">Slectionnez les menuisiers que vous aimez&nbsp;:</label>
  <select multiple name="nains" id="nains">
    <option>grincheux@menuisiers.fr</option>
    <option>joyeux@menuisiers.fr</option>
    <option>dormeur@menuisiers.fr</option>
    <option>timide@menuisiers.fr</option>
    <option>atchoum@menuisiers.fr</option>
    <option>simplet@menuisiers.fr</option>
    <option>doc@menuisiers.fr</option>
  </select>
</p>
<p>
  <label for="favoriteOnly">Slectionnez votre prfr&nbsp;:</label>
  <select name="favoriteOnly" id="favoriteOnly">
    <option>grincheux@menuisiers.fr</option>
    <option>joyeux@menuisiers.fr</option>
    <option>dormeur@menuisiers.fr</option>
    <option>timide@menuisiers.fr</option>
    <option>atchoum@menuisiers.fr</option>
    <option>simplet@menuisiers.fr</option>
    <option>doc@menuisiers.fr</option>
  </select>
</p>

Notez la diffrence d'apparence entre les deux contrles de formulaire.

/* D-commentez ce CSS pour que le slecteur multiple ait la mme hauteur que le simple. */

/*
select[multiple] {
  height: 1.5em;
  vertical-align: top;
}
select[multiple]:focus,
select[multiple]:active {
  height: auto;
}
*/

Il existe plusieurs faons de slectionner plusieurs options dans un lment <select> avec un attribut multiple. Selon le systme d'exploitation, les utilisateurices de souris peuvent maintenir les touches Ctrl, Commande ou Maj enfonces, puis cliquer sur plusieurs options pour les slectionner/dslectionner. Les utilisateurices du clavier peuvent slectionner plusieurs lments contigus en ciblant l'lment <select>, en slectionnant un lment en haut ou en bas de la plage qu'ils souhaitent slectionner l'aide des touches de curseur Haut et Bas pour monter et descendre dans les options. La slection de non-contigus n'est pas aussi bien supporte les lments doivent pouvoir tre slectionns et dslectionns en appuyant sur Espace, mais la prise en charge varie selon les navigateurs.

Spcifications

Compatibilit des navigateurs

html.elements.input.multiple

html.elements.select.multiple

Voir aussi

• L'lment <input>
• L'lment <select>
• Autoriser les adresses lectroniques multiples