From c6679b690cd47528bd7e30f3cc76eeb7c9dde02e Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:32:21 +0800 Subject: [PATCH 1/3] [zh-cn] Create translation of html `multiple` attribute --- .../web/html/attributes/multiple/index.md | 188 ++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 files/zh-cn/web/html/attributes/multiple/index.md 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` 属性时，用户可选择一个或多个文件。用户可以在所选平台允许的任何方式下，从文件选择器中选择多个文件（如按下 Shift 或 Control 键，然后单击一个文件）。 + +```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` 属性的 `` 元素来选择连续多个项目，使用 Up 或 Down 键选择所选范围的顶部或底部，并用光标键在选项间上下移动。非连续项选择支持尚不完善：项目应能通过按 Space 键来选择和取消选择，但不同浏览器的支持情况各不相同。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{htmlelement('input')}} +- {{htmlelement('select')}} +- [允许多个电子邮件地址](/zh-CN/docs/Web/HTML/Element/input/email#允许多个电子邮件地址) From 589478bfa15cca25e1b5b4d760294a46c9cdd3f7 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:33:53 +0800 Subject: [PATCH 2/3] Update index.md --- files/zh-cn/web/html/attributes/multiple/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/zh-cn/web/html/attributes/multiple/index.md b/files/zh-cn/web/html/attributes/multiple/index.md index b874b685c77443..ab4401bdb77c9d 100644 --- a/files/zh-cn/web/html/attributes/multiple/index.md +++ b/files/zh-cn/web/html/attributes/multiple/index.md @@ -33,6 +33,7 @@ l10n: {{HTMLElement("select")}} 元素上的 `multiple` 属性表示从选项列表中选择零个或多个选项的控件。若不存在该属性，{{HTMLElement("select")}} 元素表示从选项列表中选择一个 {{HTMLElement("option")}} 的控件。 +```html 想要将邮件发送给谁？

- 选择要上传的图像：

- +

@@ -126,7 +129,8 @@ input:invalid { ```html

- @@ -137,7 +141,8 @@ input:invalid {

-