HTML5で進化したフォーム機能
ここが違う！サンプルで見るHTML5（5）

数値（type="number"）

　numberタイプのinput要素は、数値のみを入力できるコントロールを表します。Opera、Safari、Chromeがnumberタイプのinput要素をサポートしています。

マークアップ例

<input type="number">

Operaの数値入力フィールド

Safariの数値入力フィールド

Chromeの数値入力フィールド

　このように、いずれのブラウザも、入力フィールドに値を直接に入力することもできますし、右側のスピンボタンを押して数値を動かすこともできます。

数値の範囲（type="range"）

　rangeタイプのinput要素は、数値をスライダーを使って指定できます。Opera、Safari、Chromeがrangeタイプのinput要素をサポートしています。

マークアップ例

<input type="range">

Operaのスライダー

Safariのスライダー

Chromeのスライダー

　デフォルトでは、0から100の範囲の整数を1刻みでセットできます。value属性が指定されていなければ、このコントロールのデフォルト値は50になります。もし数値の範囲や値を指定したい場合は、次のようにマークアップします。

範囲と値を指定したマークアップ例

<input type="range" value="35" min="20" max="100" step="5">

　この例は、value属性によって値を35にセットしています。そして、min属性とmax属性によって、選択範囲を20から100に限定しています。さらに、step属性によって、5刻みで値を選択できるようにしています。

色（type="color"）

　colorタイプのinput要素は、色を表す値を入力するコントロールを表します。HTML5仕様では、カラーピッカーのような色を選択するユーザーインタフェースが表示されることを想定しています。入力可能な値は、#000000形式の文字列です。このコントロールはOperaが実装しています。

マークアップ例

<input type="color">

Operaのカラーピッカー

サジェスト（datalist要素）

　最後に、input要素のtype属性ではありませんが、HTML5で新たに導入されたサジェスト機能を紹介しましょう。HTML5には、新たにdatalist要素が導入されました。この要素は、テキスト入力フィールドにサジェスト機能を組み込むための要素です。

datalist要素のマークアップ例

<input type="seach" name="q" list="keywords">
<datalist id="keywords">
  <option value="Canvas">Canvas</option>
  <option value="Web Workers">Web Workers</option>
  <option value="WebSocket">WebSocket</option>
</datalist>

datalist要素のレンダリング例（Opera）

　datalist要素にはid属性をセットしておきます。そして、input要素のlist属性に、datalist要素のid属性の値をセットすると、そのinput要素にサジェスト機能を組み込むことができます。input要素をクリックすると、datalist要素にマークアップされた入力候補が表示され、それを選択することで、input要素にその値がセットされます。

　datalist要素の中にはoption要素をマークアップします。このoption要素の値が入力候補になります。

　2010年12月現在で、Firefox、Operaがdatalist要素をサポートしています。なお、Operaであれば、colorタイプのinput要素とdatalist要素を組み合わせて、カラーピッカーに表示させる色を事前に決めることもできます。

datalist要素を使ったカラーピッカーのレンダリング例（Opera）

マークアップ例

<input type="color" name="color" value="#ff0000" list="colors">
<datalist id="colors">
 <option label="白" value="#ffffff">#ffffff</option>
 <option label="黒" value="#000000">#000000</option>
 <option label="赤" value="#ff0000">#ff0000</option>
 <option label="緑" value="#00ff00">#00ff00</option>
 <option label="青" value="#0000ff">#0000ff</option>
</datalist>