HTML5 アプリケーションをビルドする

HTML5 フォームを利用して優れた Web フォームを作成する

Brandon Satrom

コード サンプルのダウンロード

Web 開発者ならば、これまでに HTML フォームを作成した経験があるでしょう。実際、思い出したくもないほど多く作成してきたかもしれません。text、password、file、hidden、checkbox、radio、submit、button といった、input 要素によく使われてきた type 属性は間違いなくなじみ深いものでしょう。

(今羅列したものの中で) どの type 属性を最も多用するかと問われたら、おそらくほとんどの開発者が一様に「text」と答えるでしょう。input 要素の type 属性の中でも text 属性は、従来の HTML フォーム開発におけるマルチツールです。text 属性は、開発者が求めるほぼすべての処理に適応可能です。しかし、意味合いが中立のため、この要素をブラウザーが何か実用的な意味合いに変えることはできません。開発者や設計者はこれを補うため、こうした要素に (ID やクラス名を利用して) 独自の意味合いを追加したり、サーバー フレームワークや JavaScript に依存することで、検証の処理や豊富な対話操作を実現してきました。

典型的な例が、テキスト フィールドでの日付の入力です。ほとんどの場合、なんらかの日付選択機能を利用して、日付フィールドを拡張することを考えます。多くの場合、独自に作成した JavaScript または jQuery UI のようなフレームワークを使用してこのような拡張を行い、ユーザーがウィジェットから日付を選択することで、元のフィールドに日付を入力できる対話操作を組み込みます。

このパターンは便利です。そして、開発者はこのようなパターンを非常にうまく利用できるようになりました。しかし、「なぜブラウザーにこうした処理をさせることができないのか」と疑問を抱かずにはいられないほど頻繁に繰り返されています。

さいわいなことに、HTML5 のフォームを使用すれば、ブラウザーにこのような処理をさせることができます。そして、このような処理は、今後、ブラウザーの役目になるでしょう。HTML5 では、text 属性や長年使用してきた少数の既存の type 属性に加え、13 個の新しい値と、フォーム開発の速度を上げるその他たくさんの属性が input 要素の type 属性に追加されています。今月は、HTML5 フォームで追加される input 要素の新しい type 属性とその他の属性を、さまざまなブラウザーでの実装状況とともに紹介した後、HTML5 フォーム用の新しいクライアント検証機能についての概要を簡単に説明します。
最後に、Visual Studio 2010 と Microsoft .NET Framework 4 の最新の更新プログラムを使って、HTML5 と ASP.NET Web フォームを連動させる方法を取り上げます。また、全体をとおして、古いブラウザーにフォールバック ソリューションを提供しながら、アプリケーションに HTML5 フォームを取り入れる方法について説明します。今回紹介するすべてのデモ (オンラインで閲覧可能) は、WebMatrix という、マイクロソフトが無償で提供している軽量の Web 開発ツールを使用してビルドしています。WebMatrix は、aka.ms/webm で試すことができます。

HTML5 での Input 要素の新しい Type 属性

現在 HTML5 フォームまたは HTML5 Web フォームとして知られている仕様は、HTML5 の登場に先駆けて、Web Hypertext Application Technology Working Group (WHATWG) というグループが作成した Web Forms 2.0 として始まりました。WHATWG の初期仕様の大部分は、今日 HTML5 と呼ばれている仕様の出発点になり、この Web Forms 2.0 での取り組みが、正式な HTML5 仕様 (bit.ly/njrWvZ、英語) の一部になっています。新しい仕様の重要な部分は、input 要素の新しい type 属性とコンテンツ属性です (bit.ly/pEdWFs で確認できます)。

既に説明したように、この仕様では、フォームで使用するため、input 要素に新しく 13 個の type 属性 (search、tel、email、datetime、date、month、week、time、datetime-local、number、range、および color) が導入されています。

これらの新しい type 属性の使い方は簡単です。例として、注文フォームに電子メール フィールドを新しく配置するとします。図 1 に示すように、WebMatrix Bakery Template Web サイトの注文ページには、電子メールなどのフィールドをいくつか追加して変更を加えてあります。

