Атрибут HTML: multiple

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

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

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

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

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

При установке атрибута multiple для типа ввода file, пользователь может выбрать один или несколько файлов. Пользователь может выбрать несколько файлов из проводника файлов любым способом, допускаемым выбранной платформой (например, удерживая клавишу 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, большинство браузеров отобразят раскрывающийся список со скроллингом вместо одиночной строки выпадающего списка.

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

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

<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> для последующих адресов электронной почты при наличии атрибута multiple. Другие – нет.

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

<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> и отправку данных формы.

Атрибут 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, но поддержка варьируется между браузерами.

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