mozilla
Your Search Results

    Forms in HTML5

    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 で定義されています)。

      Note: multiple 属性がこの <input> 要素に指定された場合、複数のメールアドレスをカンマで区切り入力することができます。しかし、この機能はまだ Firefox に実装されていません。

    <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() メソッドで指定) が使用されます。

    Note: フォームの検証はフォーム中の <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 属性、typesubmit もしくは image を持つ <input> 要素の formnovalidate 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。

    フォーム検証 API

    次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。

    • HTMLFormElement オブジェクトの checkValidity() メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合に true を、そうでない場合は false を返します。
    • フォーム連携要素に、次のプロパティとメソッドが用意されています。
      • willValidate プロパティは、要素が制約の設定対象ではない場合に false を返します。
      • validity プロパティは、要素の妥当性状態を表す ValidityState オブジェクトを返します。
      • validationMessage プロパティは、制約を満たせない場合その要素に関連するメッセージを返します。
      • checkValidity() メソッドは、その要素が制約を満たせない場合に false を、そうでない場合は true を返します。
      • setCustomValidity() メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。

    ドキュメントのタグと貢献者

    Contributors to this page: Taken, myakura, ethertank
    最終更新者: ethertank,