図 1 注文フォームのサンプル

このフォームでは、電子メール フィールドのマークアップは次のようになっています。

<input type="email" id="orderEmail" />

type 属性が "text" ではなく "email" になっていることに注目してください。HTML input 要素の新しい type 属性が最もすばらしい点は、こうした属性を今すぐ使用しても、すべてのブラウザーである程度機能させることができることです。ブラウザーがこれらの新しい type 属性の 1 つを見つけると、次のいずれかの処理を行います。

そのブラウザーが input 要素の新しい type 属性をサポートしていなければ、この type 宣言を認識しません。この場合は、ブラウザーが適切に機能を制限し、その要素を type="text" として処理します。これを試すには、フォームにこの要素を配置して、Internet Explorer 9 F12 ツール コンソールで「document.getElementById(‘orderEmail’).type」と入力します。これらの新しい type 属性は今すぐ使用できます。ブラウザーが特定のフィールドをサポートしていなければ、引き続き通常のテキスト フィールドと同じように処理されます。

しかし、ブラウザーが type 属性を認識する場合、その type 属性を使用することでなんらかの直接的メリットを得ることができます。認識した type 属性により、ブラウザーは属性固有の組み込みの動作を追加します。type 属性が email の場合、Internet Explorer 10 Platform Preview 2 (PP2) 以降を使用すると、入力が自動的に検証されます。つまり、入力した値が有効な電子メール アドレスでなければ、ユーザーにエラー メッセージが表示されます (図 2 参照)。

図 2 ブラウザーでの Email 属性の自動検証

各要素の目的と動作は、その要素の type 属性から簡単に推測できるため、異なるレベルのさまざまな意味合いを難なくフォームに使用することができます。さらに、これらの新しい type 属性には、何も手を加えずに、より豊富な対話操作をブラウザーから提供できる属性もあります。たとえば、次の要素をフォームに配置してから、type 属性の date 属性を完全にサポートしているブラウザーでそのフォームを開くと、従来のプレーンなテキスト ボックスに比べてはるかに充実した対話操作が既定で提供されます。

<input type="date" id="deliveryDate" />

Opera 11.5 では、date 属性は図 3 のように表示されます。最もすばらしい点は、この対話操作の導入に必要な作業が type="date" を指定することだけで、以前は JavaScript で同レベルの機能を実現するのに必要だった手作業をすべてブラウザーが処理することです。

図 3 Opera 11.5 での Date 属性

重要な点は、input 要素におけるこれらの新しい type 属性や検証エラーをブラウザーがどのように表示するかは、HTML5 仕様で規定されていないことです。そのため、ブラウザーによってさまざまな違いが生じる可能性があります。たとえば、Google Chrome 13 では、日付選択カレンダーではなく、図 4 のような日付のスピン コントロールが表示されます (もちろん、この記事を読む頃には変更されている可能性もあります)。datetime、date、color といった要素のブラウザー スタイルおよびローカライズについては、World Wide Web コンソーシアム (W3C) で議論が続いていることもお知らせしておきます。現時点では、ブラウザーがこのような type 属性の実装方法に完全に合意しているわけではなく、既存の実装内に、jQuery UI で見られるような最新のカスタマイズ方法が存在するわけでもありません。新しい type 属性の実装またはテストを試みる場合は、必ず完ぺきなフォールバック ソリューションを提供するようにします。また、ユーザーにとって外観や動作の一貫性が重要な場合は、カスタム スタイルの適用、これらのコントロールにおける既定動作のオーバーライド、またはスクリプト ベース ソリューションの使用が必要になることもあります。

図 4 Google Chrome 13 での date 属性

先ほど、これらのフィールドは、依然として通常のテキスト フィールドとして動作すると説明しました。これは、ブラウザーが提供するグレースフル デグラデーションの優れた部分です。しかし、プレーンなテキスト ボックスとして実装される日付フィールドは扱いにくく、一般にユーザー エクスペリエンスが低いと見なされます。ところが、Modernizr や jQuery UI の手を少し借りると、優れたフォールバック ソリューションと最高の HTML5 フォームを兼ね備えたソリューションを提供できます。

