HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。
このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。
<input> 要素
<input>type 属性に新しい値が追加されました。
search: 検索フィールドを表します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。tel: 電話番号を入力します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。これは電話番号の表記が国によって異なることにあります。ユーザーが入力する値に制約を与えたい場合はpattern属性やmaxlength属性を利用できます。url: URL を入力します。改行や値の最初と最後に空白が入力されると自動的に取り除かれます。-
email: メールアドレスを入力します。改行が入力されても自動的に取り除かれます。非妥当なメールアドレスが入力されるとフォームは送信されません。メールアドレスの形式は、次の ABNF 記法1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )を満たさなければなりません（atextは RFC 5322 の section 3.2.3 で、ldh-strは RFC 1034 の section 3.5 で定義されています）。
<input> 要素には新しい属性も追加されています。
list:<datalist>要素の ID を指定します。datalist要素の内容は<option>要素で、この内容がフィールドのサジェスト領域にヒントとして表示されます。pattern: フィールドがとりうる値の入力形式を正規表現で記述します。この属性はtype属性がtext,tel,search,url,emailのいずれかである場合に利用可能です。formmethod: 送信時の HTTP メソッド (GET もしくは POST) を指定します。この属性は<form>要素のmethod属性を上書きします。formmethod属性はtype属性がimageもしくはsubmitの場合に利用可能です。x-moz-errormessage: 検証を通らなかった際に表示されるテキストを指定します。この属性は Mozilla の固有拡張であり、非標準なものです。
<form> 要素
<form> 要素に新しい属性が追加されました。
novalidate: フォーム送信時に実行される検証機能を無効化します。
<datalist> 要素
<datalist> 要素は <option> 要素を内容に持つ、<input> フィールドのサジェストを定義します。
<input> 要素の list 属性から、特定の <datalist> 要素を指定します。
<output> 要素
<output>
for 属性を使って、output 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。for 属性の値は計算に利用する要素の ID を空白で区切り入力します。
Gecko 2.0 では <output> 要素に任意のフォーム検証とエラーメッセージを定義でき、また :invalid, :valid, :-moz-ui-invalid, :-moz-ui-valid といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。
placeholder 属性
<input><textarea>placeholder 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。
autofocus 属性
autofocus 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。autofocus 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、<input><button><select><textarea>autofocus 要素の type 属性が hidden を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。
label.control DOM プロパティ
HTMLLabelElement DOM インターフェースは HTML の <label>control プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の for 属性もしくは要素の最初の子孫コントロール要素から決定されます。
フォーム検証
HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。
<input> 要素に title 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ (x-moz-errormessage 属性もしくは setCustomValidity() メソッドで指定) が使用されます。
<button> 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は :-moz-submit-invalid 擬似クラスを利用してください。フォーム検証の HTML 構文
次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。
<input>,<select>,<textarea>要素のrequired属性は、その要素が入力必須なことを示します。(<input>要素の場合、type属性の値によって適用可能かどうかが異なります。)<input>要素のpattern属性は、入力された値がとりうるべき値の形式を正規表現で指定します。<input>要素のmin,max属性は、要素に入力可能な値の最小値/最大値を指定します。<input>要素のstep属性は、(min,max属性と使うことで) 入力可能な値の粒度に制約を設けます。指定可能な値にそぐわない値が入力された場合、その値は検証を通りません。<input>,<textarea>要素のmaxlength属性は、ユーザーがそのフィールドに入力できる最大文字数 (Unicode のコードポイント) を指定します。type属性の値url,emailは、入力された値がそれぞれ妥当な URL、もしくはメールアドレスなのかを検証します。
<form> 要素の novalidate 属性、<button> 要素の formnovalidate 属性、type に submit もしくは image を持つ <input> 要素の formnovalidate 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。
フォーム検証 API
次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。
HTMLFormElementオブジェクトのcheckValidity()メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合にtrueを、そうでない場合はfalseを返します。- フォーム連携要素に、次のプロパティとメソッドが用意されています。
willValidateプロパティは、要素が制約の設定対象ではない場合にfalseを返します。validityプロパティは、要素の妥当性状態を表すValidityStateオブジェクトを返します。validationMessageプロパティは、制約を満たせない場合その要素に関連するメッセージを返します。checkValidity()メソッドは、その要素が制約を満たせない場合にfalseを、そうでない場合はtrueを返します。setCustomValidity()メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。