input要素:HTML 5のスイスアーミーナイフ
<input>
要素はHTML 4の主戦力です。単一の値を保持する抽象エンティティである<input>
は、@type
属性を使って、保持するデータのタイプに基づき表現形式を決定します。HTML 5では、タイプの種類(仕様ではinput
のステートと呼ばれます)が大幅に増え、よく使われるデータタイプにさまざまな視覚的インターフェースが提供されます。
多くの場合、<input>
要素はデフォルトのテキストフィールドと見た目は同じですが、入力検査ができるところが異なります。実装方法によっては(電子メール入力フィールドなど)、この機能は無効な文字の入力を防ぐこともできます。ただし、ほとんどの場合は、このフィールドは任意の値を受けつけ、それが(タイプによって)事前定義されたパターンと一致しないと、自動的に入力検査エラーを発生させます。このエラーイベントは、対応するイベントハンドラで検出できます。
テキスト、検索、電話番号、電子メール、URLのステート
HTML 5のテキストフィールドに加えられた新しい属性の1つにpattern
があります。これは、対象フィールドと一致させるための正規表現を指定します。フィールドの値が指定の正規表現と一致しない場合、入力検査エラーが発生します。
テキストフィールドはかなり複雑になることがあるので、HTML 5では、pattern
が事前定義されている特殊な形式のテキストフィールドが提供されます。email
、url
、tel
(電話番号)です。いずれも、明示的なpattern
属性値を使ってそれぞれの内部実装をオーバーライドできます。
数値と範囲のステート
数値のステートは、値として数値のみを有効とするテキストフィールドです。@min
(最小値)属性と@max
(最大値)属性によって、数値の範囲も追加指定できます(当然ながら、@min
は@max
より小さい値にする必要があります)。@step
属性を特定の値(通常は1)に設定して、値が@min + n * @step
になるよう指定することもできます。このとき、n
は0~(@max - @min)/@step
です。例えば、@min="1"
、@max="5"
、@step="2"
の場合、有効な値は1、3、5のみになります。
このフィールドの実装によっては、読み取り専用テキストフィールドと矢印を使って@min
~@max
の値を表すスピナーにすることもできます。一方、範囲のステートの一般的な表現形式は、最小値と最大値の間をサムボタンでスライドするスライダーになります。範囲ステートのinput
フィールドは、一般に、厳密な値より相対的な値を重視する場合に適しています(オーディオボリュームを消音と最大音量の間に設定するときなど)。
日付、時刻、日付時刻
このような入力タイプの多くは、日付、時刻、日付時刻の入力検査形式と、カレンダーや時計の視覚表現を組み合わせます。HTML 5仕様では、これらのフィールドに使用する視覚表現(結果が有効なら日付や時刻や日付時刻の値をフィールドに結び付けるもの)の正式な仕様は提供されていません。
有効な日付、時刻、日付時刻のフィールドには、標準のW3C表現が使用されます。例えば、太平洋標準時の2010年1月2日午後10:15:00は「2010-01-02T10:15:00-08:00Z」、2010年第5週は「2010-W05」、2010年1月は「2010-01」となります。
数値の場合と同様に、これらのフィールドでも@min
属性と@max
属性がサポートされ、有効な値の範囲を制限できます。これはフィールドの視覚表現でもサポートされる可能性があります。その場合、例えば、@min
を「2010-01」、@max
を「2010-12」とすることで、カレンダーに2010年の日付だけを表示できます。
これらのフィールドは変換プロパティvalueAsDate
もサポートします。これは、W3C XML日付表現をJavaScriptのDate()
オブジェクトに変換し、またそのようなJavaScriptオブジェクトを反対に文字列表現に変換するものです。
イメージステート
イメージステートは、とても便利になりそうな新しいフィールドタイプです。このタイプの<input>
コントロールは、@src
属性でイメージリソースを参照します。ロードしたイメージをユーザーがマウスでクリックすると、クリックした位置がイメージの原点からの相対座標で検出され、このコントロールの値になります。
イメージステートにはさまざまな用途が考えられます。色の明度や彩度を表す勾配曲線などの非数値情報を視覚的範囲で示すコントロールも容易に作成できるようになります。WebゲームのUI開発やイメージコンテンツの注釈も簡素化できます。大雑把なエリアマップも作成できます。
座標表現がどんなものになるのか、現在の仕様ではやや不明瞭ですが、おそらくはカンマで区切ったXYペアになるでしょう。既に、各種HTML DOM表現で、イメージに対するマウスの相対座標を検出できますが、必ずしも簡単ではありません。イメージステートを使えば、そうしたコードを簡素化でき、すべてのHTML 5ブラウザで統一することも可能になります。
カラーステート
色のinput
タイプは、特定の色を選択する手段を提供します。通常、これは、#rrggbb、rgb(赤、緑、青)、または単純な色名指定('green'、'yellow'など)の色表現を指定できるテキストフィールドと、カラーセレクタなどで色選択できるウィジェットを組み合わせて実装されます。このようなウィジェットの具体的な実装はブラウザに依存します。