【HTML5 Dev】複数ある input エレメントを使ってみる

HTML5 の input エレメントには、ユーザーから入力される情報をさまざまな方法でコントロールするのに欠かせない拡張機能が存在する。今回は、日時関連の新しいタイプを解説し、いくつか例を示しながら、現在これら機能に対応している Web ブラウザでの動作を見ていく。

これまで HTML では、入力される情報をほとんどコントロールできなかった。Web フォームで日付、時刻、もしくはそれらの組み合わせを入力してもらうよう求めたとしても、区別しようがない。どのような場合でも、テキスト ボックスで実現されるシンプルな input エレメントに過ぎないのだ。入力情報を検証したい場合は、JavaScript を使ってクライアント側で行うか、PHP や ASP.NET のようなサーバー サイドの技術を使ってサーバー側で処理するしかなかった。HTML5 では日時を入力する際に、送られてくるデータが有効な日付や時刻になるよう選択に制限をかけ、常に内容が保証されるようにした。

Type 属性

input エレメントの動作と表示形式は、type 属性でコントロールする。簡単に言えば、input エレメントで想定している情報の種類を Web ブラウザに知らせるのが type 属性の仕事ということになる。Web ブラウザはタイプ分類を見て、input エレメントの表示形式（例：日付を指定できるカレンダー表示、ボタン付きの時刻用テキスト ボックスなど）や、必要に応じて入力情報の検証方法を決める。

date、datetime、datetime-local、month、time、 week の各タイプ

date

date は、最もよく使われる日時タイプだろう。これを使えば、シンプルな日付を入力もしくは選択できる。戻り値は、国際標準表記である year-month-day となる（例：2011-12-14）。

<input type="date" name="my_date" />

datetime

このタイプは日付と時刻の両情報を含むため、date より少し複雑だ。日付は国際標準表記である year-month-day となる（例：2011-12-14）。時刻は UTC（Coordinated Universal Time：協定世界時）による24時間フォーマットで、戻り値は「2011-12-14T14:45Z」のような形になる。T は日付と時刻の文字列を分ける文字で、Z は時刻値が UTC であることを示している。

<input type="datetime" name="my_datetime" />

datetime-local

このタイプは、戻り値と時刻標準以外が datetime と事実上全く同じである。日付は国際標準表記である year-month-day となる（例：2011-12-14）。時刻は現地時間による24時間フォーマットで、戻り値は「2011-12-14T14:45」のような形になる。T は日付と時刻の文字列を分ける文字で、最後に datetime と違って Z がないことに注意したい。Z などの文字が付いていないのは、現地時刻であることを示している。

<input type="datetime-local" name="my_datetime-local" />

month

ごく基本的なタイプで、ユーザーに年と月を選択させる。戻り値は date とほぼ同じ year-month という国際フォーマットで、「2011-12」のようになる。

<input type="month" name="my_month" />

time

これは日時関連タイプのなかで最もシンプルで、ユーザーに24時間表示で時刻を選択させる。午前や午後の指定は許さない。戻り値は hours:minutes で「14:30」のようになる。

<input type="time" name="my_time" />

week

week タイプはほかとやや異なり、戻り値が特徴的だ。ユーザーに年と週を選ばせることが目的で、週は1〜52の値をとる。戻り値はやや分かりにくく、使いやすい情報を得るには解析して切り分ける必要がある。戻り値のフォーマットは yearWweek で、W が年と週の数字を区切る文字だ。例えば「2011W48」という表示になる。

<input type="week" name="my_week" />

そのほかの属性

前述したタイプには、ユーザーに選択させる日時の範囲を制限する特殊な入力属性が用意されている。input エレメントの「min」「max」「step」 属性がそれだ。各属性は、date タイプを例に使って説明する。

Min
最小入力値を設定する

Max
最大入力値を設定する

Step
入力値の間隔を設定する。たとえば、type 値が時刻のときに step 属性値を900にすると、有効な入力時刻は15分単位（900秒）に設定される

ヒント：日時タイプに step 属性を使用する場合は、setp 属性の値の単位やフォーマットがタイプごとに異なることを注意しよう。例えば前述した time タイプの場合、間隔は予想反して分でなく秒となる。

<input type="date" name="my_date" min=”2010-01-01” max=”2012-01-01” step=”7” />

これらのタイプをサポートしているブラウザは、現在のところ Opera と Safari の2種類しかない。しかも、両者の実装方法は大きく異なる。今のところ Opera の方が洗練されており、日付関連タイプ用のカレンダー インターフェイスをはじめ、フル機能の日付ピッカーが用意されている。Safari の実装はテキストボックスに最小限の機能を追加した程度で、Opera ほど直感的でもユーザー フレンドリーでもない。例えば、Opera はクリックされた日の週を強調表示するカレンダー インターフェイスを week タイプに適用するが、Safari はユーザーが週を増減するか、「2011W50」や「2012W1」（西暦2012年の第1週）のような値をテキスト ボックスに入力することしかできない。Internet Explorer（IE）と Firefox は、これらの新しいタイプをまだ実装していない。Chrome 10.0は日付関連タイプをサポートするようだが、筆者がテストしたバージョンの Google Chrome はいずれも実装していなかった。

（いずれは）簡単になる日付と時刻に関する処理

近い将来、新しい日付や時刻関連のタイプにより、Web 開発が大幅に楽になるだろう。だが、Opera と Safari しかこれら新タイプの実装に取り組んでいないため、残念ながら短期的には従来の手法を使い続ける必要がある。しかし、待つ必要があっても、開発者が今から新しいタイプをいろいろ試すことは可能だ。ある Web ブラウザに認識されない タイプの input エレメントを使っても、その Web ブラウザでは標準テキスト ボックスが表示されるだけのことだ。

これらの新しいタイプは、各 Web ブラウザにどう実装されるだろうか。楽しみだ。各タイプの目的や生成される値にガイドラインはあっても、各 Web ブラウザのインターフェイスや実装における解釈はさまざまだ。その顕著な例は、Opera と Safari による新しい日時タイプの処理の違いに現れる。Firefox / IE / Chrome が、Safari や、特に 現時点の標準であるように思える Opera に追いついたときの展開が楽しみである。新しい日時タイプを実証するときは、Opera でまず試してみることを絶対にお勧めする。コーディングを楽しまれたい。

テストに使用したブラウザ：Firefox 8.0.1、Chrome 16.0.912.63、Internet Explorer 9.0.8112.16421、Opera 11.60.1185 and Safari 5.1.1

Twitter	iPhoneアプリ / iPadアプリ		Androidアプリ
Facebook	RSS	ニュースメール