step

step

input 要素 step 属性 (HTML)

[2] HTML の input 要素の step 属性は、 フォーム制御子の精度を制御します。 日時や数値に関係する type に対して有効です。 WF2 2.4.2

[4]

状態
WHATWG WD
要素型
input
type
date, datetime, datetime-local, month, time, week, number, range
属性名
step (step (段階) より)
属性値
type に依存 (>>5)
既定値
type に依存 (>>6)

[3] 仕様書:

属性値

[5] WF2 2.4, 2.4.2

type属性値既定値
date日数1 (1日)
datetime秒数60 (1分)
datetime-local秒数60 (1分)
month月数1 (1ヶ月)
number値1
range値1
time秒数60 (1分)
week週数1 (1週間)

[12] 時刻系制御子では、 step 属性値は秒数です。 秒未満の値のために小数を使用して構いません。 書式は、それぞれの number の値に用いられるものと同じですが、 零よりも大きくしなければなりません。 WF2 2.4.2

[6] 日付系制御子では、 step 属性値は日、週、月の数です。 書式は1桁以上の 0〜9 で、十進数として解釈されます。 零は既定値として解釈されます。 WF2 2.4.2

[14] 数値系制御子では、 書式は number の値と同じですが、 零よりも大きくしなければなりません。 WF2 2.4.2

[18] 更に、いずれの type でも、 any という特別な値を使用して構いません。 この値は、どんな値も使用して構いませんと示すことになります。 WF2 2.4.2

step に関する制約はなくなりますが、 その他の制約は通常通り適用されます。

[22] 著者が与えた step が適切な値でなければ、 既定値が用いられます。 WF2 2.4.2

妥当性

[7] フォーム制御子が妥当となるためには、 基準点から step の整数倍の値を有しなければなりません。 WF2 2.4.2

[8] ここでいう基準点は、 min 属性値か、 なければ max 属性値か、それもなければ零点です。 WF2 2.4.2

[20] 値が step に照らして適切でなければ、 stepMismatch 妥当性検証誤りが用いられます。 しかし、利用者エージェントは、この誤りを報告する代わりに、 数値を step で認められる直近の値に黙って丸めることにして構いません。 WF2 2.4.2

しかし、その丸めにより、 値が範囲外になり、 rangeOverflow などの妥当性検証誤りが生じることもあります。

レンダリング

[11] step 属性を利用者界面にどう反映させるべきかは、 Web Forms 2.0 では規定していませんが、 step が 1 の datetime について、

<IMG:http://www.whatwg.org/specs/web-forms/current-work/sample-datetime-ui-1>

のように、文章入力制御子のうち、 年〜秒がそれぞれ編集可能になっており、 暦や時計を表示するためのボタンが付されている例を示しています。 WF2 2.4.2

実装の精度

[21] 著者が step で指定した値が利用者エージェントにとって小さすぎる時、 利用者エージェントは any であるかのように取り扱いするべきです。 WF2 2.4.2

例えば、多くの利用者エージェントでは 1e-9999999 は underflow になり、扱えませんので、 any であるかのように扱うべきです。

[23] 利用者エージェントは利用者や著者が指定した値を二進表現に変換せずに、 元の文字列形のままで比較を行うことが推奨されます。 それにより、十進数と二進数の変換による誤差が生じるのを防ぐことができます。 WF2 2.4.2

[24] 利用者エージェントがどうしても二進数に変換する必要がある時は、 ECMA 262 の 9.3.1 節 (ToNumber) や 8.5 節 (Number) で定義されているものと等価な算法を (扱える数値の範囲はその利用者エージェントで適当なものと読み替えて) 使用するべきです。 WF2 2.4.2

例

[9]

<input type="datetime" step="120" name="start">

この例では、任意の年月日を選択できますが、 時刻は偶数分丁度でなければなりません。 WF2 2.4.2

[10]

<input type="time" min="00:00:15.20" name="t">

この例では、時と分はいつでも構いませんが、 分丁度から15と10分の2秒後でなければなりません。 従って、 00:00:15.2, 00:01:15.2, 00:02:15.2, ... 23:59:15.2 が選択肢となります。 WF2 2.4.2

step の既定値が 60 (1分) だからです。

[13]

<input type="date" min="1900-01-07" step="7" name="sunday">

この例では、1900年以降の日曜日だけが選択できます。 WF2 2.4.2

[15]

<input type="number" step="25e-2" max="-1.1">

この例では、 -1.1, -1.35, -1.60, -1.85, -2.1, ... が認められる値となります。 WF2 2.4.2

[16]

<input type="range" step="2" name="evenN">

この例では、偶数だけが認められます。 WF2 2.4.2

range では min の既定値が 0 だからです。

[17]

<input type="range" step=".1" name="n">

この例では、 step 属性の書式が不適当なので、 step 属性値は使われず、 既定値の 1 が使われます。 WF2 2.4.2

十分の一は、 0.1 と書かなければなりません。

[19]

<input type="number" step="any" name="n">

この例では、任意の浮動小数点数が使用できます。 WF2 2.4.2

メモ

[1901] Web Applications 1.0 r7517 Make it possible for <input type="time" name="t" value="14:39:24"> to be submitted (before, it couldn't because it didn't match the step, but now, if possible, the step is based on the default value rather than zero if there's no min). ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7516&to=7517>

[25] Ensure stepUp() and stepDown() do not change value negatively · whatwg/html@5f73843 ( 版) <https://github.com/whatwg/html/commit/5f73843182a20dbc48227a74bca19ae58768c86c>