HTML5 のフォーム機能

はじめに

HTML5 は、もっと書きやすく、ずっと強力で、そして一貫性のある、新しい Web フォーム機能を数多くもりこんでいます。この記事では導入された新しいフォームコントロールや新しいフォーム関連機能について概要を紹介します。

どうして新しいフォーム機能が必要なの？

はっきり言いましょう。HTML のフォームはとても厄介なものでした。マークアップは楽しくなく、スタイルも ― とくにサイトのルック＆フィールに合わせながら、クロスブラウザで見た目を一貫させる作業は困難でした。フォームを使いやすく、アクセシブルにしようと丁寧に作ったところで、エンドユーザーにとって入力しづらく、いらいらするものになる可能性だってあるのです。良いフォームをつくることは、気持ちのよいユーザーエクスペリエンスよりも、悪影響を抑えることにあるのです。

HTML 4.01 が勧告されたとき、Web はほとんど静的な場所でした。もちろん、コメントフォームやゲストブックなどはありましたが、当時の Web サイトは一般的に、読み物としての性質しかありませんでした。それから Web は進化しました。ブラウザはすでに多くの人にとって、デスクトップアプリケーションのような体験を提供する、複雑な Web ベースのアプリケーションへの窓口になっています。

図1: JavaScript で作られた、ネイティブではない複雑なフォームコントロール

複雑な Web アプリケーションには、より洗練されたフォームコントロールが欠かせません。開発者は JavaScript ライブラリや JavaScript フレームワーク（jQuery UI や YUI）を利用してきました。JavaScript によるフォームコントロールは成熟しましたが、これらは本質的に、HTML フォームの限界を埋め合わせするだけのワークアラウンドなのです。デートピッカーやスライダーなど複雑なウィジェットは、必ずしも意味が通るわけではない、付加的なマークアップと、多くの JavaScript をページに被せた「にせもの」なのです。

HTML5 は広く使われているリッチなフォームコントロールを標準化し、ブラウザによってネイティブに表示されるようにします。これにより、スクリプトを多用するワークアラウンドを減らせます。

この記事で使うサンプル

新しい機能を紹介するため、この記事では HTML5 フォームのサンプルを用意しました。このサンプルは「リアル」なフォームを意図していません。この記事で紹介するすべての機能を詰め込んだフォームが存在するなんて、想像がつきませんよね。しかし、新しい機能がどう見えて、どう動くのかを知るにはとてもよいサンプルです。

注：フォームコントロールやバリデーションメッセージのルック＆フィールはブラウザごとに違います。ですから、新しいフォームを一貫した見た目にするにあたり、十分に考えないといけません。

新しいフォームコントロール

フォームは Web アプリケーションの主要なデータ入力ツールです。得たいデータがより複雑になるにつれ、より高機能なフォーム入力要素の必要性が叫ばれるようになりました。加えて、より深い意味と良い定義を持つデータの収集方法、易しくより効果的なエラー管理と検証機能も求められました。

<input type="number">

最初に取り上げる新しい input 型は type="number" です。

<input type="number" … >

この新しい型は、数値入力のための入力フィールドを生成します。この型をサポートするブラウザの多くでは、テキスト入力フィールドに値を増減できるスピナーコントロールが組み合わされたものが表示されます。

図2: number 型

<input type="range">

スライダーコントロールは、ある範囲内の値を選択させる際に使われますが、これは複雑で、マークアップに意味が伴ってないものでした。しかし HTML5 では簡単です。range 型を使えばいいだけですから。

<input type="range" … >

図3: range 型

注意したいのが、このコントロールは通常、現在選択されている値をはおろか、値の選択範囲も表示してくれません。このため制作者は他の手法でそれらを提供しなければいけません。たとえば、現在の値を表示するのであれば、<output> 要素と JavaScript を使用し、ユーザーがフォームを更新した際に表示を更新する、といったことができるでしょう。

<output onforminput="value=weight.value"></output>

<input type="date"> と他の日付・時刻コントロール

HTML5 は日付・時刻を選択する input 型を数多く用意しています。たとえば、デートピッカーは飛行機や電車の予約サイトなどで必ずといっていいほど見るものです。しかしこれらのコントロールの実装はこれまで、マークアップが意味をなさないその場しのぎな方法で作られていました。標準的な方法が用意され、簡単に実現できるようになったことは歓迎すべきでしょう。

<input type="date" … >
<input type="time" … >

上記のコードはそれぞれ、完全に機能するデートピッカーと、時分秒の区切りを持ち時刻を入力するためのテキストフィールドを表示します（時分秒の区切りは step 属性の値によって変化します）。

図4: 日付と時刻の input 型

日付・時刻関連の input 型はこれだけにとどまりません。他にもいくつかの型が用意されています。

