number
<input type="number" name="num" />
「number」を指定すると、フォームパーツは数値の入力欄となります。対応しているブラウザーではステップアップ・ダウンボタン付き入力ボックスのコントロールが表示され、クリックすることで数値を上下に変更できます。
Operaのスクリーンショット
min属性／max属性／step属性を使用すると、それぞれ最小値・最大値・数値の刻みを指定できます。
<input type="number" name="num" min="5" max="100" step="5" />
min属性／max属性／step属性の値を小数点以下にすることで、小数点以下の値も扱えるようになります。
<input type="number" name="num" step="0.1" />
<input type="number" name="num" max="0.09" step="0.01" />
<input type="number" name="num" min="0.05" step="0.05" />
stepで小数点以下の値を指定していない場合、手動で小数点以下の値を入力するとエラーになります。
<input type="number" name="num" min="1" max="100" step="1" />
エラーが発生した時のOperaのスクリーンショット
range
<input type="range" name="range" />
「range」を指定すると、フォームパーツは数値の入力欄になります。入力できる値が数値なのはnumberと同様ですが、rangeの場合は、
- 数値の正確性は重要ではない
- 指定できる数値は上限と下限の範囲が必須
- 値の未指定（空）はできない
という点が違います。
対応しているブラウザーでは、numberよりもシンプルなコントロールで表示されます。OperaやChromeでは、スライダーで表示されます。
Operaのスクリーンショット
数値の範囲はmin属性とmax属性で指定しますが、値を省略した場合はデフォルト値である「0」と「100」が設定されます。
入力値の初期値はvalue属性で指定しますが、value属性もしくはその値を省略した場合はデフォルト値である「min属性値＋(max属性値－min属性値)÷2」が設定されます。たとえば、min属性値が0でmax属性値が100の場合、「0＋(100-0)÷2」で、50となります。
ユーザーがスライダーを操作せずに送信した場合、値は空ではなく、value属性に指定した初期値が送信されます。
step属性を使うと、数値の刻みを指定できます。省略した場合は、デフォルト値である1が設定されます。
<input type="range" name="range" value="20" min="0" max="100" step="5" />
通常は整数のみ指定できますが、min属性／max属性／step属性の値を小数点以下にすることで、小数点以下の値も扱えるようになります。
<input type="range" name="range" step="0.1" />
<input type="range" name="range" max="0.09" step="0.01" />
<input type="range" name="range" min="0.05" step="0.05" />
また、初期値が必ず設定されるので、入力を必須とするrequired属性は指定できません。
color
<input type="color" name="color" />
「color」を指定すると、フォームパーツは色指定の欄になります。対応しているブラウザーでは色を入力するコントロールが表示されます。
Operaのスクリーンショット。カラーパレットが表示される
colorはrangeと同じく、値を空にできません。ユーザーが何も選択せずに送信ボタンを押した場合、デフォルト値である#000000が送信されます。そのため、入力を必須とするrequired属性も指定できません。