前回の記事 (msdn.microsoft.com/magazine/hh394148) では、Modernizr (modernizr.com、英語) は、ブラウザーが HTML5 機能をサポートしているかどうかを検出するのに役立つ JavaScript ライブラリであると説明しました。今月の例では、Modernizr を使用して HTML5 input 要素の type 属性として date 属性をサポートしているかどうかを検出します。date 属性をサポートしていなければ、jQuery UI (jqueryui.com、英語) の日付選択ウィジェットを使用して date 属性と同等のユーザー エクスペリエンスを提供します。Modernizr、Query、および jQuery UI をダウンロードし、参照を追加したら、コードを数行記述するだけで date 属性のフォールバック サポートを追加できます。

if (!Modernizr.inputtypes.date) {
  $("input[type=date]").datepicker();
}

Internet Explorer 10 PP2 に表示される結果を図 5 に示します。

図 5 jQuery UI による日付フィールドのサポート

HTML5 における Input 要素の新しいコンテンツ属性

HTML5 では、input 要素の新しい type 属性に加えて、検証サポートや拡張機能を入力フィールドに提供できる、便利なコンテンツ属性が新たに導入されます。こうした新しい属性の 1 つが "placeholder" です。仕様によると、placeholder 属性は、「ユーザーのデータ入力を補助することを目的とする "短い" ヒント (1 語または短い語句) を表す」 (強調は原文どおり) とされています。たとえば、注文フォームのいくつかのフィールドに placeholder = "任意のテキスト" を追加します (ここでは、図 6 のようになります)。

<input type="email" id="orderEmail" placeholder="ex. name@domain.com" />
<input type="url" id="orderWebsite" placeholder="ex. http://www.domain.com" />

図 6 入力フィールドでの placeholder 属性の使用

プレースホルダー テキストには、標準のテキストよりも薄い色が使用されます。各フィールドにフォーカスを移動すると、テキストが消えて独自の値を入力できるようになります。

placeholder 属性は、input 要素の新しい type 属性と同様、古いブラウザーではサポートされません。しかし、ユーザーが古いブラウザーで placeholder 属性を適用しているページを閲覧しても何も起こらないため、古いブラウザーのサポートを追加する予定がなくてもこの属性はすぐに使い始めることをお勧めします。placeholder 属性のサポートを "ポリフィル" する場合は、Modernizr が役に立ちます。前回の記事で説明したとおり、Modernizr の有能なスタッフは、特定の HTML5 機能に必要となる可能性のある、実行するポリフィルとフォールバックの一覧をすべて管理しています。この一覧については、bit.ly/nZW85d (英語) を参照してください。

今回の例では、Mike Taylor が作成した jQuery HTML5 Placeholder を使用します (bit.ly/pp9V4s からダウンロードできます)。ダウンロードしたら、ページが参照しているスクリプト ブロックに次のコードを追加します。

Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

ここでは、Modernizr は placeholder 属性がサポートされているかどうかをテストし、サポートされていない場合は html5placeholder.jquery.min.js を読み込みます。その後、jQuery で placeholder 属性を持つすべての要素を選択し、各要素にプラグイン サポートを追加します。これを Internet Explorer 9 で試すと、最終結果は Internet Explorer 10 PP2 で提供されるブラウザーのネイティブ サポートによく似ていることがわかります。

新しい属性の中でもう 1 つ興味深い属性として "autofocus" があります。この属性を 1 つのフォーム フィールドに指定すると、属性名が示すとおり、ページが読み込まれるとそのフィールドに自動的にフォーカスが設定されます。この属性を保持できるのは 1 つのページにつき 1 つのフィールドだけです。複数の要素に autofocus 属性が指定されている場合は、ページの読み込み時にその宣言がある最初の要素にフォーカスが設定されます。今回の注文フォームでは、名前のフィールドにフォーカスを設定するために、次のように属性を追加しています。

