Атрибут multiple тега <input> — вибір кількох значень

Атрибут multiple - це бінарний атрибут.

Коли він присутній, то вказує, що користувач може ввести більше одного значення в елементі <input>.

правити

Загальний опис

правити

Порада

Для <input type="file"> щоб вибрати декілька файлів, утримуйте клавішу CTRL або SHIFT при виборі. Якщо атрибут multiple відсутній, то ви зможете вибрати тільки один файл, незалежно від того затиснутий у вас Shift, або Ctrl.

автор: с3с правити

Нотатка

У XHTML короткий запис атрибутів заборонено, тому атрибут multiple повинен бути визначений як <input multiple="multiple" />.

автор: с3с правити

Нотатка

Багаторазовий атрибут працює з наступними типами входів: email та file.

автор: с3с правити

Нотатка

При використанні двох і більше поштових адрес вони повинні перераховуватися через кому. Якщо атрибут multiple відсутній, то браузер виведе повідомлення, що поле не може містити символ "," (кома).

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<input multiple>

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	3.6	4	≤12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<form> 
  <p>З використанням атрибута <code>multiple</code></p>
  <p>Виберіть декілька файлів:</p>
			<input type = "file" name = "files" multiple> <br><br>
			<input type = "email" name = "emails" multiple>
			<input type = "submit" value = "Надіслати"> 
		</form>
<br>
<form> 
  <p>Без використання атрибута <code>multiple</code></p>
  <p>Виберіть декілька файлів:</p>
			<input type = "file" name = "files"> <br><br>
			<input type = "email" name = "emails">
			<input type = "submit" value = "Надіслати"> 
		</form>

<form>
    <p><label for="a">type="email" multiple — дві адреси через кому</label></p>
    <input id="a" type="email" multiple value="[email protected], [email protected]">

    <p><label for="b">те саме значення, але без multiple — помилка формату</label></p>
    <input id="b" type="email" value="[email protected], [email protected]">

    <p><label for="c">multiple є, але кома зайва — хибне все поле</label></p>
    <input id="c" type="email" multiple value="[email protected], , [email protected]">

    <p><label for="d">пробіли навколо ком дозволені й обрізаються</label></p>
    <input id="d" type="email" multiple value="   [email protected] ,  [email protected]  ">

    <p><label for="e">type="text" multiple — атрибут не діє, значення завжди одне</label></p>
    <input id="e" type="text" multiple value="taras, olena">

    <p><label for="f">type="file" multiple — тут атрибут працює по-справжньому</label></p>
    <input id="f" type="file" multiple accept="image/*">
</form>

p {
    margin: 18px 0 4px;
    max-width: 560px;
}

label {
    font-weight: 600;
}

input {
    min-width: 340px;
    padding: 6px 8px;
    font: 15px/1.4 ui-monospace, monospace;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

input[type="email"]:valid {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

input[type="email"]:invalid {
    border-color: #d64545;
    background: #fff4f4;
}