datetime: 上で説明した機能が組み合わさったもの、つまり日付と時刻どちらをも選択します。
month: 年と月を選択します。内部的には 2013-03 といった形で値が保持されますが、ブラウザによっては凝ったデザインの入力方法を用意しているかもしれません。たとえば、年と月をそれぞれスクロールさせるようなものです。
week: 週を選択します。内部的には 2010-W37 といったフォーマット（2010年の第37週を表します）として保持され、日付選択のデートピッカーによく似たインターフェースで選択します。

<input type="color">

この input 型はカラーピッカーを呼び出します。Opera の実装ではユーザーがあらかじめ用意された色から選択できたり、テキストフィールドに16進数値を入力できたり、OS ネイティブなカラーピッカーを呼び出せたりします。

図5: color 型と、Windows, OS X のネイティブなカラーピッカー

<input type="search">

search 型は基本的に、見た目が違うテキストフィールドでしかありません。ブラウザはこの型に、OS 固有の検索機能と同じ見た目を提供することが期待されています。しかし、見た目が違うこと以外にも重要性はあるでしょう。検索フィールドだと明示的に示すことで、ブラウザや支援技術、クローラーが何か賢いことをしてくれるかもしれません。たとえば、ブラウザがユーザーにサイト内検索のためのカスタムサーチ機能を提供できたりもするでしょう。

図6: search 型の OS X での見た目

<datalist> 要素と list 属性

これまで、ユーザーに何か選択させたいときは、<select> 要素と <option> 要素でドロップダウンリストを作るしかありませんでした。では、おすすめの選択肢が提示され、さらにユーザーが自由に入力できるリストはどうでしょうか？これを実現するには、細々としたスクリプトが必要でした。しかし、HTML5 では list 属性を使って、<datalist> 要素内に定義した選択肢のリストをフォームコントロールに結びつけられるようになりました。

<input type="text" list="mydata" … >
<datalist id="mydata">
    <option label="Mr" value="Mister">
    <option label="Mrs" value="Mistress">
    <option label="Ms" value="Miss">
</datalist>

図7: datalist 要素によるプリセットオプションつきの input 要素をつくる

<input type="tel">, <input type="email">, <input type="url">

名前が示す通り、これらの input 型はそれぞれ、電話番号、メールアドレス、URL に関するものです。ブラウザはこれらを普通のテキストフィールドのように表示しますが、これらのフィールドがどのようなテキストを求めているかは、クライアントサイドのフォーム検証において重要な役割を果たします。加えて、いくつかのモバイルデバイスにおいて、ブラウザはテキスト入力のためのオンスクリーンキーボードを、通常のものから、より状況に即したキーボードに変更します。さっきも言いましたが、未来のブラウザはこれら明示的な意味を持った入力フィールドをいま以上に有効活用した機能を追加するのではないでしょうか。たとえば、ユーザーの連絡帳を元にしたメールアドレスや電話番号のオートコンプリートなどが考えられます。

新しい属性

HTML5 は新しい input 型に加えて、新しい属性もいくつか追加しています。新しい属性によって、フォームでよく使われる行いをシンプルにしたり、入力フィールドの想定する値を指定できもします。

placeholder 属性

Web フォームでよく見られるユーザビリティの飾りとして、テキストフィールドのプレースホルダがあります。プレースホルダはたとえば、ユーザーに入力してほしい情報の種類についてより詳しく説明したい場合などに使われます。プレースホルダは、フォームに何か入力されたとき、もしくはフォームコントロールがフォーカスされた時に消えます。このテクニックはこれまで、JavaScript を使用し、ユーザーが何も入力していない際はテキストを表示しておいて、フォーカス時にテキストフィールドの内容を空にするといった方法で実現されていました。これからは、placeholder 属性にテキストを書くだけです。

<input type="text"… placeholder="John Doe">

図8: placeholder 属性でプレースホルダが指定されたテキストフィールド

autofocus 属性

スクリプトに頼らざるを得なかった機能は他にもあります。ページが読み込まれた時に、自動的にフォームフィールドにフォーカスを当てるものです。これからは、autofocus 属性を書くだけでよくなります。

<input type="text" autofocus … >

autofocus はひとつのページに一箇所でしか使えないことに注意してください。また、この機能を使うかどうかも、慎重に検討してください。この属性は、ページの主要となる領域でフォームが使われてるような状況でつかうべきです。たとえば、検索ページが良い例です。内容や、説明的なテキストが少ないため、検索フォームのテキストフィールドへ自動的にフォーカスさせるのは理にかなっていると言えます。

min 属性と max 属性

