HTML 屬性：step

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

step 屬性是一個數字，用於指定值必須遵守的粒度，或者使用關鍵字 any。它適用於數字輸入型別，包括 date、month、week、time、datetime-local、number 和 range 型別。

step 設定點選上下微調按鈕時的步長間隔、range 滑塊左右移動的步長，以及不同日期型別的驗證。如果未明確指定，number 和 range 的 step 預設為 1，日期/時間輸入型別的 step 預設為 1 個單位型別（分鐘、周、月、天）。該值必須是正數（整數或浮點數）—— 或特殊值 any，這意味著不暗示步長，並且允許任何值（排除其他約束，如 min 和 max）。

只有與步長基數相差整數倍步長的值才有效。步長基數是 min（如果已指定），否則是 value，如果兩者均未提供，則為 0（但 week 型別除外，其預設步長基數為 −259,200,000，代表 1970-W01 周的開始）。

語法

step 的預設值
輸入型別	值	示例
日期	1 (天)	`<input type="date" min="2019-12-25" step="1">`
月份	1 (月)	`<input type="month" min="2019-12" step="12">`
周	1 (周)	`<input type="week" min="2019-W23" step="2">`
時間	60 (秒)	`<input type="time" min="09:00" step="900">`
datetime-local	60 (秒)	`<input type="datetime-local" min="2019-12-25T19:30" step="900">`
數字	1	`<input type="number" min="0" step="0.1" max="10">`
range	1	`<input type="range" min="0" step="2" max="10">`

如果未明確設定 any，則 number、日期/時間輸入型別和 range 輸入型別的有效值等於步長的基數——即 min 值加上步長值的增量，直到達到（如果已指定）max 值。以下示例將使任何大於等於 10 的偶數都有效。

html

<input type="number" min="10" step="2" />

如果省略 step，任何整數都有效，但像 4.2 這樣的浮點數無效，因為 step 預設為 1。要使 4.2 有效，

step 必須設定為 any、0.1 或 0.2，
或者 min 值必須是一個以 .2 結尾的數字，例如 0.2、1.2 或 -5.2。

示例

`min` 對 step 的影響

min 的值定義了有效值，即使 step 屬性未包含。這是因為 number 輸入型別的 step 預設為 1。

在此示例中，我們在無效輸入周圍添加了粗紅邊框。

css

input:invalid {
  border: solid red 3px;
}

然後我們定義一個最小值（min）為 1.2，步長（step）值為 2 的輸入框。

html

<input id="myNumber" name="myNumber" type="number" step="2" min="1.2" />

有效值包括 1.2、3.2、5.2、7.2、9.2、11.2 等等。只有整數部分為奇數且小數部分為 .2 的浮點數才有效。如果存在數字微調器，它會以 2 為增量生成大於等於 1.2 的有效浮點值。

注意：當用戶輸入的資料不符合步長配置時，該值在約束驗證中被視為無效，並將匹配 :invalid 和 :out-of-range 偽類。

有關更多資訊，請參閱客戶端驗證和 stepMismatch。

可訪問性考慮

提供說明以幫助使用者理解如何完成表單以及如何使用單個表單控制元件。指示任何必需和可選的輸入、資料格式和其他相關資訊。在使用 min 屬性時，請確保使用者理解此最低要求。在 <label> 中提供說明可能就足夠了。如果要在標籤外部提供說明（這允許更靈活的定位和設計），請考慮使用 aria-labelledby 或 aria-describedby。