このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“step”属性HTML5で追加

記事Sep.19th, 2020
入力可能な数値の間隔を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

step”属性について

step”属性はinput”要素で表される入力欄に入力可能な数値の間隔を指定する属性です。

step”属性はtype”属性に以下の値が指定されている場合に使用できます。

step”属性はユーザーが入力できる入力値のルールを定義します。例えばtype”属性numberである場合に“step="0.5"”と指定すると入力欄に入力できる入力値は0.5刻み(...,“-0.5”,“0”,“0.5”,“1”,...)になります。

step”属性で定義するルールの基点はmin”属性が指定されていればmin”属性の値、value”属性が指定されていればvalue”属性の値、いずれもなければ“0”もしくは入力欄が既定で入力可能な最小値です。例えばtype”属性numberで“step="1"”と指定した場合はvalue”属性が“1”であれば奇数、value”属性が“2”であれば偶数が入力欄で送信できます。

step”属性に“any”を指定すると入力欄の既定のルールにかかわらず無段階で入力値を入力できるようになります。例えばtype”属性numberである場合には既定では整数値のみ入力できますが、小数値も入力できるようになります。

ユーザーの入力値が“step”属性で定義されたルールを満たさない場合はブラウザによる妥当性のチェックによりフォームが送信できなくなります。ブラウザによっては“step”属性で定義されたルールを満たさない入力値を入力できないようにします。

step”属性を指定してもtype”属性の値にdatemonthweekを指定したinput”要素は小数値は送信できません。

step”属性を省略した場合の既定値はtype”属性の値によって異なります。

指定できる値

type”属性の値にかかわらず指定できる属性値

属性値 説明
any どのような値も入力可能(無段階)

type”属性の値によって指定できる属性値

type”属性 step”属性
説明 既定
dateHTML5で追加 日数 入力可能な日付の間隔 1日
monthHTML5.1で追加 月数 入力可能な月の間隔 1か月
weekHTML5.1で追加 週数 入力可能な週の間隔 1週間
timeHTML5で追加 秒数 入力可能な時刻の間隔 60秒
datetime-localHTML5.1で追加
numberHTML5で追加 数値 入力可能な数値の間隔 1
rangeHTML5で追加

値は“0”より大きい数値で指定します。小数値も指定できます。

サンプルコード

<dl>
<dt>営業時間</dt>
<dd>午前10時~午後5時</dd>
<dt>席数</dt>
<dd>5席</dd>
</dl>

...

<form method="post" action="sample-inputtag12.php" target="_blank">
<fieldset>
<p><label>ご来店希望時間:<input type="time" name="time" min="10:00" max="17:00" step="1800"></label></p>
<p><label>ご来店される人数:<input type="number" name="number" min="1" max="5" step="1"></label></p>
<p><label>このくらい鮪が好き:<input type="range" name="percent" min="0" max="100" step="10"></label></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
営業時間
午前10時~午後5時
席数
5席

...

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク