HTML 属性：multiple

¥Overview

根据类型的不同，如果设置了 multiple 属性，表单控件可能会具有不同的外观。对于文件输入类型，浏览器提供的原生消息传递有所不同。在 Firefox 中，当属性存在时，文件输入读取 "未选择文件"；当属性不存在时，文件输入读取 "未选择文件"。大多数浏览器会显示带有 multiple 属性集的 <select> 控件的滚动列表框，并在省略该属性时显示单行下拉列表。无论是否包含 multiple 属性，email 输入显示的内容都是相同的，但如果包含多个以逗号分隔的电子邮件地址且不存在该属性，则 email 输入将与 :invalid 伪类匹配。

¥Depending on the type, the form control may have a different appearance if the multiple attribute is set. For the file input type, the native messaging the browser provides differs. In Firefox, the file input reads "No files selected" when the attribute is present and "No file selected" when it is not. Most browsers display a scrolling list box for a <select> control with the multiple attribute set and a single line dropdown when the attribute is omitted. The email input displays the same whether or not the multiple attribute is included, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the attribute is not present.

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

¥When multiple is set on the email input type, the user can include zero (if not also required), one or more comma-separated email addresses.

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

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

¥If and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list.

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

¥When multiple is set on the file input type, the user can select one or more files. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking).

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

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

¥When the attribute is omitted, the user can only select a single file per <input>.

<select> 元素上的 multiple 属性表示用于从选项列表中选择零个或多个选项的控件。否则，<select> 元素表示用于从选项列表中选择单个 <option> 的控件。

¥The multiple attribute on the <select> element represents a control for selecting zero or more options from the list of options. Otherwise, the <select> element represents a control for selecting a single <option> from the list of options.

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

¥When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.

¥Accessibility concerns

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

¥Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma."

在多选上设置 size="1" 可以使其在某些浏览器中显示为单选，但随后它不会扩展焦点，从而损害可用性。不要那样做。如果你确实更改了选择的外观，即使你没有这样做，也要确保通知用户可以通过另一种方法选择多个选项。

¥Setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming usability. Don't do that. If you do change the appearance of a select, and even if you don't, make sure to inform the user that more than one option can be selected by another method.

¥Examples

¥email input

<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 属性，则至少需要一个电子邮件地址。

¥If and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list. If the required attribute is present, at least one email address is required.

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

¥Some browsers support the appearance of the list of options from the associated <datalist> for subsequent email addresses when multiple is present. Others do not.

¥file input

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

¥When multiple is set on the file input type, the user can select one or more files:

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

¥Note the difference in appearance between the example with multiple set and the other file input without.

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

¥When the form is submitted, had we used method="get" each selected file's name would have been added to URL parameters as?uploads=img1.jpg&uploads=img2.svg. However, since we are submitting multipart form data, we must use post. See the <form> element and sending form data for more information.

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

¥The multiple attribute on the <select> element represents a control for selecting zero or more options from the list of options. Otherwise, the <select> element represents a control for selecting a single <option> from the list of options. The control generally has a different appearance based on the presence of the multiple attribute, with most browsers displaying a scrolling list box instead of a single line dropdown when the attribute is present.

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

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

¥Note the difference in appearance between the two form controls.

/* 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 选择和取消选择项目，但支持情况因浏览器而异。

¥There are a few ways to select multiple options in a <select> element with a multiple attribute. Depending on the operating system, mouse users can hold the Ctrl, Command, or Shift keys and then click multiple options to select/deselect them. Keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of the range they want to select using the Up and Down cursor keys to go up and down the options. The selection of non-contiguous is not as well-supported: items should be able to be selected and deselected by pressing Space, but support varies between browsers.

¥See also

• <input>
• <select>
• 允许多个电子邮件地址