数値（type="number"）
numberタイプのinput要素は、数値のみを入力できるコントロールを表します。Opera、Safari、Chromeがnumberタイプのinput要素をサポートしています。
<input type="number">
このように、いずれのブラウザも、入力フィールドに値を直接に入力することもできますし、右側のスピンボタンを押して数値を動かすこともできます。
数値の範囲（type="range"）
rangeタイプのinput要素は、数値をスライダーを使って指定できます。Opera、Safari、Chromeがrangeタイプのinput要素をサポートしています。
<input type="range">
デフォルトでは、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">
サジェスト（datalist要素）
最後に、input要素のtype属性ではありませんが、HTML5で新たに導入されたサジェスト機能を紹介しましょう。HTML5には、新たに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要素にはid属性をセットしておきます。そして、input要素のlist属性に、datalist要素のid属性の値をセットすると、そのinput要素にサジェスト機能を組み込むことができます。input要素をクリックすると、datalist要素にマークアップされた入力候補が表示され、それを選択することで、input要素にその値がセットされます。
datalist要素の中にはoption要素をマークアップします。このoption要素の値が入力候補になります。
2010年12月現在で、Firefox、Operaがdatalist要素をサポートしています。なお、Operaであれば、colorタイプのinput要素とdatalist要素を組み合わせて、カラーピッカーに表示させる色を事前に決めることもできます。
<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>
