Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2011年3月 > HTML5フォームとdate input型 (その1)

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2011年3月11日

HTML5フォームとdate input型 (その1)

フロントエンド・エンジニア 矢倉

Peter-Paul Kochの運営するサイトQuirksMode.orgに、HTML5のinput要素に関する互換性テーブルが追加されています。

デスクトップでは対応状況にばらつきが、モバイルにおいては対応が進んでいない印象を受けます。

さて、記事中でも触れられていますが、今回は<input type=date>といった、時間に関連するinput要素の型についてとりあげようと思います。

HTML5では、時間に関連する6つのinput型が追加されています。

これらの型に充分なかたちで対応するのはOperaです。HTML5のフォーム仕様の漸進であるWeb Forms 2を提案した経緯もあり、古くから多くの新しいinput型に対応しています。

Operaでは<input type=date>な要素をクリックすると、デートピッカーが表示されるようになっています。

不明な値はtext型として扱われる

さて、時間関連の型に対応しないブラウザでは、どういった表示になるのでしょうか。

type属性に理解できない値が入力された場合、UAはそれを無視しtype=textとして扱います。

<input type=foobar>

var input = document.createElement('input');
input.setAttribute('type', 'foobar');
console.log(input.type); // 'text'

上記のコードはtype属性にfoobarという値を設定していますが、foobarは定義されていない(理解できない)型なので、input.type'text'を返します。

値のサニタイゼーションで空文字列になることも

時間関連の型をはじめ、input型のいくつかには、value sanitization algorithmという値のサニタイゼーション処理が定義されています。

サニタイゼーションは型によって処理が異なりますが、date型の場合、値はYYYY-MM-DDといった形式(valid date string)でない場合、値が空文字列になってしまいます。

次のように不正な値をvalue属性に記述したとします。

<input type=date value="2011年3月14日">

var dateinput = document.createElement('input');
dateinput.setAttribute('type', 'date');
dateinput.setAttribute('value', '2011年3月14日');
console.log(dateinput.value); // ''

どちらの場合でも、input.valueを取得すると、その値は "2011年3月14日" ではなく "" となります。