diff --git a/files/zh-cn/web/html/attributes/step/index.md b/files/zh-cn/web/html/attributes/step/index.md new file mode 100644 index 00000000000000..1117ba001f8e70 --- /dev/null +++ b/files/zh-cn/web/html/attributes/step/index.md @@ -0,0 +1,138 @@ +--- +title: HTML 属性:step +slug: Web/HTML/Attributes/step +l10n: + sourceCommit: 067a40e4ed27ea6e1f3b8bbfec15cd9dc3078f4c +--- + +{{HTMLSidebar}} + +**`step`** 属性是值必须遵循的粒度数值,或关键字 `any`。此属性对数值输入类型有效,包括 {{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")}} 类型。 + +`step` 设置了点击上下旋转按钮、在范围上左右移动滑块以及验证不同日期类型时的*步进间隔*。如果没有明确指定,`number` 和 `range` 的 `step` 默认为 1,日期/时间输入类型的 `step` 默认为 1 个单位类型(分、周、月、日)。值必须是正数(整数或浮点数)或特殊值 `any`,这意味着不隐含步进,允许任何值(除其他限制外,如 [`min`](/zh-CN/docs/Web/HTML/Attributes/min) 和 [`max`](/zh-CN/docs/Web/HTML/Attributes/max))。 + +`number` 输入类型的默认步进值为 1,只允许输入整数,*除非*步进基数不是整数。`time` 的默认步进值为 60 秒,值 900 等同于 15 分钟。 + +## 语法 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ step 的默认值 +
输入类型示例
{{HTMLElement("input/date", "date")}}1(天)<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}1(个月)<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}1(周)<input type="week" min="2019-W23" step="2">
{{HTMLElement("input/time", "time")}}60(秒)<input type="time" min="09:00" step="900">
+ {{HTMLElement("input/datetime-local", "datetime-local")}} + 60(秒) + <input type="datetime-local" min="2019-12-25T19:30" + step="900"> +
{{HTMLElement("input/number", "number")}}1 + <input type="number" min="0" step="0.1" max="10"> +
{{HTMLElement("input/range", "range")}}1<input type="range" min="0" step="2" max="10">
+ +如果未明确设置 `any`,则 `number`、日期/时间输入类型和 `range` 输入类型的有效值等于步进的基础值([`min`](/zh-CN/docs/Web/HTML/Attributes/min) 值)和步进值的增量,如果指定了 [`max`](/zh-CN/docs/Web/HTML/Attributes/max) 值,则增量最大为 `max`。以下示例的结果是对任何 10 或更大的偶整数都有效: + +```html + +``` + +如果省略了 `step` 值,任何整数均有效,但对像 4.2 这样的浮点数无效,因为 `step` 默认为 1。要使得 4.2 成为有效值: + +- 将 `step` 设置为 `any`、0.1 或 0.2 +- `min` 值以 `.2` 结束,如 0.2、1.2 或 -5.2 + +## 示例 + +### step 中 `min` 的影响 + +即使不包含 `step` 属性,`min` 的值也能定义有效值。这是因为对于 `number` 输入类型,`step` 的默认值是 `1`。 + +在本例中,我们会在无效输入的周围添加一个大红边框: + +```css +input:invalid { + border: solid red 3px; +} +``` + +然后,我们定义一个最小值为 1.2、步长值为 2 的输入: + +```html + +``` + +有效值包括 1.2、3.2、5.2、7.2、9.2、11.2 等。只有整数部分为奇数、小数部分为 0.2 的浮点数才有效。数字旋转器(如果存在)会生成 1.2 或更大的有效浮点数值,增量为 2。 + +{{EmbedLiveSample("step 中 min 的影响","100%",55)}} + +> [!NOTE] +> 当用户输入的数据不符合步进配置时,该值在约束验证中被视为无效,并将匹配 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 伪类。 + +参见[客户端验证](/zh-CN/docs/Web/HTML/Constraint_validation)和 {{domxref("ValidityState.stepMismatch", "stepMismatch")}} 以了解更多信息。 + +## 无障碍考虑 + +提供说明,帮助用户了解如何填写表单和使用各个表单控件。说明任何必需和可选的输入、数据格式以及其他相关信息。使用 `min` 属性时,应确保用户理解这一最低要求。在 {{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}} + +## 参见 + +- [`max`](/zh-CN/docs/Web/HTML/Attributes/max) +- [`min`](/zh-CN/docs/Web/HTML/Attributes/min) +- [约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) +- [表单验证](/zh-CN/docs/Learn/Forms/Form_validation) +- {{domxref('validityState.stepMismatch')}} +- {{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')}} 元素