<input type="text" class="field" id="orderName" autofocus />

autofocus 属性は、任意のフォーム コントロールに使用可能で、多くの Web 開発者がこれまで奮闘してきた、スクリプトを使い、フォームに重点を置いた方法に優れた代替策を提供します。

HTML5 フォームの検証

今回の記事では、フォーム関連の興味深い新しい属性すべてを説明する余裕がありませんが、"required"、"pattern"、"novalidate"、および "formnovalidate" についてはもう少し説明します。これらはすべて、クライアント側でのフォーム検証を簡略化します。

ブラウザーがサポートしていれば、"required" 属性は、値が未入力の場合はフォームを送信してはいけないことをブラウザーに通知します。たとえば、注文フォームの名前のフィールドに "required" を追加します。

<input type="text" class="field" id="orderName" required />

Internet Explorer 10 PP2 を使用してこのページを閲覧し、フォームを送信しようとすると、図 7 のように表示されます。1 つの属性を指定するだけで、要素のスタイルに赤い罫線を追加し、必須フィールドであることを示すメッセージを表示することを、ブラウザーが認識します。

図 7 フォーム フィールドでの required 属性の使用

先ほど、ユーザーが追加入力をすることなく、特定の type 属性 ("email" や "url" など) をブラウザーが自動検証する方法を図 2 に示しました。"pattern" 属性を使用すると、input 要素の type 属性に独自の検証テストを組み込むことができます。HTML5 の仕様によると、"pattern" 属性は、ブラウザーがフィールドの検証に使用する正規表現を想定します。

今回の注文フォームには、電話番号 (type="tel") フィールドがあり、検証パターンを次のように指定できます。

<input type="tel" id="orderTelephone" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" title="(xxx) xxx-xxxx" />

この (それほど複雑ではない) 正規表現は、かっこで囲んだ市外局番と、ダッシュを付けた 7 桁の市内番号からなる番号を想定するよう、ブラウザーに指示します。これに該当しない値を入力すると、図 8 のようなメッセージが表示されます。このメッセージには、準拠すべき入力書式 ("(xxx) xxx-xxxx") に関する、ユーザーへの指示が含まれてます。メッセージのこの部分は、同じ要素の title 属性から取得されるため、独自のマークアップを使用して検証メッセージの少なくとも一部を制御することが可能です。ただし、検証を支援するために title 属性を使用する際は、注意点が 1 つあります。仕様によると、他の場合、つまりエラーがない場合でもタイトルを表示するよう判断するブラウザーもあります。そのため、この属性をエラーを示すテキストの場所と考えないようにしてください。

図 8 検証の正規表現を指定する pattern 属性の使用

ブラウザーによる自動検証は便利ですが、すぐに疑問が 2 点浮かびます。1 つは、サーバー フレームワーク (たとえば、ASP.NET MVC など) が生成するサーバー検証スクリプトまたはクライアント検証スクリプトはどうなるかという疑問です。もう 1 つは、ユーザーが、フォームを検証しないで実行中の作業を保存できるようにする場合はどうなるかという疑問です。1 つ目の疑問については、残念ながらこの記事で扱う範囲を超えていますが、以前、ASP.NET MVC におけるまったく同じ問題についてブログ記事を書きましたので、bit.ly/HTML5FormsAndMVC (英語) を参考にしてください。

2 つ目の疑問については簡単に解決できます。ユーザーが、(おそらく、最終的にサーバーに送信するまで複数回保存を繰り返し) 送信前にかなりの時間を費やすフォームがあるとしましょう。このように、検証することなくユーザーがフォームを送信できるようにする場合は 2 つの属性を使用できます。1 つは type 属性が "submit" の入力フィールドに配置する "formnovalidate" 属性、もう 1 つは form 要素の開始タグに配置する "novalidate" 属性です。ここで、次のように 2 つの送信フィールドを配置するとします。

<input type="submit" value="Place Order" />
<input type="submit" formnovalidate value="Save for Later" id="saveForLater" />

