Das booleschemultiple Attribut, wenn gesetzt, bedeutet, dass das Formularelement ein oder mehrere Werte akzeptiert. Das Attribut ist gültig für dieemail- undfile-Eingabetypen sowie für das<select>. Die Art und Weise, wie der Benutzer mehrere Werte auswählt, hängt vom Formularelement ab.

Probieren Sie es aus

<label for="recipients">Where should we send the receipt?</label><input name="recipients" type="email" multiple /><label for="shakes">Which shakes would you like to order?</label><select name="shakes" multiple>  <option>Vanilla Shake</option>  <option>Strawberry Shake</option>  <option>Chocolate Shake</option></select><label for="payment">How would you like to pay?</label><select name="payment">  <option>Credit card</option>  <option>Bank Transfer</option></select>

label {  display: block;  margin-top: 1em;}input,select {  width: 100%;}input:invalid {  background-color: lightpink;}

Überblick

Je nach Typ kann das Formularelement ein anderes Aussehen haben, wenn dasmultiple-Attribut gesetzt ist. Für den Datei-Eingabetyp unterscheidet sich die native Anzeige, die der Browser bereitstellt. In Firefox liest der Datei-Eingabetyp "Keine Dateien ausgewählt", wenn das Attribut vorhanden ist, und "Keine Datei ausgewählt", wenn es nicht vorhanden ist. Die meisten Browser zeigen eine scrollbare Liste für ein<select>-Element mit gesetztemmultiple-Attribut an und einen einfachen Dropdown, wenn das Attribut weggelassen wird. Dasemail-Element zeigt dasselbe an, unabhängig davon, ob dasmultiple-Attribut enthalten ist oder nicht, wird jedoch der:invalid Pseudo-Klasse entsprechen, wenn mehr als eine durch Kommas getrennte E-Mail-Adresse enthalten ist, wenn das Attribut nicht vorhanden ist.

Wenn dasmultiple-Attribut auf dememail-Eingabetyp gesetzt ist, kann der Benutzer null (wenn nicht auchrequired), eine oder mehrere durch Kommas getrennte E-Mail-Adressen eingeben.

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

Nur wenn dasmultiple-Attribut angegeben ist, kann der Wert eine Liste von korrekt formatierten, durch Kommas getrennten E-Mail-Adressen sein. Jeglicher führende und nachfolgende Leerraum wird aus jeder Adresse in der Liste entfernt.

Wenn dasmultiple-Attribut auf demfile-Eingabetyp gesetzt ist, kann der Benutzer eine oder mehrere Dateien auswählen. Der Benutzer kann mehrere Dateien aus dem Dateiauswahlmenü auf jede von der ausgewählten Plattform erlaubte Weise wählen (z.B. durch Halten derShift- oderSteuerung-Taste und anschließendes Klicken).

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

Wenn das Attribut weggelassen wird, kann der Benutzer nur eine einzelne Datei pro<input> auswählen.

Dasmultiple-Attribut auf dem<select>-Element stellt eine Steuerung zum Auswählen von null oder mehr Optionen aus der Liste der Optionen dar. Andernfalls stellt das<select>-Element eine Steuerung zum Auswählen einer einzigen<option> aus der Liste der Optionen dar.

<select multiple name="dwarfs">  <option>Grumpy</option>  <option>Happy</option>  <option>Sleepy</option>  <option>Bashful</option>  <option>Sneezy</option>  <option>Dopey</option>  <option>Doc</option></select>

Wennmultiple angegeben ist, zeigen die meisten Browser eine scrollbare Liste anstelle eines einzeiligen Dropdowns an.

Mehrfach ausgewählte Optionen werden unter Verwendung derURLSearchParams Array-Konvention, d.h.name=value1&name=value2, übermittelt.

Barrierefreiheit

Geben Sie Anweisungen, die den Benutzern helfen zu verstehen, wie sie das Formular ausfüllen und die einzelnen Formularelemente verwenden können. Weisen Sie auf benötigte und optionale Eingaben, Datenformate und andere relevante Informationen hin. Wenn dasmultiple-Attribut verwendet wird, informieren Sie den Benutzer, dass mehrere Werte erlaubt sind, und geben Sie Anweisungen, wie mehrere Werte eingegeben werden können, zum Beispiel: "Trennen Sie E-Mail-Adressen mit einem Komma".

Das Festlegen vonsize="1" auf einem Mehrfachauswahl kann es in einigen Browsern wie eine Einzelauswahl aussehen lassen, aber dann wird es nicht bei Fokussierung erweitert, was die Benutzerfreundlichkeit beeinträchtigt. Tun Sie das nicht. Wenn Sie das Aussehen einer Auswahl ändern oder auch nicht, stellen Sie sicher, dass der Benutzer weiß, dass mehr als eine Option ausgewählt werden kann, indem eine andere Methode verwendet wird.

Beispiele

E-Mail-Eingabe

