このページの本文へ

HTML5でこんなに変わったinput要素を徹底解説 (2/5)

2012年06月06日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

datetime


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

 「datetime」を指定すると、フォームパーツはグローバル日時(UTC:協定世界時で記述した日時)の入力欄になります。対応しているブラウザーでは年月日と時分を入力するコントロールが表示されます。たとえばOperaでは、年月日を入力するカレンダーと、日時を入力するステップアップ・ダウンボタン付き入力ボックスが表示されます。

011

Operaのスクリーンショット。カレンダーが表示される

 また、min属性とmax属性を使うと、ユーザーが選択可能な期間を指定できます。たとえば、ショッピングサイトのお届け日指定機能で、「3日後以降1か月以内」といった制限を付けたい場合に利用できます。


<input type="datetime" name="datetime" min="2012-04-25T00:00Z" max="2012-05-24T00:00Z" />

Operaのスクリーンショット。選択できない日付がグレーアウトしている

 step属性に数値を指定すると、時分の入力の刻みを指定できます。単位は秒で、「60」で1分刻みになるので、5分刻みにしたいときは「300」と指定します。


<input type="datetime" name="datetime" min="2012-04-25T00:00Z" max="2012-05-24T00:00Z" step="300" />

ポイント

datetimeはタイムゾーンがUTCで固定されているため、サーバーには日本時間から9時間前の時刻が送信されます。日本時間のみを扱うときには、後述のdatetime-localが適しています。

ポイント

datetimeは、「正確でない日時」(関連記事)を入力するには適していません。

date


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

 「date」を指定すると、フォームパーツは年月日の入力欄になります。対応しているブラウザーでは年月日を入力するコントロールが表示されます。Operaでは、datetimeと同じ系統のカレンダー型コントロールが利用できます。

Operaのスクリーンショット。カレンダーが表示される


<input type="date" name="date" min="2012-04-25" max="2012-05-24" step="7" />

 min属性とmax属性で期間を指定できる点や、step属性で刻みを指定できる点もdatetimeと同様です。step属性の値の単位は日で、「1」を指定すると1日刻みになります。

month


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

 「month」を指定すると、フォームパーツは年月の入力欄になり、対応しているブラウザーでは年月を入力するコントロールが表示されます。Operaではdatetimeと同様のカレンダー型のコントロールが利用できます。

Operaのスクリーンショット。カレンダーが表示される

 min属性やmax属性、step属性を指定できます。min属性と、値が12のstep属性を同時に指定すると、min属性で指定した月のみを選択できるようになります。たとえば、min="2012-04" step="12"とすると、2012年4月、2013年4月、2014年4月……といった具合に、毎年4月のみが選択できるようになります。


<input type="month" min="2012-04" step="12" /> 

week


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

 「week」を指定すると、フォームパーツは週の入力欄になります。対応しているブラウザーでは週を入力するコントロールが表示されます。Operaでは、datetimeなどと同様のカレンダー型のコントロールが利用できます。

Operaのスクリーンショット。Operaでのweekのカレンダーは、左側に何週目かの表示がある

 weekの値は西暦と週の組み合わせで構成されます。たとえば、「2012-W04」は2012年の4週目、「2099-W34」は2099年の34週目という意味です。min属性やmax属性、step属性も指定できます。


<input type="week" min="2012-W04" max="2099-W34" step="1" />

time


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

 「time」を指定すると、フォームパーツは時分秒の入力欄になります。対応しているブラウザーでは時分秒を入力するコントロールが表示されます。Operaでは、datetimeと同様のステップアップ・ダウンボタン付き入力ボックスが利用できます。

Operaのスクリーンショット

 以下のようにmin属性とmax属性も指定できます。


<input type="time" name="time" min="00:00" max="15:00" />

 デフォルトでは時間と分のみの入力できますが、step属性の値を「1」などにすることで、秒も入力できるようになります。step属性の単位が秒であり、デフォルト値が「60」なので、59以下の値にすれば秒刻みで入力できることになります。


<input type="time" name="time" min="00:00" max="15:00" step="1" />

Operaのスクリーンショット。桁が増えている

 さらに、step属性を「0.1」などにすると、Operaではミリ秒も入力できるボックスになります。


<input type="time" name="time" min="00:00" max="15:00" step="0.01" /> 

Operaのスクリーンショット。ミリ秒まで入力できる

datetime-local


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

 「datetime-local」は、タイムゾーンを持たないdatetimeです。

Operaのスクリーンショット。見た目はdatetimeと変わらない

 min属性/max属性/step属性の扱いも、datetimeと同様です。


<input type="datetime-local" name="datetime-local" min="2012-04-25T00:00" max="2012-05-24T00:00" step="300" />

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く