HTML5のフォームは前のバージョンよりも機能が格段に向上していますが、同様に簡単に定義できます。
HTML5には多くの新しいフィールドタイプが実際に用意されています。現在のブラウザによるサポートはかなり優れていますが、ここでは実用的なフィールドタイプのみを紹介します。
カラーピッカー
訪問者に色を選択する機能を提供することができます。
このようなフィールドをクリックすると、典型的なカラーピッカーが表示されます。
選択したい色を決めることができます。このようなカラーピッカーは <input type="color" /> で定義されます。
好きな色を選んでください：<input type="color" name="lf" />
常にフィールドに値を割り当てる必要があります。これがない場合、または無効な場合、自動的に #000（つまり黒）が選択されます。
日時
日付や時間を入力するためのフィールドタイプも、HTML5には多くの新機能があります。そして、これらのフィールドタイプは実際にかなり複雑です。たとえば、訪問者に日付選択フィールドを提供する場合、通常はJavaScript（またはFlash）なしでは実行できません。しかし、HTML5を使えば簡単にできます。ここでは、date タイプの入力フィールドだけ定義すれば良いです。
<input type="date" />
カレンダーの表示および実装はブラウザに委ねられています。ブラウザはカレンダーを表示するためのウィジェットを表示すべきです。Google Chromeでは、次のようになります:
date でカレンダーが定義され、ユーザーが希望する日付を選択できるようになります。選択後はその日付が自動的にテキストフィールドに反映されます。
同様に、時間フィールドも簡単に作成できます。そのためには time タイプのフィールドを使用します。
<input type="time" />
time により、ブラウザは時間を選択するためのコントロールを表示します。
同様に week も簡単に機能します。これにより、週を選択するフィールドが表示されます。
<input type="week" />
さらに、月のフィールドを表示することもできます。
<input type="month" />
これらのフィールドタイプは、指定された内容を調整するためのコントロールを表示します。
time と date はそれぞれ日付の選択のみまたは時間の選択のみを許可しますが、datetime と datetime-local は両方の組み合わせを可能にします。datetime では日付フィールドと時間選択フィールドが横に並んで表示されます（datetime は現時点ではSafariとOperaのみサポートされています）。
このセクションで紹介されたフォームフィールドは、現時点ではすべてのブラウザによってサポートされるわけではありません。それでも使用したい場合は、適切なJavaScriptソリューションを利用できます。jQueryやDojoなどの主要なJavaScriptフレームワークが適切なスクリプトを提供しています。jQuery UIを使用する場合は、次のようになります:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>したがって、ブラウザがクラシックな date をサポートしていない場合でも、安全に使用することができます。
数値フィールド
number により、数字を入力するためのフィールドが提供されます。
最も簡単な場合、number フィールドの定義は次のようになります:
<input type="number" />
数字は次の2つの方法でこれらのフィールドに入力できます:
• キーボードで
• コントロール要素を通じて
追加の属性を指定することで、numberフィールドをより詳細に記述できます。最初に挙げられるのはminおよびmaxという2つの属性で、これによりフィールドの値の範囲を決定できます。
• min – 最小値
• max – 最大値
ただし、これらの2つの属性はブラウザのコントロール要素にのみ影響します。ユーザーによるキーボードを使った手動入力には影響しません。
2つの属性には整数および浮動小数点数を割り当てることができます。step属性を使用して、ブラウザのコントロール要素が遵守すべき段階を設定できます。
<input type="number" min="0" max="8" step="2" />
この場合、ブラウザのコントロール要素を通じては、0、2、4、6、8の値のみを選択できます。
スライダー
rangeタイプのフィールドは、定義済みの値域内で値を選択できます。
ブラウザはrangeフィールドをスライダーを介して解釈します。
<input type="range" min="0" max="10" step="2" value="6">
最小値はmin属性で指定され、maxは最大値を記述します。minとmaxの2つの属性がない場合、ブラウザでは0と100という2つの値が想定されます。step属性を使用して、ステップの順序を定義できます。
検索フィールドの作成
searchはまず機能しません。むしろ、このフィールドタイプは従来のテキスト入力フィールドの補完として考えられます。 searchフィールドの目的は、これらが通常のテキストフィールドと視覚的に異なるようにすることだけで、ブラウザがsearchフィールドの表示を担当することが一般的です。
<input type="search" />
最終的な構築方法はメーカーの裁量に委ねられます。 results属性を追加するのは良い組み合わせです。
<input type="search" results="5" placeholder="検索..." />
resultsを使用すると、フィールドに表示する前の検索入力の数を設定できます。
しかし、注意してください:results属性はHTML5の仕様の一部ではありません。