<label for="emails">Who do you want to email?</label><input  type="email"  multiple  name="emails"   list="dwarf-emails"  required  size="64" /><datalist>  <option value="grumpy@woodworkers.com">Grumpy</option>  <option value="happy@woodworkers.com">Happy</option>  <option value="sleepy@woodworkers.com">Sleepy</option>  <option value="bashful@woodworkers.com">Bashful</option>  <option value="sneezy@woodworkers.com">Sneezy</option>  <option value="dopey@woodworkers.com">Dopey</option>  <option value="doc@woodworkers.com">Doc</option></datalist>

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

Nur wenn dasmultiple-Attribut angegeben ist, kann der Wert eine Liste von korrekt formatierten, durch Kommas getrennten E-Mail-Adressen sein. Jeglicher führende und nachfolgende Leerraum wird aus jeder Adresse in der Liste entfernt. Wenn dasrequired-Attribut vorhanden ist, wird mindestens eine E-Mail-Adresse benötigt.

Einige Browser unterstützen das Erscheinungsbild derlist von Optionen aus der zugehörigen<datalist> für nachfolgende E-Mail-Adressen, wennmultiple vorhanden ist. Andere nicht.

Datei-Eingabe

Wenn dasmultiple-Attribut auf demfile-Eingabetyp gesetzt ist, kann der Benutzer eine oder mehrere Dateien auswählen:

<form method="post" enctype="multipart/form-data">  <p>    <label for="uploads"> Choose the images you want to upload: </label>    <input      type="file"           name="uploads"      accept=".jpg, .jpeg, .png, .svg, .gif"      multiple />  </p>  <p>    <label for="text">Pick a text file to upload: </label>    <input type="file" name="text" accept=".txt" />  </p>  <p>    <input type="submit" value="Submit" />  </p></form>

Beachten Sie den Unterschied im Aussehen zwischen dem Beispiel mit gesetztemmultiple und dem anderen Datei-Input ohne.

Wenn das Formular übermittelt wird, hätten wirmethod="get" verwendet, wäre jeder ausgewählte Dateiname den URL-Parametern als?uploads=img1.jpg&uploads=img2.svg hinzugefügt worden. Da wir jedoch Multipart-Formulardaten übermitteln, müssen wirpost verwenden. Weitere Informationen finden Sie im<form>-Element undSenden von Formulardaten.

Auswahl

Dasmultiple-Attribut auf dem<select>-Element stellt eine Steuerung zum Auswählen von null oder mehr Optionen aus der Liste der Optionen dar. Andernfalls stellt das<select>-Element eine Steuerung zum Auswählen einer einzigen<option> aus der Liste der Optionen dar. Die Steuerung hat normalerweise ein anderes Erscheinungsbild basierend auf dem Vorhandensein desmultiple-Attributs, wobei die meisten Browser eine scrollbare Liste anstelle eines einzeiligen Dropdown-Menüs anzeigen, wenn das Attribut vorhanden ist.

<form method="get" action="#">  <p>    <label for="dwarfs">Select the dwarf woodsman you like:</label>    <select multiple name="dwarfs">      <option>grumpy@woodworkers.com</option>      <option>happy@woodworkers.com</option>      <option>sleepy@woodworkers.com</option>      <option>bashful@woodworkers.com</option>      <option>sneezy@woodworkers.com</option>      <option>dopey@woodworkers.com</option>      <option>doc@woodworkers.com</option>    </select>  </p>  <p>    <label for="favoriteOnly">Select your favorite:</label>    <select name="favoriteOnly">      <option>grumpy@woodworkers.com</option>      <option>happy@woodworkers.com</option>      <option>sleepy@woodworkers.com</option>      <option>bashful@woodworkers.com</option>      <option>sneezy@woodworkers.com</option>      <option>dopey@woodworkers.com</option>      <option>doc@woodworkers.com</option>    </select>  </p>  <p>    <input type="submit" value="Submit" />  </p></form>

Beachten Sie den Unterschied im Aussehen zwischen den beiden Formularelementen.

/* uncomment this CSS to make the multiple the same height as the single *//*select[multiple] {  height: 1.5em;  vertical-align: top;}select[multiple]:focus,select[multiple]:active {  height: auto;}*/

Es gibt einige Möglichkeiten, mehrere Optionen in einem<select>-Element mit einemmultiple-Attribut auszuwählen. Je nach Betriebssystem können Mausbenutzer dieStrg,Befehl oderShift-Tasten halten und dann mehrere Optionen durch Klicken auswählen/abwählen. Tastaturbenutzer können mehrere zusammenhängende Elemente auswählen, indem sie das<select>-Element fokussieren, ein Element am oberen oder unteren Ende des Bereichs, den sie auswählen möchten, auswählen und dieAuf- undAb-Pfeiltasten verwenden, um die Optionen nach oben und unten zu bewegen. Die Auswahl von nicht zusammenhängenden Elementen wird weniger gut unterstützt: Elemente sollten durch Drücken vonLeertaste ausgewählt und abgewählt werden können, aber die Unterstützung variiert zwischen den Browsern.

Spezifikationen

Browser-Kompatibilität

html.elements.input.multiple

html.elements.select.multiple

Siehe auch

• <input>
• <select>
• Erlauben mehrerer E-Mail-Adressen