multiple атрибут HTML

Булев атрибут multiple, если он установлен, означает, что элемент управления формы принимает одно или несколько значений. Атрибут применим к типам полей ввода email и file, а также к элементу <select>. Способ, которым пользователь указывает несколько значений, зависит от элемента управления формой.

Попробуйте

<label for="recipients">Where should we send the receipt?</label>
<input id="recipients" name="recipients" type="email" multiple />

<label for="shakes">Which shakes would you like to order?</label>
<select id="shakes" 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 id="payment" 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;
}

Общие сведения

В зависимости от типа внешний вид элемента управления формой может измениться, если установлен атрибут multiple. Для поля ввода типа file меняется текст сообщения, отображаемого браузером. В Firefox в поле ввода файла отображается «Файлы не выбраны», если атрибут присутствует, и «Файл не выбран», если он отсутствует. В большинстве браузеров для элемента управления <select> с установленным атрибутом multiple отображается список с прокруткой, а без атрибута — однострочный раскрывающийся список. Поле ввода email выглядит одинаково независимо от того, указан ли атрибут multiple, но соответствует псевдоклассу :invalid, если атрибут отсутствует и введено несколько адресов электронной почты, разделённых запятыми.

Если для поля ввода типа email установлен атрибут multiple, пользователь может указать ноль (если также не установлен атрибут required), один или несколько адресов электронной почты, разделённых запятыми.

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

Только если указан атрибут multiple, значение может представлять собой список правильно оформленных адресов электронной почты, разделённых запятыми. Начальные и конечные пробелы в каждом адресе списка удаляются.

Если для поля ввода типа file установлен атрибут multiple, пользователь может выбрать один или несколько файлов. Пользователь может выбрать несколько файлов в диалоговом окне выбора файлов любым способом, который поддерживает его платформа (например, удерживая клавишу Shift или Control и нажимая на файлы).

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

Если атрибут отсутствует, пользователь может выбрать только один файл для каждого <input>.

Атрибут multiple элемента <select> обозначает элемент управления для выбора нуля или нескольких вариантов из списка. В противном случае элемент <select> обозначает элемент управления для выбора одного <option> из списка.

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

Если указан атрибут multiple, в большинстве браузеров вместо однострочного раскрывающегося списка отображается список с прокруткой.

Несколько выбранных вариантов отправляются с использованием соглашения о массивах URLSearchParams, то есть name=value1&name=value2.

Особенности доступности

Предоставляйте инструкции, которые помогут пользователям понять, как заполнить форму и использовать отдельные элементы управления. Указывайте, какие поля обязательны и какие необязательны, форматы данных и другую важную информацию. При использовании атрибута multiple сообщите пользователю, что можно указать несколько значений, и объясните, как это сделать, например: «Разделите адреса электронной почты запятыми».

Установка атрибута size="1" для списка с множественным выбором может привести к тому, что в некоторых браузерах он будет выглядеть как список с одиночным выбором, но при этом не будет раскрываться при получении фокуса, что ухудшает удобство использования. Не делайте этого. Если вы меняете внешний вид списка или даже если оставляете его без изменений, обязательно сообщите пользователю другим способом, что можно выбрать несколько вариантов.

Примеры

Поле ввода email

<label for="emails">Who do you want to email?</label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <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>

Только если указан атрибут multiple, значение может представлять собой список правильно оформленных адресов электронной почты, разделённых запятыми. Начальные и конечные пробелы в каждом адресе списка удаляются. Если присутствует атрибут required, необходимо указать хотя бы один адрес электронной почты.

Некоторые браузеры поддерживают отображение вариантов из связанного элемента <datalist> для последующих адресов электронной почты, как в list, если присутствует атрибут multiple. Другие браузеры этого не поддерживают.

Поле ввода file

Если для поля ввода типа file установлен атрибут multiple, пользователь может выбрать один или несколько файлов:

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

Обратите внимание на разницу во внешнем виде примера с установленным атрибутом multiple и другого поля ввода file без него.

При отправке формы, если бы мы использовали method="get", имена выбранных файлов были бы добавлены к параметрам URL в виде ?uploads=img1.jpg&uploads=img2.svg. Однако, поскольку мы отправляем данные формы в формате multipart, необходимо использовать метод post. Дополнительную информацию см. в описании элемента <form> и в разделе отправка данных формы.

Элемент select

Атрибут multiple элемента <select> обозначает элемент управления для выбора нуля или нескольких вариантов из списка. В противном случае элемент <select> обозначает элемент управления для выбора одного <option> из списка. Внешний вид элемента управления обычно зависит от наличия атрибута multiple: если атрибут указан, в большинстве браузеров вместо однострочного раскрывающегося списка отображается список с прокруткой.

<form method="get" action="#">
  <p>
    <label for="dwarfs">Select the dwarf woodsman you like:</label>
    <select multiple name="dwarfs" id="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" id="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>

Обратите внимание на разницу во внешнем виде этих двух элементов управления формы.

/* 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;
}
*/

Выбрать несколько вариантов в элементе <select> с атрибутом multiple можно несколькими способами. В зависимости от операционной системы пользователи мыши могут удерживать клавиши Ctrl, Command или Shift, а затем нажимать на несколько вариантов, чтобы выбрать или отменить выбор. Пользователи клавиатуры могут выбрать несколько расположенных подряд элементов: для этого нужно перейти к элементу <select>, выбрать верхний или нижний элемент нужного диапазона и перемещаться по вариантам с помощью клавиш со стрелками Up и Down. Выбор расположенных не подряд элементов поддерживается не так хорошо: элементы должны выбираться и отменять выбор нажатием клавиши Space, однако поддержка этой функции различается в разных браузерах.

Спецификации

Совместимость с браузерами

html.elements.input.multiple

html.elements.select.multiple

См. также

• <input>
• <select>
• Разрешение указывать несколько адресов электронной почты