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日" ではなく "" となります。