マークアップによるバリデーション
前述の通り、emailタイプ、urlタイプなど、HTML5で新たに導入されたフォームコントロールは、入力可能な値に制約が設けられます。HTML5では、属性によって、さらに入力値の制約を設けられるようになりました。ここでは、HTML5で新たに規定された属性のうち、最も役に立ちそうな2つの属性をご紹介しましょう。
入力必須にするrequired属性
required属性を使うと、該当のフォームコントロールは必須になります。
<input type="text" required>
もし何も入力せずにフォームをサブミットしようとすると、エラーメッセージが表示されます。2010年12月現在で、Firefox、Operaがrequired属性によるエラーメッセージ表示をサポートしています。
入力パターンを定義するpattern属性
pattern属性に正規表現を指定することで、入力送信可能な値を詳細に定義できます。
<input type="text" name="t" pattern="[a-z]{3,8}">
この例では、半角アルファベット小文字で3文字以上8文字以下のみ受け付けることを表しています。もし入力された値が、pattern属性に指定した正規表現に一致する値でなければ、フォームがサブミットされるときにエラーメッセージが表示されます。2010年12月現在で、Firefox、Operaがpattern属性によるエラーメッセージ表示をサポートしています。
便利な新機能
HTML5には、実際のウェブサイトで良くありがちな機能をマークアップだけで実現できるようになりました。ここでは、そのいくつかをご紹介しましょう。
プレースホルダー
HTML5には、テキスト入力フィールドにプレースホルダーをセットできるようになりました。placeholder属性に表示させたいテキストをセットします。
<form action="search.cgi" method="get"> <p> <label><input type="search" name="q" placeholder="検索キーワード"></label> <input type="submit" value="検索" /> </p> </form>
フォーカスが当たっていなければ、placeholder属性にセットされたテキストがグレーで表示されます。そして、フォーカスが当たると、そのテキストは非表示になります。これまでJavaScriptを使って実現された機能が、マークアップだけで実現できるようになります。2010年12月現在で、Firefox、Opera、Safari、Chromeがplaceholder属性をサポートしています。
このプレースホルダーには、入力のヒントや入力例を表すテキストをセットします。前述の例は、検索窓であることが明らかであるということを想定しています。もしテキスト入力フィールドの説明が必要なのであれば、プレースホルダーに説明を入れるのではなく、本文で用途を説明するべきでしょう。
オートフォーカス
HTML5には、ページがロードされたら自動的に特定のフォームコントロールにフォーカスを当てるautofocus属性が追加されました。
<form action="login.cgi" method="post"> <p> <label>パスワード：<input type="password" name="pass" autofocus></label> <input type="submit" value="ログイン" /> </p> </form>
この例は、パスワード入力を求めるログインフォームを想定したものです。ページが表示されると同時に、自動的にパスワード入力フィールドにフォーカスがあたり、利用者はすぐにパスワード入力ができるようになります。2010年12月現在で、Firefox、Opera、Safari、Chromeがautofocus属性をサポートしています。
以上、HTML5によって進化したウェブフォームの機能を解説してきました。HTML5には他にもさまざまなフォーム関連の機能が規定されましたが、今なお、各ブラウザベンダーは、その実装に取り組んでいます。将来的にすべてのブラウザがHTML5によって導入された新機能を実装すれば、より利便性が高いフォームが簡単に作ることができるようになります。また、ウェブページだけでなく、ウェブアプリケーションの入力メカニズムとしても期待されます。
次回は、これまで解説してきたHTML5の新機能を踏まえ、HTML5の将来展望について触れていきます。
