連載
» 2011年03月07日 00時00分 UPDATE

HTML5“とか”アプリ開発入門(7):フォーム関連要素(2) HTML5でinput要素に追加された新しいタイプ13連発 (1/3)

HTML5の新しい入力タイプを、日時関連や数値、検索、電話番号、URL、メールアドレス、色など用途別にサンプルコードとともに紹介。iPhoneで見るとキーボードまで変化するタイプも!?

[白石俊平,株式会社オープンウェブ・テクノロジー]

input要素に追加された新しいタイプを用途別に紹介

 前回の「HTML5で既存のinputタイプに加わった6つの変更点」では、既存の入力タイプ(<input>要素のタイプ)に加えられた変更点について、解説しましたが、今回も、HTML5で強化されたフォーム要素の紹介です。

 「フォーム関連要素」編の2回目となる今回は、HTML5から導入された新しい入力タイプについて、用途別に順を追って見ていきましょう。今回取り上げる入力タイプは以下のとおりです。

日時に関する新しい入力タイプが多彩で高機能に

 最初に紹介するのは、日付や時間、月、週など、日時に関する入力タイプです。こうした入力タイプには、以下のようなものがあります。

  • date……日付
  • datetime……日付と時刻(タイムゾーンはUTCを使用)
  • datetime-local……日時(タイムゾーンなし。ローカルのタイムゾーンに従う)
  • month……月
  • week……週
  • time……時刻

 これらの入力タイプが、現時点で最新のWebブラウザでどのように表示されるかを見てみましょう。

日時に関する新しい入力タイプを使ってみよう

 HTML5で導入されたフォーム関連要素に対し、最も対応が進んでいるのは2011年2月現在、Operaブラウザです。最新版のOpera 11では、以下に示すコードを下の画像のように表示します。

r12code1.gif
(上の画像をクリックすると、Webブラウザで表示します) (上の画像をクリックすると、Webブラウザで表示します)

 日付や週、月に関する入力フォームの場合は、クリックするとカレンダーを表示します。

r12calendar.jpg

 時刻を入力する欄には、スピンボタンが表示され、ステップ式に時刻を切り替えられます。

r12time.jpg

 そのほかのWebブラウザでは、Operaほど対応が進んでいません。Firefox 4やInternet Explorer 9は未対応、ChromeやSafariでは一応対応してはいますが、見た目上の変化は、通常のテキストフィールドの横にスピンボタンが表示されるようになるのみです。

Webkit系ブラウザ(Chrome 9)でのレンダリング結果 Webkit系ブラウザ(Chrome 9)でのレンダリング結果

入力値の形式について

 これらの入力フォームを用いて入力された値(value属性)の形式は、以下のようになります。

  • date …… yyyy-MM-dd(例:2011-02-06)
  • datetime …… yyyy-MM-ddTHH:mm:ssZ(例:2011-02-06T05:53:22Z)
  • datetime-local …… yyyy-MM-ddTHH:mm:ss(例:2011-02-06T14:53:22)
  • month …… yyyy-MM(例:2011-02)
  • week …… yyyy-Www(例:2011-W05)。その年における何週目かを表す
  • time …… HH:mm:ss(例:14:53:22)

 フォームの送信機能を用いた場合の、サーバに送信されるリクエストパラメータの値も、同様の形式となります。

入力値の設定や取得にJavaScriptのDate型を使える「valueAsDate」プロパティ

 これらのフォームに対する入力値をJavaScriptで扱う場合は、JavaScriptのDate型を利用できると、何かと便利です。valueAsDateプロパティを用いると、入力値の設定や取得にJavaScriptのDate型を用いることができます(ただし、valueAsDateプロパティはdatetime-localには使用できません)。

 例えば以下のコードは、画面が初期表示されたときは現在の日時を表示し、ボタンが押されたときは現在入力された日付の値を表示します。

r12code2.gif
上記サンプルの実行結果(画像はChrome 9のもの)(画像をクリックすると、Webブラウザで確認できます) 上記サンプルの実行結果(画像はChrome 9のもの)(画像をクリックすると、Webブラウザで確認できます)
       1|2|3 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。