Attribut HTML : multiple

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

<datalist id="dwarfemails">
  <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 spécifié, 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. Si l'attribut required est présent, au moins une adresse électronique est requise.

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

Lorsque multiple est défini sur le type de saisie file, l'utilisateur peut sélectionner un ou plusieurs fichiers :

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

Notez la différence d'aspect entre l'exemple avec multiple défini et l'autre entrée file sans.

Lorsque le formulaire est soumis, si nous avions utilisé method="get" le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme ?uploads=img1.jpg&uploads=img2.svg. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire multipart, nous devons utiliser POST. Voir l'élément <form> et l'envoi de données de formulaire pour plus d'informations.

L'attribut multiple 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 <option> 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.

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

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

/* 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 attribut multiple. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches Ctrl, Commande ou Maj enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs 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 curseur Haut et Bas 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 sur Espace , mais le support varie selon les navigateurs.

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut multiple, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».

Définir size="1" sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.

• L'élément <input>
• L'élément <select>
• Autoriser les adresses électroniques multiples