step属性

input要素のstep属性は、入力可能な数値の間隔を指定する属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

数値入力欄

<input type="number" step="数値">

step属性に指定した数値の間隔で、数値を指定できる。25を指定すると、入力欄には「25、50、75…」などの数値を指定できる。

レンジ入力欄

<input type="range" step="数値">

レンジ入力欄の刻み間隔を、step属性に指定した数値にする。「0～100」のレンジ入力欄で、25を指定すると、「0、25、50、75、100」を指定できる。

日付入力欄

<input type="date" step="日数">

step属性に指定した日数の間隔で、日付を指定できる。7を指定すると、１週間間隔で指定できる。

【注意】 input要素のtype属性にdateを指定する日付入力欄に対応していないブラウザもある。

時間入力欄

<input type="time" step="秒数">

step属性に指定した秒数の間隔で、時間を指定できる。1を指定すると、１秒間隔で指定できる。

  • 1： １秒間隔。
  • 60： １分間隔。
  • 3600： １時間間隔。
  • 900： 15分間隔。

【注意】 input要素のtype属性にtimeを指定する時間入力欄に対応していないブラウザもある。

step属性に対応しているinput要素のタイプ（type属性値）

date time number range

サンプルコード

数値入力欄

<input type="number" step="10">

レンジ入力欄

<input type="range" step="10">

日付入力欄

<input type="date" step="7">

時間入力欄

<input type="time" step="1">

サンプル

HTMLソースコード

<p>
	<label>
		数値入力欄：
		<input type="number" value="0" step="25">
	</label>
</p>
<p>
	<label>
		レンジ入力欄：
		<input type="range" min="0" max="100" step="25">
	</label>
</p>
<p>
	<label>
		水曜日しか選択できない日付入力欄：
		<input type="date" value="2014-01-01" step="7">
	</label>
</p>
<p>
	<label>
		１秒間隔で指定できる時間入力欄：
		<input type="time" step="1">
	</label>
</p>
<p>
	<label>
		１分間隔で指定できる時間入力欄：
		<input type="time" step="60">
	</label>
</p>
<p>
	<label>
		15分間隔で指定できる時間入力欄：
		<input type="time" step="900">
	</label>
</p>
<p>
	<label>
		１時間間隔で指定できる時間入力欄：
		<input type="time" step="3600">
	</label>
</p>

実際の表示