step属性の概要
step属性はinput要素に使用される属性です。
input要素にはボタンやテキスト、数値や時間などの入力できるそれぞれの型がありますが、step属性は次の数値と時間を
入力するための要素に使用されます。この属性を使うことによりユーザーが入力できる値に規則的な補助を行うことができます。
ただし、要素にこの属性を付与するだけでは規則性を持たせた補助であり、制限ではないので注意が必要です。
制限を掛ける為には、input要素がform要素に内包されるようにコードを記述する必要があります。
実機サンプルとサンプルコード
この属性の効果はブラウザによって対応と未対応が分れました。(2020年3月試験)
現時点では補足的な効果を期待する属性として使うとよいと思います。
ここでは実機サンプルとして4つ用意しました。
input要素 number型 (step="数値")
<input type="number" min="0" max="100" value="50" step="5">
input要素 range型 (step="数値")
<input type="range" min="0" max="100" value="50" step="5">
input要素 date型 (step="日")
<input type="date" step="7">
input要素 time型 (step="秒")
<input type="time" step="10">
step属性が使えるinput要素の型
| input type (input要素の型) | step value (指定できる単位) |
|---|---|
| date | 1 day |
| month | 1 month |
| week | 1 week |
| time | |
| datetime-local | 1 day |
| number | 1 |
| range | 1 |