名前が示すとおり、これらの属性は数値を入力するフィールドに対し、その下限と上限を指定する属性です。数値を入力するフィールドには number 型、range 型、time や date 型などがあります（そう、日付にも上限と下限を指定できるんです。たとえば旅行予約フォームで、未来の日付しか選択できないようにさせられます）。range 型において、min と max は必要です。なぜなら、フォームが送信された時の値を決定する際にこれらの値が欠かせないからです。属性の指定はとても簡単で、コードを見れば一目瞭然です。

<input type="number" … min="1" max="10">

step 属性

step 属性は数値を入力するフィールドに対し、入力できる値の細かさを設定します。たとえば、時刻を入力するフォームで、30分単位で入力させたいとします。このとき使うのが step 属性です。ひとつ注意したいのが、time 型は値を秒で指定することでしょうか。

<input type="time" … step="1800">

新しい表示の仕組み

HTML5 では、操作するようなフォームコントロールではなく、情報を視覚的に表示するための新しい要素もいくつか定義されています。

<output>

range 型を紹介した際にこの <output> 要素について触れましたが、この要素は計算結果を表示するため、あるいはスクリプトの出力結果を明示的に提供するための要素です（ただむやみに span や div にテキストを突っ込んだりしないということです）。ある <output> がどのフォームコントロールに関連しているかをさらに明示的にするため、<label> と同じように、要素の for 属性に、関連するフォーム要素の ID を列挙できます。

<input type="range" id="rangeexample" … >
<output onforminput="value=rangeexample.value" for="rangeexample"></output>

<progress> と <meter>

これら2つの新要素はとても似ています。どちらもユーザーに対し、ゲージもしくはバーを表示します。違いは、その利用目的です。名前が示す通り、<progress> はプログレスバーを表し、何らかのタスクの進行状況をパーセンテージで示します。一方、<meter> は、一般的なscalar measrement or fractional value を表します。

図9: 進行状況を示すプログレスバー

フォームの検証

フォームの検証はクライアントサイド、サーバーサイド共にとても重要です。ユーザーがフォームの入力で間違えないように手助けし、また悪意のあるユーザーがアプリケーションに害を及ぼすデータを送信できないようにしなければいけません。HTML5 によりブラウザは、フォームコントロールがどのような値が想定されているかをコントロール自身から（type や数値、日付、時刻などに設定された上限・下限を通して）知ることができるようになりました。あわせて、フォーム検証機能をブラウザ側で提供できるようになりました。これによって、これまで行なっていた、大量の JavaScript を書くことや、できあいの検証スクリプト/ライブラリを使うといった、うんざりするようなことから離れられます。

注：フォームへ入力された値を検証させるには、コントロールに name 属性が必要です。name 属性がない場合、そのコントロールに入力されたデータはフォームの情報とならず、送信されません。

required 属性

フォームの検証で最も多く使われるもののひとつに、入力必須フィールドがあります。特定の情報が入力されなければフォームを送信させないというものです。この入力必須フィールドも、HTML5 では required 属性をつけるだけで済みます。この属性は input, select, textarea 要素に指定できます。

<input type="text" ... required>

図10: Opera のクライアントサイドフォーム検証。何も入力されていない入力必須フィールドにエラーを表示している。

type 属性と pattern 属性

HTML5 の新しい型によって、フォームフィールドがどのような種類の情報を期待しているかを指定できるようになりました。ただのテキストフィールドではなく、数値、メールアドレス、URL といったものを指定できます。クライアントサイドの検証機能のひとつとして、ブラウザはユーザーが入力した内容が、そのフィールドが固有に持つ、期待された値の構造にマッチするかを調べられるようになりました。ブラウザは入力された値を、フィールドが valid となると定義された組み込みのパターンに対して評価し、条件にマッチしない入力項目に対してはユーザにその旨を提示します。

図11: email 型のフィールドに、適切でない値を入れた際に Opera が表示するエラーメッセージ。

ただのテキストフィールドでも、特定の構造にマッチさせたい場合があるでしょう。たとえば、ログインフォームにおいて、ユーザ名は小文字と数値の限定的な組み合わせしか使えないといった場合です。このような場合には、pattern 属性に正規表現を指定すれば、独自の検証内容を設けられます。

<input type="text" ... pattern="[a-z]{3}[0-9]{3}">

ブラウザのサポート状況

PC ブラウザでは、Opera が新しい input 型、ネイティブクライアントサイド検証に最も多く対応しています。しかし、他の主要ブラウザでもサポートが進んでいる最中ですので、パワフルなこれらの新しい機能をプロジェクトで使えるまでにはそこまで時間がかからないでしょう。では、古いブラウザについてはどうでしょうか？

ブラウザはその設計において、input 型を理解できない場合は、ふつうのテキストフィールドとして扱うようになっています。HTML5 の機能と比べると、ユーザーにやさしくはありませんが、フォームに値を入力できないといったことはありません。