diff --git a/files/zh-cn/web/html/attributes/multiple/index.md b/files/zh-cn/web/html/attributes/multiple/index.md new file mode 100644 index 00000000000000..b874b685c77443 --- /dev/null +++ b/files/zh-cn/web/html/attributes/multiple/index.md @@ -0,0 +1,188 @@ +--- +title: HTML 属性:multiple +slug: Web/HTML/Attributes/multiple +l10n: + sourceCommit: a242996610e5a3335fcd0c5ee3c84d5543b9b8dd +--- + +{{HTMLSidebar}} + +如果设置了布尔属性 **`multiple`**,则意味着表单控件将接受一个及以上的值。该属性对 {{HTMLElement("input/email", "email")}} 和 {{HTMLElement("input/file", "file")}} 输入类型以及 {{HTMLElement("select")}} 元素有效。用户选择多个值的方式取决于表单控件。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-multiple.html", "tabbed-standard")}} + +## 概述 + +根据类型的不同,如果设置了 `multiple` 属性,表单控件可能会有不同的外观。对于文件输入类型,浏览器提供的本地信息也不同。在 Firefox 中,当属性存在时,文件输入会显示“未选择文件”,而当属性不存在时,则会显示“未选择文件”。大多数浏览器都会在设置了 `multiple` 属性的情况下为 {{HTMLElement("select")}} 控件显示滚动列表框,而在省略该属性时则显示单行下拉菜单。无论是否包含 `multiple` 属性,{{HTMLElement("input/email", "email")}} 输入的显示效果都是一样的,但如果不包含该属性,则在包含一个以上逗号分隔的电子邮件地址时会匹配 {{cssxref(':invalid')}} 伪类。 + +当 {{HTMLElement("input/email", "email")}} 输入类型设置了 `multiple` 时,用户可以输入零个(如果没有设置 [`required`](/zh-CN/docs/Web/HTML/Attributes/required) 属性)、一个或多个逗号分隔的电子邮件地址。 + +```html + +``` + +当且仅当指定了 `multiple` 属性时,该值可以是一串格式正确的逗号分隔电子邮件地址。列表中每个地址的前导和后随空白字符都会被删除。 + +当 {{HTMLElement("input/file", "file")}} 输入类型设置了 `multiple` 属性时,用户可选择一个或多个文件。用户可以在所选平台允许的任何方式下,从文件选择器中选择多个文件(如按下 ShiftControl 键,然后单击一个文件)。 + +```html + +``` + +如果省略了该属性,在每个 `` 上用户只能选择一个文件。 + +{{HTMLElement("select")}} 元素上的 `multiple` 属性表示从选项列表中选择零个或多个选项的控件。若不存在该属性,{{HTMLElement("select")}} 元素表示从选项列表中选择一个 {{HTMLElement("option")}} 的控件。 + + +``` + +当指定了 `multiple` 时,大多数浏览器会显示一个滚动的列表框,而不是单行下拉菜单。 + +## 无障碍考虑 + +提供说明,帮助用户了解如何填写表格和使用各个表格控件。说明任何必填和选填内容、数据格式以及其他相关信息。使用 `multiple` 属性时,应告知用户允许使用多个值,并提供如何提供多个值的说明,例如“用逗号分隔电子邮件地址”。 + +在多选区上设置 `size="1"` 可以使其在某些浏览器中显示为单选框,但这样它就不会在聚焦时展开,从而损害了可用性。不要这样做。如果确实改变了选择项的外观(甚至根本没有这样做时),也要确保告知用户可以通过另一种方法选择多个选项。 + +## 示例 + +### email 输入 + +```html + + + + + + + + + + + +``` + +```css hidden +input:invalid { + border: red solid 3px; +} +``` + +当且仅当指定了 `multiple` 属性时,值可以是以逗号分隔的邮件地址列表,其中每个地址的前导和后随空白字符都会被删除。如果 [`required`](/zh-CN/docs/Web/HTML/Attributes/required) 属性存在,至少需要一个邮件地址。 + +当 `multiple` 属性存在时,某些浏览器支持为后续电子邮件地址显示相关的 {{htmlelement('datalist')}} 中选项的 [`list`](/zh-CN/docs/Web/HTML/Element/input#list),而其他浏览器不支持。 + +{{EmbedLiveSample("email 输入", 600, 80)}} + +### file 输入 + +如果在 {{HTMLElement("input/file", "file")}} 输入类型上设置了 `multiple`,用户就可以选择一个或多个文件: + +```html +
+

+ +

+

+ +

+

+ +

+
+``` + +{{EmbedLiveSample("file 输入", 600, 80) }} + +请注意设置了 `multiple` 的示例与未设置 `file` 的其他输入在外观上的区别。 + +提交表单时,如果我们使用 [`method="get"`](/zh-CN/docs/Web/HTML/Element/form),每个选定文件的名称都会以 `?uploads=img1.jpg&uploads=img2.svg` 的形式添加到 URL 参数中。但是,由于我们提交的是多部分表单数据,因此必须使用 post。更多信息请参阅 {{htmlelement('form')}} 元素和[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data#method_属性)。 + +### select 元素 + +{{HTMLElement("select")}}元素上的 `multiple` 属性表示从选项列表中选择零个或多个选项的控件。若无该属性,{{HTMLElement("select")}} 元素表示从选项列表中选择一个 {{HTMLElement("option")}} 的控件。控件的外观通常会根据 `multiple` 属性的存在而有所不同,当存在该属性时,大多数浏览器显示的是滚动列表框,而不是单行下拉菜单。 + +```html +
+

+ +

+

+ +

+

+ +

+
+``` + +{{EmbedLiveSample("select 元素", 600, 120) }} + +注意两个表单控件的外观区别。 + +```css +/* 取消注释该 CSS,使带 multiple 属性的高度与单选高度相同 */ + +/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/ +``` + +有几种方法可以在带有 `multiple` 属性的 `` 元素来选择连续多个项目,使用 UpDown 键选择所选范围的顶部或底部,并用光标键在选项间上下移动。非连续项选择支持尚不完善:项目应能通过按 Space 键来选择和取消选择,但不同浏览器的支持情况各不相同。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{htmlelement('input')}} +- {{htmlelement('select')}} +- [允许多个电子邮件地址](/zh-CN/docs/Web/HTML/Element/input/email#允许多个电子邮件地址)