Sep.19th, 2020
“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”属性の値に“date”、“month”、“week”を指定した“input”要素は小数値は送信できません。
“step”属性を省略した場合の既定値は“type”属性の値によって異なります。
サンプルコード
<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席
...
