HTML 属性：multiple

试一试

<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 属性，表单控件的外观可能会因类型而异。对于文件输入类型，浏览器提供的原生消息有所不同。在 Firefox 中，当此属性存在时，文件输入显示为“未选择文件”，而当此属性不存在时，则显示为“未选择文件”（译者注：原文此处有误，应为单数）。大多数浏览器会为设置了 multiple 属性的 <select> 控件显示一个滚动列表框，而当该属性省略时，则显示一个单行下拉列表。email 输入无论是否包含 multiple 属性，显示方式都相同，但如果包含多个用逗号分隔的电子邮件地址而未设置该属性，它将匹配 :invalid 伪类。

当在 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> 的控件。

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 时，大多数浏览器会显示一个滚动列表框，而不是单行下拉列表。

多个选定的选项使用 URLSearchParams 数组约定提交，即 name=value1&name=value2。

可访问性考虑

提供说明以帮助用户了解如何完成表单和使用单个表单控件。指出任何必填和可选输入、数据格式以及其他相关信息。使用 multiple 属性时，告知用户允许使用多个值，并提供有关如何提供多个值的说明，例如“用逗号分隔电子邮件地址”。

在多选框上设置 size="1" 可能会在某些浏览器中使其看起来像单选框，但随后它不会在聚焦时展开，从而损害可用性。不要这样做。如果你确实更改了选择框的外观，即使你不更改，也要确保通过其他方法告知用户可以选择多个选项。

示例

电子邮件输入

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="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;
}

当且仅当指定了 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 的示例与未设置的 file 输入之间的外观差异。

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

select

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

html

<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>

请注意两个表单控件之间的外观差异。

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> 元素上，然后使用 向上 和 向下 光标键选择要选择范围的顶部或底部的项目，从而选择多个连续的项目。非连续项目的选择支持不那么好：项目应该能够通过按 空格键 进行选择和取消选择，但支持因浏览器而异。

规范

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

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者最后修改于 2025 年 7 月 24 日。

在 GitHub 上查看此页面 • 报告此内容的问题

试一试

概述

可访问性考虑

示例

电子邮件输入

文件输入

select

规范

浏览器兼容性

html.elements.input.multiple

html.elements.select.multiple

另见

帮助改进 MDN