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

Web標準Blog

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

2011年3月18日

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

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

前回はHTML5で追加された新しい型<input type=date>を取りあげ、未知の型の処理や値のサニタイゼーションについて紹介しました。今回は、バリデーションを中心に実装の問題や今後の懸念について紹介します。

WebKitのdate実装

時間関連の型はOperaで実装していると書きましたが、WebKitでも実装が勧められています。ChromeやWebKitのナイトリービルドで<input type=date>を含むHTMLを表示させると、<input type=number>のようなスピンボックスが現れます。

しかしながら、現時点ではdate型において値のサニタイゼーションが行われません。ですから、誤った値が追加されても、value属性の値が空文字列にはなりません。

というわけで、いま<input type=date>を使う場合は、date型を与えて、input.typeが同じ値を返すかに加えて、サニタイゼーションを行うかどうかを確かめる必要があります。HTML5関連やCSS3関連機能の検出ライブラリModernizrでは、値にスマイリー :) を与え、サニタイゼーションの有無を検知しています。

フォーム送信時のバリデーション

サニタイゼーションの他にも、HTML5のフォームにはバリデーション機能があります。たとえば、required属性のついたフォームには値が必ず入力されていなければ、フォームを送信することができなくなります。

HTML5フォームとそのバリデーションについては、Mozilla WebdevチームのBlogで、Firefoxヘルプに利用したという紹介記事が公開されています。

Firefox 4, Chrome 10, Opera 11で実装が進んでおり、それぞれのエラー表示を見ることができます。

要素が検証を通るかは、checkValidity()メソッドの返す値によって知ることができます。また、どういったエラーが起こっているかは、要素のValidityStateオブジェクトメンバを参照することで、エラーの原因をつかむことができます。

実装状況の差異がバリデーションに影響

では、<input type=date>に不正な値を与える例でフォームのバリデーションを見ていきましょう。

<form>
  <input type=date value="2011年3月14日">
  <button type=submit>Submit</button>
</form>

前回取り上げたものと同じで、input要素に不正な値が入っています。この場合、date型をちゃんと実装し、かつバリデーションにも対応しているブラウザーであれば、サニタイゼーションが働き、valueプロパティは空文字列になるため問題なく送信されるはずです。Opera 11で上記のコードから送信ボタンを押したところ、エラーが表示されることはありませんでした。

一方、Chromeは先述のとおりサニタイゼーションを行わないので、指定した値がそのまま表示されています。ところが、バリデーション関連APIは実装しているため、値のチェックが行われるのです。そして、"2011年3月14日" という値は不正ですから、これによってフォーム送信時にエラーが表示されます。

また、WebKit NightlyやSafariではバリデーションAPIを実装しているものの、その結果にかかわらずフォームが送信されてしまうようです。

型のUIに依存することの問題

バリデーションがフォーム送信に影響しない実装があるため、いまHTML5フォームを利用しているページが将来的に問題になる可能性があります。特定の型が提供するUIに依存するという懸念です。

iOSのSafariでは型に応じてソフトウェアキーボードが変化します。レイアウトが変化し入力に都合がよいということで、特定の型を本来利用すべきでないところで使ってしまうケースが考えられます。

たとえば、number型の要素では、ソフトウェアキーボードの上段が数値になり、キーボードを切り替える必要がなくなり便利です。しかし、number型は整数や少数を入力するものなので、郵便番号、クレジットカード番号など、数字を利用するテキストのために用意されたものではありません。値の型も決まっており、ハイフンをハイフンとして入力することはできません。

<label>郵便番号: <input type=number name=zip required></label>

こういった風に使われてしまうと、HTML5フォームに対応したクライアントでは送信はおろか、入力もできない可能性がでてきます。

バリデーションについてはフォームにnovalidateもしくは送信ボタンにformnovalidate属性を記述することで回避できますが、入力に問題が出る場合、それはこの属性では解決できません。

HTML5フォームは進んでいるUAもあれば、そうでないものもあります。いま新しい型を利用するときには、それがバリデーションに影響するかということも調べ、無理なく使うことが望まれます。