2 つ目のボタンの "formnovalidate" 属性は、検証を無効にしてフォームを送信します。実行中のユーザーの作業は、データベースに保存したり、クライアント側で localStorage または IndexedDB のような HTML5 の新しいストレージ テクノロジを利用して保存したりすることができます。

HTML5 フォームと ASP.NET Web フォーム

今回のまとめに入る前に、ASP.NET Web フォーム開発者の方に HTML5 フォームに関連する情報をもう少し紹介します。ASP.NET Web フォームを使用して HTML5 フォームの開発をする計画があるのなら朗報があります。.NET および Visual Studio に対する HTML5 関連の更新プログラムは、多くが不定期にリリースされます。したがって、これらの機能を今すぐ使用するのにフレームワークの次期バージョンを待つ必要はありません。

HTML5 フォームおよび ASP.NET Web フォーム作成に取りかかるには、いくつかの更新プログラムを入手する必要があります。まず、Visual Studio 2010 SP1 (https://www.microsoft.com/downloads/ja-jp/details.aspx?familyid=75568aa6-8107-475d-948a-ef22627e57a5&displaylang=ja-nec) がインストールされていることを確認します。インストールすると、HTML5 の input 要素の新しい type 属性およびその他の属性のサポートが追加されるだけでなく、サービス パックによって TextBox サーバー コントロール上で新しい type 属性を使用できるいくつかの更新プログラムも提供されます。この更新プログラムがないと、新しい type 属性を使用する際にコンパイル時エラーが表示されます。

また、Microsoft .NET Framework 4 信頼性更新プログラム 1 (https://www.microsoft.com/downloads/ja-jp/details.aspx?familyid=1933ef44-7255-4de4-b49c-22ed5cdc8cc3&displaylang=ja-nec) も入手しておきます。この更新プログラムは、HTML5 における input 要素の新しい type 属性を ASP.NET Web フォームに使用することで発生する、少数の問題を解決するよう設計されています。こうした問題のいくつか (UpdatePanel、検証コントロール、およびコールバック) については、Scott Hunter が 8 月初めのブログ記事で説明しています。このブログ記事については、bit.ly/qE7jLz (英語) を参照してください。

HTML5 に対応するブラウザーに Web フォームのサポートが加わったことは、世界中の Web 開発者にとって朗報です。セマンティックな一連の input 要素の type 属性をアプリケーションに利用できるだけではありません。新しいブラウザーで機能 (クライアントでの自動検証など) を拡張する一方で、古いブラウザーに悪影響を及ぼすことなくこれらの type 属性をすぐに使用できます。これらの新しいフィールドをすぐに使用することには、モバイル アプリケーションにおいても直接的なメリットがあります。"url" や "email" などの type 属性を使用すると、モバイル デバイスではその属性用に調整したソフト キーボード オプションを表示できます。これらの新機能を、Modernizr および優れたポリフィルのうちの 1 つと組み合わせれば、アプリケーションに今すぐに HTML5 フォームを導入するのに必要なツールがすべて揃います。

Internet Explorer 10 PP2 における HTML5 フォームのサポートの詳細については、ietestdrive.com (英語) を参照してください。また、Internet Explorer Developer Center (bit.ly/r5xKhN) (英語) の開発者向けガイドも必ず確認してください。一般的な HTML5 フォームについてさらに詳しく知りたい方には、Mark Pilgrim 著『HTML5: Up and Running』(O’Reilly Media、2010 年) の「A Form of Madness」および W3C による HTML5 の仕様の Forms セクション (bit.ly/nIKxfE、英語) をお読みになることをお勧めします。

Brandon Satrom は、テキサス州オースティン郊外でマイクロソフトの開発者エバンジェリストとして活躍しています。彼のブログは userinexperience.com (英語) です。Twitter での連絡先は @BrandonSatrom (英語) です。

この記事のレビューに協力してくれた技術スタッフの Jon Box、John Hrvatin、Scott Hunter、および Clark Sell に心より感謝いたします。