HTML5における新しいフォームのマークアップ

Posted by yama3 2009年 12月 30日. Webサービス, プログラミング -
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

現在使われているWEBのマークアップ言語HTMLの新バージョン5の仕様がいろいろなところで公開されています。このHTML5では、今までのバージョン4と比べ、非常に多くのタグを利用可能になっております。これらのHTML5で新しく使えるようになったタグの多くは、セマンティック・ウェブの実現、インタラクティブなウェブページの開発を容易にすることに目を向けたタグになっています。そこでこの記事では、HTML5で新しくなったものの1つであるフォームについて解説しようと思います。

なお、当記事は、<html>5 doctor::Designing a blog with html5の記事を、自分なりに和訳して理解したものを書いています。場合によっては和訳が間違っており、正しくないことを書いてしまっている場合もあります。もし、おかしな点などございましたら、上記サイトから、該当箇所を確認していただくか、コメント欄やtwitter(@1987yama3)までご連絡いただけたらと思います。

inputタグのバリデーション

inputタグといえば、今までは、さまざまな入力フォームを生成するタグでした。今まではそのtype属性にtextと入れてテキスト入力を、reset, submitなどでボタンといったように見た目だけを変更することはできたのですが、そのロジック（論理部分）は変えることができませんでした。それが今回のHTML5では、大幅に強化され、様々な指定ができるようになりました。

具体的には、今まで入力されたデータが開発者の意図したものとなっているか
どうかをチェックするのに、サーバーサイド・スクリプトでバリデーションを行ったり、JavasScriptを記述してバリデーションを行ったりしていました。これをブラウザ側でバリデーションを行うことができるようになった点が新しいと思われます。例えば、inputタグのtype属性にemailを記述することで、該当のテキスト・フォームに入力された値がemailであるかどうかがチェックされます。このようなバリデーションを行うことができる入力は、email以外にもurl（Web上のURL）やnumber（数字であるかどうか）などが存在します。また、デフォルトで設定できなくても、正規表現によるバリデーションも規定されるようですので、開発者にとって、開発をスムーズにできるようになります。

日付入力の支援

Web上のフォームに何らかの日付を入力してもらう、という場面はよくあります。このような日付入力の際、その方法は開発者が決めています。その入力方法は
大きく分けると

  • テキストボックスに記述方法を指定する、
  • ドロップダウンリストから年・月・日を選ばせる、
  • カレンダー・ウィジェットのようなGUIを利用する(JavaScriptを利用)、

の3通りかと思います。この3つは、上にあるものほど実装が簡単で、下に行くほど実装が複雑になります。逆に、上にあるものはエラー入力が多く、下にあるものほどエラー入力が少なくなり、ユーザにとっても便利な実装です。

今までは日付入力の際に、ユーザの利便性を採るか、開発の容易性をとるかで選択を迫られていましたが、HTML5ではそのどちらも犠牲にすることはありません。具体的には、簡単なHTMLを記述するだけでブラウザ側がウィジェットを出力するようになります。具体的には、inputタグのtype属性をdateに設定することで、該当のテキストボックスにフォーカスが移動された際にブラウザがそのテキストボックスの付近にカレンダー・ウィジェット（DATEピッカー）を表示してくれます。そのため、開発者側は、input type=”date”とするだけ、ユーザにとっても、日付入力はどのサイトでもカレンダー・ウィジェットから指定できる統一性というメリットがあります。/p>

また、開発者側にとっての一番のメリットは、ユーザの環境を考える必要がない、ということでしょうか。今までもJavaScriptを利用してカレンダー・ウィジェットを使うことはできたのですが、JavaScriptを利用できないユーザーにはこのカレンダー・ウィジェットを使ってもらうことができません。今回のHTML5のカレンダー・ウィジェットはJavaScriptを利用していないため、ユーザがJavaScriptを利用しているか否かに関わらず同一の操作性を提供することが可能になります。

まとめ

今までJavaScriptを書いて、入力フォームのロジックを変更していた部分が、今回のHTML5ではHTMLタグだけで、しかも簡単な記述で行うことができるということでなかなか便利になることが期待できます。問題は、HTML5への移行がいつくらいになるかでしょう。しかし、移行のタイミングがいつであったとしても、必ずその時期はやってきます。早い時期からHTML5を用いた適切なマークアップを勉強してみてはいかがでしょうか？

参考サイト

関連記事

人気ブログランキングへ

[PR]

トラックバック

http://yamablo.com/2009/12/30-185101.php/trackback

コメント

Get Adobe Flash playerPlugin by wpburn.com wordpress themes