HTML 属性：multiple

布尔型 **multiple** 属性，如果设置，表示表单控件接受一个或多个值。适用于 email 和 file 输入类型以及 <select>，用户选择多个值的方式取决于表单控件。

根据类型，如果设置了 multiple 属性，表单控件的外观可能会有所不同。对于文件输入类型，浏览器提供的本机消息会有所不同。在 Firefox 中，如果存在该属性，文件输入将显示“未选择文件”，如果不存在该属性，则显示“未选择文件”。大多数浏览器会为设置了 multiple 属性的 <select> 控件显示一个滚动列表框，而如果没有该属性，则显示一个单行下拉菜单。如果未设置该属性，而 email 输入包含多个逗号分隔的电子邮件地址，则 :invalid 伪类将匹配，而无论是否包含 multiple 属性，电子邮件输入的显示方式都相同。

在 email 输入类型上设置 multiple 时，用户可以包含零个（如果未设置 required）、一个或多个逗号分隔的电子邮件地址。

html

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

当且仅当指定了 multiple 属性时，该值可以是格式正确的逗号分隔的电子邮件地址列表。列表中每个地址的尾随空格和前导空格都会被删除。

在 file 输入类型上设置 multiple 时，用户可以选择一个或多个文件。用户可以使用所选平台允许的任何方式（例如，按住 Shift 或 Control 键，然后单击）从文件选择器中选择多个文件。

html

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

如果省略该属性，用户每个 <input> 只能选择一个文件。

<select> 元素上的 multiple 属性表示一个控件，用于从选项列表中选择零个或多个选项。否则，<select> 元素表示一个控件，用于从选项列表中选择一个 <option>。该控件通常根据是否具有 multiple 属性具有不同的外观，当存在该属性时，大多数浏览器会显示一个滚动列表框，而不是单行下拉菜单。

html

<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 的外观，即使您没有更改，也要确保告知用户可以通过其他方法选择多个选项。

示例

电子邮件输入

html

<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="[email protected]">Grumpy</option>
  <option value="[email protected]">Happy</option>
  <option value="[email protected]">Sleepy</option>
  <option value="[email protected]">Bashful</option>
  <option value="[email protected]">Sneezy</option>
  <option value="[email protected]">Dopey</option>
  <option value="[email protected]">Doc</option>
</datalist>

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

当且仅当指定了 multiple 属性时，该值可以是格式正确的逗号分隔的电子邮件地址列表。列表中每个地址的尾随空格和前导空格都会被删除。如果存在 required 属性，则至少需要一个电子邮件地址。

当 multiple 存在时，某些浏览器支持从关联的 <datalist> 显示后续电子邮件地址的选项 list 的外观。其他浏览器则不支持。

文件输入

在 file 输入类型上设置 multiple 时，用户可以选择一个或多个文件

html

<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 的示例与没有 multiple 的其他 file 输入之间的外观差异。

在提交表单时，如果我们使用 method="get"，每个选定文件的名称都将作为 URL 参数添加到 URL 参数中，例如 ?uploads=img1.jpg&uploads=img2.svg。但是，由于我们正在提交多部分表单数据，因此必须使用 post。有关更多信息，请参阅 <form> 元素和发送表单数据。

选择

html

<form method="get" action="#">
  <p>
    <label for="dwarfs">Select the dwarf woodsman you like:</label>
    <select multiple name="dwarfs" id="dwarfs">
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
    </select>
  </p>
  <p>
    <label for="favoriteOnly">Select your favorite:</label>
    <select name="favoriteOnly" id="favoriteOnly">
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
      <option>[email protected]</option>
    </select>
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

注意这两种表单控件的外观差异。

css

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

有几种方法可以在带有multiple属性的<select>元素中选择多个选项。根据操作系统的不同，鼠标用户可以按住Ctrl、Command或Shift键，然后单击多个选项来选择或取消选择它们。键盘用户可以通过将焦点放在<select>元素上，使用Up和Down光标键上下移动选项来选择要选择的范围顶部或底部的项目，从而选择多个连续的项目。对非连续项目的支持并不那么好：应该能够通过按Space键来选择和取消选择项目，但浏览器之间的支持各不相同。

规范

规范
HTML 标准 # attr-input-multiple
HTML 标准 # attr-select-multiple

HTML 属性：multiple

试试看

概述

无障碍性问题

示例

电子邮件输入

文件输入

选择

规范

浏览器兼容性

html.elements.input.multiple

html.elements.select.multiple

另请参阅