Attribut HTML : multiple

L'attribut booléenmultiple, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisieemail etfile et l'élément<select>, la manière dont l'utilisateur·ice opte pour plusieurs valeurs dépend du contrôle de formulaire.

Exemple interactif

<label for="recipients">Où devrions-nous envoyer le reçu&nbsp;?</label><input name="recipients" type="email" multiple /><label for="shakes">Quels milkshakes aimeriez-vous commander&nbsp;?</label><select 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 name="payment">  <option>Carte de crédit</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 contrôle de formulaire peut avoir une apparence différente si l'attributmultiple est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle<select> avec l'attributmultiple défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entréeemail s'affiche de la même manière, mais correspondra à la pseudo-classe:invalid si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attributmultiple est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle<select> avec l'attributmultiple défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entréeemail s'affiche de la même manière, mais correspondra à la pseudo-classe:invalid si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.

Lorsquemultiple est défini sur le type de saisieemail, l'utilisateur·ice peut inclure zéro (si ce n'est pas égalementrequired), une ou plusieurs adresses électroniques séparées par des virgules.

html

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

Si et seulement si l'attributmultiple est défini, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.

Lorsquemultiple est défini sur le type d'entréefile, l'utilisateur·ice peut sélectionner un ou plusieurs fichiers. L'utilisateur·ice peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la toucheMaj ouCtrl enfoncée, puis en cliquant).

html

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

Lorsque l'attribut est omis, l'utilisateur·ice ne peut sélectionner qu'un seul fichier par<input>.

html

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

Lorsquemultiple est défini, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.

Exemples

Saisie d'adresses électroniques

html

<label for="emails">A qui voulez-vous adresser un courriel&nbsp;?</label><input  type="email"  multiple  name="emails"   list="dwarfemails"  required  size="64" /><datalist>  <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>

css

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

Certains navigateurs prennent en charge l'apparition de lalist d'options de la<datalist> pour les adresses électroniques ultérieures lorsquemultiple est présent. D'autres ne le font pas.

Saisie de fichiers

Lorsquemultiple est défini sur le type de saisiefile, l'utilisateur·ice peut sélectionner un ou plusieurs fichiers :

html

<form method="post" enctype="multipart/form-data">  <p>    <label for="uploads">      Choisissez les images que vous voulez télécharger&nbsp;:    </label>    <input      type="file"           name="uploads"      accept=".jpg, .jpeg, .png, .svg, .gif"      multiple />  </p>  <p>    <label for="text">Choisissez un fichier texte à télécharger&nbsp;:</label>    <input type="file" name="text" accept=".txt" />  </p>  <p>    <input type="submit" value="Soumettre" />  </p></form>

Notez la différence d'aspect entre l'exemple avecmultiple défini et l'autre entréefile sans.

Lorsque le formulaire est soumis, si nous avions utilisémethod="get", chaque nom de fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme?uploads=img1.jpg&uploads=img2.svg. Cependant, comme nous soumettons des données de formulaire multipart, il faut utiliser la méthode post. Voir l'élément<form> et la pageEnvoi de données de formulaire pour plus d'informations.

Saisir plusieurs options

L'attributmultiple de l'élément<select> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément<select> représente un contrôle permettant de sélectionner une seule<select> dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.

html

<form method="get" action="#">  <p>    <label for="dwarfs"      >Sélectionnez les menuisiers que vous aimez&nbsp;:</label    >    <select multiple name="dwarfs">      <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">Sélectionnez votre préféré&nbsp;:</label>    <select name="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>  <p>    <input type="submit" value="Soumettre" />  </p></form>

Notez la différence d'apparence entre les deux contrôles de formulaire.

css

/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. *//*select[multiple] {  height: 1.5em;  vertical-align: top;}select[multiple]:focus,select[multiple]:active {  height: auto;}*/

Il existe plusieurs façons de sélectionner plusieurs options dans un élément<select> avec un attributmultiple. Selon le système d'exploitation, les utilisateur·ice·s de souris peuvent maintenir les touchesCtrl,Commande ouMaj enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateur·ice·s du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément<select>, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseurHaut etBas pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée — les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant surEspace, mais le support varie selon les navigateurs.