このページの本文へ

HTML5でこんなに変わったinput要素を徹底解説 (3/5)

2012年06月06日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

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属性も指定できません。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く