From 24f26142f6e31d3ea5c5e13f0039b6e035a7a9b4 Mon Sep 17 00:00:00 2001 From: MaxtuneLee Date: Mon, 21 Oct 2024 16:06:41 +0800 Subject: [PATCH 1/3] [zh-CN] Create translation for `max` attribute --- files/zh-cn/web/html/attributes/max/index.md | 144 +++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/zh-cn/web/html/attributes/max/index.md diff --git a/files/zh-cn/web/html/attributes/max/index.md b/files/zh-cn/web/html/attributes/max/index.md new file mode 100644 index 00000000000000..b38bb623643d48 --- /dev/null +++ b/files/zh-cn/web/html/attributes/max/index.md @@ -0,0 +1,144 @@ +--- +title: HTML 属性：max +slug: Web/HTML/Attributes/max +l10n: + sourceCommit: fcbe69e21d85708248ff60021b1937817844f51c +--- + +{{HTMLSidebar}} + +**`max`** 属性定义了输入字段所能接受的最大值。如果元素的 [`value`](/zh-CN/docs/Web/HTML/Element/input#value) 大于此值，则该元素将不能通过[校验](/zh-CN/docs/Learn/Forms/Form_validation)。`max` 属性值必须大于或等于 [`min`](/zh-CN/docs/Web/HTML/Attributes/min) 属性的值。如果存在 `max` 属性但未指定或无效，则 `max` 值不会被应用。如果 `max` 属性有效，并且非空 `value` 值大于 `max` 属性所允许的最大值，则约束验证将阻止表单提交。 + +`max` 属性适用于数值类型的输入字段，包括 {{HTMLElement("input/date", "date")}}、{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}}、{{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型，以及 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素。`max` 属性是一个数值，用于指定表单控件被认为有效的最大正值。 + +如果值超出了允许的最大值，{{domxref('validityState.rangeOverflow')}} 将为 `true`，且控件会匹配 {{cssxref(':out-of-range')}} 和 {{cssxref(':invalid')}} 伪类。 + +## 语法 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 各输入类型的 + max + 值语法 +
输入类型语法示例
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" max="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" max="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" max="2019-W23" step="">
{{HTMLElement("input/time", "time")}}HH:mm<input type="time" max="17:00" step="900">
+ {{HTMLElement("input/datetime-local", "datetime-local")}} + yyyy-mm-ddTHH:mm + <input type="datetime-local" max="2019-12-25T23:59"> +
{{HTMLElement("input/number", "number")}}<number> + <input type="number" min="0" step="5" max="100"> +
{{HTMLElement("input/range", "range")}}<number> + <input type="range" min="60" step="5" max="100"> +
+ +> [!NOTE] +> 当用户输入的数据不符合设置的最大值时，该值在约束验证中被视为无效，并会匹配 {{cssxref(':invalid')}} 和 {{cssxref(':out-of-range')}} 伪类。 + +请参阅[约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) 和 {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} 了解更多信息。 + +对于 {{htmlelement('progress')}} 元素，`max` 属性描述了 `progress` 元素所表示的任务一共需要完成多少工作。如果 `max` 属性存在，必须具有大于零的值，并且是有效的浮点数。对于 {{htmlelement('meter')}} 元素，`max` 属性定义了测量范围的上限值。此值必须大于最小值（如果指定了[`min`](/zh-CN/docs/Web/HTML/Attributes/min) 属性）。在这两种情况下，如果省略，默认值为 1。 + + + + + + + + + + + + + + + + + + + + + + +
+ 其他元素的 + max + 值语法 +
元素类型语法示例
{{HTMLElement("progress")}}<number> + <progress id="file" max="100" value="70"> 70% + </progress> +
{{HTMLElement("meter")}}<number> + <meter id="fuel" min="0" max="100" low="33" high="66" + optimum="80" value="40"> at 40/100</meter> +
+ +## 无障碍访问注意事项 + +开发者需要提供指引，帮助用户了解如何填写表单并使用各个表单控件。标明任何必填和可选的输入项、数据格式以及其他相关信息。在使用 `max` 属性时，确保用户理解这个最大值要求。可以通过 {{htmlelement('label')}} 提供说明。如果需要在标签之外提供上述说明以实现更灵活的布局设计，请考虑使用 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 或 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 另见 + +- [`step`](/zh-CN/docs/Web/HTML/Attributes/step) +- [`min`](/zh-CN/docs/Web/HTML/Attributes/min) +- 其他 meter 属性: [`low`](/zh-CN/docs/Web/HTML/Attributes/low), [`high`](/zh-CN/docs/Web/HTML/Attributes/high), [`optimum`](/zh-CN/docs/Web/HTML/Attributes/optimum) +- [约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) +- [表单校验](/zh-CN/docs/Learn/Forms/Form_validation) +- {{domxref('validityState.rangeOverflow')}} +- {{cssxref(':out-of-range')}} +- {{htmlelement('input')}} +- {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型，以及 {{htmlelement('meter')}} From 9a3e5c6f0a56428576c068ac5b1782dfe9b0a6c3 Mon Sep 17 00:00:00 2001 From: Maxtune Lee <60775796+MaxtuneLee@users.noreply.github.com> Date: Mon, 21 Oct 2024 16:18:33 +0800 Subject: [PATCH 2/3] Update files/zh-cn/web/html/attributes/max/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/web/html/attributes/max/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/html/attributes/max/index.md b/files/zh-cn/web/html/attributes/max/index.md index b38bb623643d48..9f33bf31348232 100644 --- a/files/zh-cn/web/html/attributes/max/index.md +++ b/files/zh-cn/web/html/attributes/max/index.md @@ -135,7 +135,7 @@ l10n: - [`step`](/zh-CN/docs/Web/HTML/Attributes/step) - [`min`](/zh-CN/docs/Web/HTML/Attributes/min) -- 其他 meter 属性: [`low`](/zh-CN/docs/Web/HTML/Attributes/low), [`high`](/zh-CN/docs/Web/HTML/Attributes/high), [`optimum`](/zh-CN/docs/Web/HTML/Attributes/optimum) +- 其他 meter 属性：[`low`](/zh-CN/docs/Web/HTML/Attributes/low), [`high`](/zh-CN/docs/Web/HTML/Attributes/high), [`optimum`](/zh-CN/docs/Web/HTML/Attributes/optimum) - [约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) - [表单校验](/zh-CN/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeOverflow')}} From 095d03569ffefb5123b1b3bf9564bf9f11e5e188 Mon Sep 17 00:00:00 2001 From: Maxtune Lee <60775796+MaxtuneLee@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:18:36 +0800 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: A1lo --- files/zh-cn/web/html/attributes/max/index.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/zh-cn/web/html/attributes/max/index.md b/files/zh-cn/web/html/attributes/max/index.md index 9f33bf31348232..6d5511afab1a08 100644 --- a/files/zh-cn/web/html/attributes/max/index.md +++ b/files/zh-cn/web/html/attributes/max/index.md @@ -2,14 +2,14 @@ title: HTML 属性：max slug: Web/HTML/Attributes/max l10n: - sourceCommit: fcbe69e21d85708248ff60021b1937817844f51c + sourceCommit: a242996610e5a3335fcd0c5ee3c84d5543b9b8dd --- {{HTMLSidebar}} -**`max`** 属性定义了输入字段所能接受的最大值。如果元素的 [`value`](/zh-CN/docs/Web/HTML/Element/input#value) 大于此值，则该元素将不能通过[校验](/zh-CN/docs/Learn/Forms/Form_validation)。`max` 属性值必须大于或等于 [`min`](/zh-CN/docs/Web/HTML/Attributes/min) 属性的值。如果存在 `max` 属性但未指定或无效，则 `max` 值不会被应用。如果 `max` 属性有效，并且非空 `value` 值大于 `max` 属性所允许的最大值，则约束验证将阻止表单提交。 +**`max`** 属性定义了输入字段所能接受的最大值。如果元素的 [`value`](/zh-CN/docs/Web/HTML/Element/input#value) 大于此值，则该元素将不能通过[校验](/zh-CN/docs/Learn/Forms/Form_validation)。此值必须大于等于 [`min`](/zh-CN/docs/Web/HTML/Attributes/min) 属性的值。如果存在 `max` 属性但未指定或无效，则 `max` 值不会被应用。如果 `max` 属性有效，并且非空值大于 `max` 属性所允许的最大值，则约束验证将阻止表单提交。 -`max` 属性适用于数值类型的输入字段，包括 {{HTMLElement("input/date", "date")}}、{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}}、{{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型，以及 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素。`max` 属性是一个数值，用于指定表单控件被认为有效的最大正值。 +max 属性适用于数值类型的输入，包括 {{HTMLElement("input/date", "date")}}、{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}}、{{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型，以及 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素。它是一个数值，用于指定表单控件被认为有效的最大正值。 如果值超出了允许的最大值，{{domxref('validityState.rangeOverflow')}} 将为 `true`，且控件会匹配 {{cssxref(':out-of-range')}} 和 {{cssxref(':invalid')}} 伪类。 @@ -78,9 +78,9 @@ l10n: > [!NOTE] > 当用户输入的数据不符合设置的最大值时，该值在约束验证中被视为无效，并会匹配 {{cssxref(':invalid')}} 和 {{cssxref(':out-of-range')}} 伪类。 -请参阅[约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) 和 {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} 了解更多信息。 +请参阅[客户端验证](/zh-CN/docs/Web/HTML/Constraint_validation)和 {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} 了解更多信息。 -对于 {{htmlelement('progress')}} 元素，`max` 属性描述了 `progress` 元素所表示的任务一共需要完成多少工作。如果 `max` 属性存在，必须具有大于零的值，并且是有效的浮点数。对于 {{htmlelement('meter')}} 元素，`max` 属性定义了测量范围的上限值。此值必须大于最小值（如果指定了[`min`](/zh-CN/docs/Web/HTML/Attributes/min) 属性）。在这两种情况下，如果省略，默认值为 1。 +对于 {{htmlelement('progress')}} 元素，`max` 属性描述了 `progress` 元素所表示的任务一共需要完成多少工作。如果该属性存在，必须具有大于零的值，并且是有效的浮点数。对于 {{htmlelement('meter')}} 元素，`max` 属性定义了测量范围的上限值。此值必须大于最小值（如果指定了[`min`](/zh-CN/docs/Web/HTML/Attributes/min) 属性）。在这两种情况下，如果省略，默认值为 1。
@@ -119,9 +119,9 @@ l10n:
-## 无障碍访问注意事项 +## 无障碍考虑 -开发者需要提供指引，帮助用户了解如何填写表单并使用各个表单控件。标明任何必填和可选的输入项、数据格式以及其他相关信息。在使用 `max` 属性时，确保用户理解这个最大值要求。可以通过 {{htmlelement('label')}} 提供说明。如果需要在标签之外提供上述说明以实现更灵活的布局设计，请考虑使用 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 或 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)。 +提供帮助用户了解如何填写表单并使用各个表单控件的指引。标明任何必填和可选的输入项、数据格式以及其他相关信息。在使用 `max` 属性时，确保用户理解最大值的要求。可以通过 {{htmlelement('label')}} 提供说明。如果需要在标签之外提供上述说明以实现更灵活的布局设计，请考虑使用 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 或 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)。 ## 规范 @@ -131,14 +131,14 @@ l10n: {{Compat}} -## 另见 +## 参见 - [`step`](/zh-CN/docs/Web/HTML/Attributes/step) - [`min`](/zh-CN/docs/Web/HTML/Attributes/min) -- 其他 meter 属性：[`low`](/zh-CN/docs/Web/HTML/Attributes/low), [`high`](/zh-CN/docs/Web/HTML/Attributes/high), [`optimum`](/zh-CN/docs/Web/HTML/Attributes/optimum) +- 其他 meter 属性：[`low`](/zh-CN/docs/Web/HTML/Attributes/low)、[`high`](/zh-CN/docs/Web/HTML/Attributes/high)、[`optimum`](/zh-CN/docs/Web/HTML/Attributes/optimum) - [约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) - [表单校验](/zh-CN/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeOverflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} -- {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型，以及 {{htmlelement('meter')}} +- {{HTMLElement("input/date", "date")}}、{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}}、{{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型，以及 {{htmlelement('meter')}}