1. 4.10.17 フォームコントロールのインフラストラクチャ
        1. 4.10.17.1 フォームコントロールの値
        2. 4.10.17.2 可変性
        3. 4.10.17.3 コントロールとフォームの関連付け
      2. 4.10.18 フォームコントロールの共通属性
        1. 4.10.18.1 名前フォームコントロール:name属性
        2. 4.10.18.2 要素の方向を送信する:dirname属性
        3. 4.10.18.3 ユーザー入力長さの制限:maxlength属性
        4. 4.10.18.4 最小入力長の要件を設定する:minlength属性
        5. 4.10.18.5 フォームコントロールの有効化および無効化:disabled属性
        6. 4.10.18.6 フォーム送信属性
        7. 4.10.18.7 オートフィル
          1. 4.10.18.7.1 オートフィルフォームコントロール:autocomplete属性
      3. 4.10.19 テキストフィールド選択のためのAPI
      4. 4.10.20 制約
        1. 4.10.20.1 定義
        2. 4.10.20.2 制約検証API
        3. 4.10.20.3 セキュリティ
      5. 4.10.21 フォームの送信
        1. 4.10.21.1 URLエンコードフォームデータ
        2. 4.10.21.2 マルチパートフォームデータ
        3. 4.10.21.3 プレーンテキストフォームデータ
        4. 4.10.21.4 SubmitEventインターフェイス
        5. 4.10.21.5 FormDataEventインターフェイス

4.10.17 フォームコントロールのインフラストラクチャ

4.10.17.1 フォームコントロールの値

多くのフォームコントロールは、checkednessを持つ。(後者は、input要素によってのみ使用される。)これらは、ユーザーがコントロールと対話する方法を記述するために使用される。

コントロールのはそのコントロールの初期状態である。それ自体は、ユーザーの現在の入力と一致しないかもしれない。

たとえば、ユーザーが数字を期待する数値フィールドに単語"three"を入力する場合、ユーザーの入力は文字列"three"であるがコントロールのは変わらないままとなる。また、ユーザーがeメールフィールドに(先頭の空白文字とともに)電子メールアドレス"  awesome@example.com"を入力する場合、ユーザーの入力は文字列"  awesome@example.com"であるが、eメールフィールドに対するブラウザーのUIは(先頭の空白文字なしで)"awesome@example.com"のに直すかもしれない。

inputおよびtextarea要素は、ダーティー値フラグを持つ。これは、とデフォルト値の間の相互作用を追跡するために使用される。falseである場合、valueはデフォルト値を反映する。trueである場合、デフォルト値は無視される。

input要素のmultiple属性に直面する制約バリデーションの動作を定義するために、input要素はまた、別々に定義された複数のを持つことができる。

maxlength属性とminlength属性の動作、およびtextarea要素に固有の他のAPIの動作を定義するために、をもつすべてのフォームコントロールにもAPI値を取得するためのアルゴリズムがある。デフォルトでは、このアルゴリズムは単にコントロールのを返すだけである。

select要素はを持たない。そのoption要素のselectednessが代わりに使用されるものである。

4.10.17.2 可変性

フォームコントロールはmutableとして指定することができる。

これは、ユーザーがフォームコントロールのまたはcheckednessを変更できるかどうか、またはコントロールを自動的に事前入力できるかどうかを(要素が指定されようとなかろうと依存する本仕様での定義及び要件によって)判定する。

4.10.17.3 コントロールとフォームの関連付け

フォーム関連要素は、要素のフォーム所有者と呼ばれるform要素との関係を持つことができる。フォーム関連要素form要素に関連付けられない場合、そのフォーム所有者はnullであると言われる。

フォーム関連要素は、関連するパーサー挿入フラグを持つ。

Attributes#attr-form

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
caniuse.com table

デフォルトで、フォーム関連要素がその祖先form要素に関連付けられるが、listedである場合、これを上書きするためにform属性を指定されてもよい。

この機能は、著者がネストされたform要素に対するサポートの不足を回避することができる。

listedフォーム関連要素が指定されたform属性を持つ場合、その属性の値は、その要素のツリーform要素のIDでなければならない。

element . form

HTMLObjectElement/form

Support in all current engines.

Firefox1+Safari6+Chrome46+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android46+WebView Android46+Samsung Internet5.0+Opera AndroidYes

HTMLSelectElement/form

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

要素のフォーム所有者を返す。

存在しない場合nullを返す。

4.10.18 フォームコントロールの共通属性

4.10.18.1 名前フォームコントロール:name属性

nameコンテンツ属性は、フォームの送信form要素のelementsオブジェクトで使用されるような、フォームコントロールの名前を与える。属性が指定される場合、その値は空の文字列またはでisindexあってはならない。

多くのユーザーエージェントは歴史的に、名前isindexをもつフォームの最初のテキストコントロールを特別にサポートしており、この仕様は以前に関連するユーザーエージェント要件が定義されていた。しかし、一部のユーザーエージェントは、その後、その特別なサポートを削除し、関連する要件はこの仕様から削除された。よって、レガシーユーザーエージェントで問題のある再解釈を避けるために、isindexという名前はもはや許可されない。

isindex以外で、nameに対して任意の空でない値が許可される。名前_charset_は特別である:value属性のないHiddenコントロールの名前として使用される場合、送信の間value属性は送信文字エンコーディングから成る送信の間の値を自動的に与えられる。

DOMの上書きは、よくあるセキュリティの問題の原因である。nameコンテンツ属性で組み込みフォームプロパティの名前を使用することを避ける。

この例において、input要素は組み込みmethod のプロパティを上書きする:

let form = document.createElement("form");
let input = document.createElement("input");
form.appendChild(input);

form.method;           // => "get"
input.name = "method"; // DOM clobbering occurs here
form.method === input; // => true

入力名は組み込みのフォームプロパティよりも優先されるため、JavaScript参照form.methodは組み込みのmethodプロパティの代わりに"method"という名前のinput要素を指す。

4.10.18.2 要素の方向を送信する:dirname属性

dirname属性は要素の方向の送信を有効にし、フォーム送信の間にこの値を含むコントロール名を与える。そのような属性が指定される場合、その値は空文字列であってはならない。

この例において、フォームはテキストコントロールと送信ボタンを含む:

<form action="addcomment.cgi" method=post>
 <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

ユーザーがフォームを送信するとき、ユーザーエージェントは、"comment"、"comment.dir"、"mode"と呼ばれる3つのフィールドを含む。よって、ユーザーが"Hello"を打ち込んだ場合、送信ボディはこのようになるかもしれない:

comment=Hello&comment.dir=ltr&mode=add

ユーザーが手動で右から左へ記述方向に切り替え、"مرحبًا"を入力した場合、送信本体はこのようになるかもしれない:

comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl&mode=add
4.10.18.3 ユーザー入力長さの制限:maxlength属性

ダーティ値フラグによって制御される、フォームコントロールmaxlength属性は、ユーザーが入力できる文字数の制限を宣言する。"文字数"は、長さを使って測定され、そして、textarea要素の場合は、すべての改行が1文字に正規化される(CRLFの対とは対照的に)。

要素がフォームコントロールmaxlength属性を指定される場合、属性値は妥当な非負の整数でなければならない。属性が指定され、数をもたらすその値に非負整数を解析するための規則を適用する場合、その数は要素の最大許容値の長さである。属性を省略する、またはその値を解析しエラーとなる場合、最大許容値の長さは存在しない。

4.10.18.4 最小入力長の要件を設定する:minlength属性

ダーティ値フラグによって制御されるフォームコントロールminlength属性は、ユーザーが入力できる文字数の下限を宣言する。"文字数"は、長さを使って測定され、そして、textarea要素の場合は、すべての改行が1文字に正規化される(CRLFの対とは対照的に)。

minlength属性はrequired属性を暗示しない。フォームコントロールがminlength属性を一切持たない場合、値は依然として省略できる。minlength属性は、ユーザーがすべて値を入力した後にのみ蹴る。空文字列が許可されない場合、required属性も設定する必要がある。

要素がフォームコントロールminlength属性を指定される場合、属性値は妥当な非負の整数でなければならない。属性が指定され、数をもたらすその値に非負整数を解析するための規則を適用する場合、その数は要素の最小許容値の長さである。属性を省略する、またはその値を解析しエラーとなる場合、最小許容値の長さは存在しない。

要素が最大許容値の長さ最小許容値の長さの両方を持つ場合、最小許容値の長さ最大許容値の長さ以下でなければならない。

この例において、4つのテキストコントロールが存在する。1つめは必須であり、少なくとも5文字である必要がある。他の3つは任意だが、ユーザーは1つを記入する場合、ユーザーは少なくとも10文字を入力する必要がある。

<form action="/events/menu.cgi" method="post">
 <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
 <p><label>Describe what you would like for breakfast, if anything:
    <textarea name="breakfast" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for lunch, if anything:
    <textarea name="lunch" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for dinner, if anything:
    <textarea name="dinner" minlength="10"></textarea></label></p>
 <p><input type=submit value="Submit Request"></p>
</form>
4.10.18.5 フォームコントロールの有効化および無効化:disabled属性

disabledコンテンツ属性は、真偽属性である。

option要素に対するdisabled属性およびoptgroup要素に対するdisabled属性は、別々に定義されている。

フォームコントロールは、次の条件のいずれかが満たされている場合に無効になる:

  1. 要素がbuttoninputselecttextareaまたはform-associated custom element要素であり、かつ(その値に関わらず)この要素にdisabled属性が指定される。
  2. 要素がdisabled属性が指定されるfieldset要素の子孫であり、かつもしあればそのfieldset要素の所有する最初のlegend要素の子に属する子孫でない
4.10.18.6 フォーム送信属性

Element/form#Attributes_for_form_submission

Support in all current engines.

Firefox4+Safari10.1+Chrome10+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS10.3+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android14+
caniuse.com table

フォーム送信のための属性は、form要素上と送信ボタン上(フォーム送信ボタンを表す要素、たとえば、type属性のinput要素がSubmit Button状態にある)の両方を指定できる。

form要素で指定されてもよいフォーム送信のための属性は、actionenctypemethodnovalidatetargetである。

送信ボタンで指定されてもよい対応するフォーム送信のための属性は、formactionformenctypeformmethodformnovalidateformtargetである。省略した場合、これらはform要素の対応する属性で指定された値をデフォルトとする。


指定される場合、actionおよびformactionコンテンツ属性は、潜在的にスペースで囲まれた妥当な空でないURLである値を持たなければならない。

要素が送信ボタンでありかつそのような属性を持つ場合、要素のactionはその要素のformaction属性値である。すなわちactionがそのような属性を持つ場合、そのフォーム所有者action属性値であり、そうでなければ空文字列である。


methodおよびformmethodコンテンツ属性以下のキーワードおよび状態をもつ列挙属性である:

これら属性に対する無効値のデフォルトは、GET状態である。method属性の対する欠損値のデフォルトもまたGET状態である。(formmethod属性に対する欠損値のデフォルトまたは不正値のデフォルトは存在しない。)

要素のメソッドはこれらの状態のいずれかである。要素が送信ボタンでありかつformmethod属性を持つ場合、要素のメソッドはその属性の状態である。そうでなければ、フォーム所有者method属性状態である。

ここで検索クエリがURLに提出されるように、method属性は明示的にデフォルト値"get"を指定するために使用される:

<form method="get" action="/search.cgi">
 <p><label>Search terms: <input type=search name=q></label></p>
 <p><input type=submit></p>
</form>

一方で、ユーザーのメッセージがHTTPリクエストのボディに送信されるように、ここでmethod属性は、値"post"を指定するために使用される:

<form method="post" action="/post-message.cgi">
 <p><label>Message: <input type=text name=m></label></p>
 <p><input type=submit value="Submit message"></p>
</form>

この例において、formdialogとともに使用される。フォームの送信時に、method属性の"dialog"キーワードは、自動的に閉じるダイアログを持つために使用される。

<dialog id="ship">
 <form method=dialog>
  <p>A ship has arrived in the harbour.</p>
  <button type=submit value="board">Board the ship</button>
  <button type=submit value="call">Call to the captain</button>
 </form>
</dialog>
<script>
 var ship = document.getElementById('ship');
 ship.showModal();
 ship.onclose = function (event) {
   if (ship.returnValue == 'board') {
     // ...
   } else {
     // ...
   }
 };
</script>

enctypeおよびformenctypeコンテンツ属性は、次のキーワードおよび状態をもつ列挙属性である:

これら属性に対する無効値のデフォルトは、application/x-www-form-urlencoded状態である。enctype属性に対する欠損値のデフォルトはまた、application/x-www-form-urlencoded状態である。(formenctype属性に対する欠損値のデフォルトは存在しない。)

要素のenctypeはこれらの状態のいずれかである。要素が送信ボタンでありかつformenctype属性を持つ場合、要素のenctypeはその属性の状態である。そうでなければ、フォーム所有者enctype属性状態である。


指定される場合、targetおよびformtargetコンテンツ属性は、妥当なコンテンツ名またはキーワードである値を持たなければならない。


novalidateおよびformnovalidate属性は真偽属性である。存在する場合、フォームが送信時に検証されないことを示す。

要素が送信ボタンでありかつ要素のformnovalidate属性が存在する場合、または要素のフォーム所有者novalidate属性が存在する場合、要素のno-validate stateはtrueである。そうでなければfalseである。

属性がフォームでデータを完全に入力していないにもかかわらず、ユーザーが自分の進捗状況を保存できるように、この属性は検証の制約を持つフォーム上のボタン"保存"を含めると便利である。次の例は、2つの必須フィールドを持つ単純なフォームを示す。3つのボタンがある。1つは、両方のフィールドに値が入力されている必要があるフォームを提出するためのもの、1つはユーザーが戻ってきて、後で埋めることができるようにフォームを保存するためのもの、1つは完全にフォームをキャンセルするためのものである。

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>
4.10.18.7 オートフィル

Attributes/autocomplete

FirefoxYesSafari?Chrome66+
OperaYesEdge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidYesSafari iOS?Chrome Android66+WebView Android66+Samsung Internet9.0+Opera AndroidYes
caniuse.com table
4.10.18.7.1 オートフィルフォームコントロール:autocomplete属性

ユーザーエージェントは、たとえば以前のユーザー入力に基づくユーザーのアドレスを事前に入力するなど、ユーザーにフォームの記入を助けるための機能を持つこともある。autocompleteコンテンツ属性は、ユーザーエージェントへのヒントの手段に、または実際にそのような機能を提供するかどうかに使用できる。

この属性が使用される2つの状態が存在する。オートフィル予想マントの着用時、autocomplete属性は、入力がユーザーから予想されるものについて説明する。オートフィルアンカーマントの着用時、autocomplete属性は、指定された値の意味を説明する。

type属性がHidden状態にあるinput要素では、autocomplete属性は、オートフィルアンカーマントを着用する。他のすべての場合で、オートフィル予想マントを着用する。

オートフィル予想マントを着用時、autocomplete属性が指定される場合、文字列"off"とマッチするASCII大文字・小文字不区別である単一のトークン、または文字列"on"とマッチするASCII大文字・小文字不区別である単一のトークン、またはオートフィル詳細トークンののいずれかから成る順序付きスペースで区切りトークンの集合である値を持たなければならない。

オートフィルアンカーマントを着用時、autocomplete属性が指定される場合、ちょうどオートフィル詳細トークンから成る順序付きスペースで区切りトークンの集合の値を持たなければならない(すなわち、"on"と"off"キーワードが許可されない)。

オートフィルの詳細トークンは下記の順序で、次のとおり:

  1. 任意で、フィールドが名前グループに属することを意味する、最初の8文字が文字列"section-"とASCII大文字・小文字不区別で一致するトークン。

    たとえば、フォームで2つの配送先住所がある場合、次のようにマークアップできる:

    <fieldset>
     <legend>Ship the blue gift to...</legend>
     <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
     <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
     <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
    </fieldset>
    <fieldset>
     <legend>Ship the red gift to...</legend>
     <p> <label> Address:     <textarea name=ra autocomplete="section-red shipping street-address"></textarea> </label>
     <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level2"> </label>
     <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
    </fieldset>
  2. 任意で、以下の文字列のいずれかとASCII大文字・小文字不区別で一致するトークン:

  3. 次の2つのオプションについていずれか:

先に述べたように、属性およびそのキーワードの意味は属性が着用するマントに依存する。

オートフィル予想マント着用時は

"off"キーワードは、コントロールの入力データが特にセンシティブ(たとえば、核兵器のアクティベーションコード)である、またはキーワードが再利用されることのない値(たとえば、銀行のログインのためのワンタイムキー)であり、したがってユーザーは、値を事前入力するためにユーザーエージェントを当てにできる代わりに、明示的にデータを毎回入力する必要がある、または文書は独自のオートコンプリートのメカニズムを提供し、ユーザーエージェントに自動補完値を提供したくないことのいずれかを示す。

"on"キーワードは、ユーザーエージェントが、オートコンプリート値をユーザーに提供することを許可するが、ユーザーが入力すると予想されるだろうデータの種類についてのさらなる情報を提供しないことを示す。ユーザーエージェントは、自動補完が提案する値を決定するためにヒューリスティックを使用する必要があるだろう。

上記のオートフィルフィールドは、ユーザーエージェントがオートコンプリート値をユーザーに提供することができ、かつどの値の種類が期待されるかを指定することを示す。そのような各キーワードの意味は、以下の表に記載される。

autocomplete属性が省略される場合、要素のフォーム所有者autocomplete属性に関する状態に対応するデフォルト値が("on"または"off"のいずれか)の代わりに使用される。フォーム所有者が存在しない場合、値"on"が使用される。

オートフィルアンカーマントを着用時

上記のオートフィルフィールドは、指定される値の特定の種類の値が、この要素のために提供される値であることを示す。そのような各キーワードの意味は、以下の表に記載される。

この例において、ページは明示的にトランザクションの通貨と金額を指定している。フォームは、クレジットカードや他の請求の詳細を要求する。ユーザーエージェントは、十分なバランスを有し、関連する通貨をサポートしていることを知るクレジットカードを提示するためにこの情報を使用することができる。

<form method=post action="step2.cgi">
 <input type=hidden autocomplete=transaction-currency value="CHF">
 <input type=hidden autocomplete=transaction-amount value="15.00">
 <p><label>Credit card number: <input type=text inputmode=numeric autocomplete=cc-number></label>
 <p><label>Expiry Date: <input type=month autocomplete=cc-exp></label>
 <p><input type=submit value="Continue...">
</form>

以下の表に示すように、オートフィルフィールドキーワードは相互に関連する。このテーブルの行に記載された各フィールド名は、"意味"で分類される列で、その行のセルに与えられた意味に対応する。一部のフィールドは、他のフィールドのサブパーツに対応する。たとえば、クレジットカードの有効期限は、有効期限の年と月の両方を1つのフィールドに与える("cc-exp")、または月を与える("cc-exp-month")および年を与える("cc-exp-year")の2つのフィールドとして表すことができる。このような場合、より広いフィールドの名前は、より狭いフィールドを定義する複数行を取り扱う。

一般に、狭いフィールドは西洋バイアスを公開する傾向があるので、著者は狭いフィールドよりもむしろ広いフィールドを使用することを推奨する。たとえば、その順序(例として、しばしば最初に名前と呼ばれる)で、指定された名前と姓を持つように一部の欧米文化で一般的であるが、多くの文化では、最初の家族の名前を入れて、与えられた名前2番目に、および他の多くは、単に一つの名前を(mononym)を持つ。したがって、単一のフィールドを持つことは、より柔軟性がある。

一部のフィールドは、特定のフォームコントロールに適している。コントロールが、次の表でオートフィルフィールドを記述した最初の行の5列目でオートフィルフィールドにリストされたグループに属していない場合、オートフィルフィールド名は、コントロールに不適切である。 どのようなコントロールが各グループに分類されるかは、下記の表に記載される。

フィールド名意味標準的なフォーマット標準的なフォーマット例コントロールグループ
"name"フルネーム自由形式テキスト、改行なしSir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSAテキスト
"honorific-prefix"敬称または称号(たとえば、"Mr."、"Ms."、"Dr."、"Mlle")自由形式テキスト、改行なしSirテキスト
"given-name"Given name(一部の西洋文化において、first nameとして知られる)自由形式テキスト、改行なしTimothyテキスト
"additional-name"Additional names(一部の西洋文化において、middle namesとして知られる)自由形式テキスト、改行なしJohnテキスト
"family-name"Family name(一部の西洋文化において、last nameまたはsurnameとして知られる)自由形式テキスト、改行なしBerners-Leeテキスト
"honorific-suffix"接頭辞(たとえば、"Jr."、"B.Sc."、"MBASW"、"II")自由形式テキスト、改行なしOM, KBE, FRS, FREng, FRSAテキスト
"nickname"ニックネーム、スクリーンネーム、ハンドル:フルネームの代わりに使用する一般的に短い名前自由形式テキスト、改行なしTimテキスト
"organization-title"職種(たとえば"Software Engineer"、"Senior Vice President"、"Deputy Managing Director")自由形式テキスト、改行なしProfessorテキスト
"username"ユーザー名自由形式テキスト、改行なしtimblテキスト
"new-password"新しいパスワード(たとえば、アカウントの作成またはパスワードの変更の場合)自由形式テキスト、改行なしGUMFXbadyrS3Password
"current-password"usernameフィールドによって識別されるアカウントに対する現在のパスワード(たとえば、ログイン時)自由形式テキスト、改行なしqwertyPassword
"one-time-code"ユーザーの身元を確認するために使用されるワンタイムコード自由形式テキスト、改行なし123456Password
"organization"人、アドレス、またはこのフィールドに関連付けられた他のフィールドの連絡先情報に対応する会社名自由形式テキスト、改行なしWorld Wide Web Consortiumテキスト
"street-address"所在地住所(複数行、改行を保持)自由形式テキスト32 Vassar Street
MIT Room 32-G524
Multiline
"address-line1"所在地住所(フィールドごとに1行)自由形式テキスト、改行なし32 Vassar Streetテキスト
"address-line2"自由形式テキスト、改行なしMIT Room 32-G524テキスト
"address-line3"自由形式テキスト、改行なしテキスト
"address-level4"4つの行政レベルでのアドレスの中で、最もきめ細かい行政レベル自由形式テキスト、改行なしテキスト
"address-level3"3つ以上の行政レベルの住所で、第3行政レベル自由形式テキスト、改行なしテキスト
"address-level2"2つ以上の管理レベルの住所で、第2管理レベル。2つの行政レベルをもつ国で、これは通常、関連する所在地住所が見つけられる、市、町、村、または他の地方になる自由形式テキスト、改行なしCambridgeテキスト
"address-level1"住所で最も広範な行政レベル、すなわち位置関係が発見される中の地方。たとえば、アメリカで、これは州(state)になる。スイスで州(canton)になる。英国で、郵便町(post town)になる。自由形式テキスト、改行なしMAテキスト
"country"国コード妥当なISO 3166-1-alpha-2国コード [ISO3166]USテキスト
"country-name"国名自由形式テキスト、改行なし。一部の場合でcountry由来USテキスト
"postal-code"郵便番号、ZIPコード、CEDEXコード(CEDEXの場合、"CEDEX"を、関連する場合を、address-level2フィールドに追加する)自由形式テキスト、改行なし02139テキスト
"cc-name"決済手段に与えられるようなフルネーム自由形式テキスト、改行なしTim Berners-Leeテキスト
"cc-given-name"決済手段に与えられるようなGiven name (一部の西洋文化において、first nameとして知られる)自由形式テキスト、改行なしTimテキスト
"cc-additional-name"決済手段に与えられるようなAdditional names(一部の西洋文化において、middle namesとして知られる)自由形式テキスト、改行なしテキスト
"cc-family-name"決済手段に与えられるようなFamily name (一部の西洋文化において、last nameまたはsurnameとして知られる)自由形式テキスト、改行なしBerners-Leeテキスト
"cc-number"決済手段(たとえばクレジットカード番号)を識別するコードASCII数字4114360123456785テキスト
"cc-exp"決済手段の有効期限妥当な月文字列2014-12Month
"cc-exp-month"決済手段の有効期限の月コンポーネント1から12までの範囲で妥当な整数12Numeric
"cc-exp-year"決済手段の有効期限の年コンポーネント0より大きい妥当な整数2014Numeric
"cc-csc"決済手段のセキュリティコード(カードのセキュリティコード(CSC)、カード検証コード(CVC)、カード検証値(CVV)、署名欄コード(SPC)、クレジットカードID(CCID)などとして知られている)ASCII数字419テキスト
"cc-type"決済手段の種類自由形式テキスト、改行なしVisaテキスト
"transaction-currency"ユーザーが使用よりトランザクションを好む通貨ISO 4217通貨コード[ISO4217]GBPテキスト
"transaction-amount"(たとえば、ビッドまたは販売価格を入力するときに)ユーザーがトランザクションに望む金額妥当な浮動小数点数401.00Numeric
"language"優先言語妥当なBCP 47言語タグ[BCP47]jaテキスト
"bday"誕生日妥当な日付文字列1955-06-08Date
"bday-day"誕生日の日コンポーネント1から31までの範囲で妥当な整数8Numeric
"bday-month"誕生日の月コンポーネント1から12までの範囲で妥当な整数6Numeric
"bday-year"誕生日の年コンポーネント0より大きい妥当な整数1955Numeric
"sex"性別認識(たとえば、女性、ファファフィネ)自由形式テキスト、改行なしMaleテキスト
"url"ホームページや会社に対応する他のウェブページ、人、アドレス、またはこのフィールドに関連付けられる他のフィールドでの連絡先情報妥当なURL文字列https://www.w3.org/People/Berners-Lee/URL
"photo"写真、アイコン、会社に対応する他の画像、人、アドレス、またはこのフィールドに関連付けられる他のフィールドの連絡先情報妥当なURL文字列https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpgURL
"tel"国コードを含む完全な電話番号ASCII数字およびU+0020 SPACE characters、接頭辞としてU+002B PLUS SIGN文字(+)+1 617 253 5702Tel
"tel-country-code"電話番号の国コードコンポーネントASCII数字、接頭辞としてU+002B PLUS SIGN文字(+)+1テキスト
"tel-national"適用される場合は国の内部の接頭辞とともに、国コードコンポーネントなしの電話番号ASCII数字およびU+0020 SPACE characters617 253 5702テキスト
"tel-area-code"適用される場合は国の内部の接頭辞とともに、電話番号のエリアコードコンポーネントASCII数字617テキスト
"tel-local"国コードと市外局番コンポーネントなしの電話番号ASCII数字2535702テキスト
"tel-local-prefix"コンポーネントが2つのコンポーネントに分割される場合、市外局番に続く電話番号のコンポーネントの最初の部分ASCII数字253テキスト
"tel-local-suffix"コンポーネントが2つのコンポーネントに分割される場合、市外局番に続く電話番号のコンポーネントの2番目の部分ASCII数字5702テキスト
"tel-extension"電話番号の内部拡張コードASCII数字1000テキスト
"email"電子メールアドレス妥当な電子メールアドレスtimbl@w3.orgE-mail
"impp"インスタントメッセージングプロトコルのエンドポイントを表すURL(たとえば、"aim:goim?screenname=example"またはxmpp:fred@example.net")妥当なURL文字列irc://example.org/timbl,isuserURL

次のようにグループがコントロールに対応する:

テキスト
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
textarea要素
select要素
Multiline
Hidden状態のtype属性をもつinput要素
textarea要素
select要素
Password
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Password状態のtype属性をもつinput要素
textarea要素
select要素
URL
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がURL状態であるinput要素
textarea要素
select要素
E-mail
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がE-mail状態であるinput要素
textarea要素
select要素
Tel
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がTelephone状態であるinput要素
textarea要素
select要素
Numeric
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Number状態のtype属性をもつinput要素
textarea要素
select要素
Month
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Month状態のtype属性をもつinput要素
textarea要素
select要素
Date
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Date状態のtype属性をもつinput要素
textarea要素
select要素

住所レベルaddress-level1" – "address-level4"フィールドは、住所の場所を記述するために使用される。異なるロケールは、異なるレベルの数を持つ。たとえば、アメリカは2つのレベル(州および町)を使用し、イギリスは、住所に応じて1つまたは2つ(郵便町、場合によっては地域)を使用しを使用し、中国は3つ(県、市、区)を使用することができる。"address-level1"フィールドは、最も広い行政区分を表す。異なるロケールは異なる方法でフィールドを順序づける。たとえば、アメリカの町(レベル2)は、州(レベル1)に先行して使用する。一方日本において都道府県(レベル1)は、地区(レベル3)に先行する市(レベル2)に先行する。著者は、(ユーザーが国を変えるのに応じてフィールドを隠す、表示するおよび再配置する)国の慣習と一致する方法で提示された形態を提供することを勧める。

4.10.19 テキストフィールド選択のためのAPI

input要素とtextarea要素は、それらの選択を処理するための複数の属性およびメソッドを定義する。共有アルゴリズムはここで定義される。

element . select()

テキストコントロールにおけるすべてを選択する。

element . selectionStart [ = value ]

セレクションの開始オフセットを返す。

セレクションの開始を変更する設定が可能である。

element . selectionEnd [ = value ]

セレクションの終了オフセットを返す。

セレクションの終了を変更する設定が可能である。

element . selectionDirection [ = value ]

セレクションの現在の方向を返す。

セレクションの現在の方向を変更する設定が可能である。

可能な値は、"forward"、"backward"、"none"である。

element . setSelectionRange(start, end [, direction] )

HTMLInputElement/setSelectionRange

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+
caniuse.com table

指定された方向に指定された部分列をカバーするために選択を変更する。方向が省略された場合、方向がプラットフォームのデフォルト(なしまたは前方)になるようにリセットされる。

element . setRangeText(replacement [, start, end [, selectionMode ] ] )

HTMLInputElement/setRangeText

Support in all current engines.

Firefox27+Safari6.1+Chrome24+
OperaYesEdge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidYesSafari iOS7+Chrome Android25+WebView AndroidYesSamsung InternetYesOpera AndroidYes

新しいテキストとともにテキストの範囲を置換する。startおよびend引数が提供されない場合、範囲は選択されることが想定される。

最後の引数は、テキストを交換した後に選択が設定されるかを決定する。可能な値は次のとおり:

"select"
新しく挿入されたテキストを選択する。
"start"
挿入されたテキストの前のアイテムのみを選択する。
"end"
選択されたテキストの後のアイテムのみを選択する。
"preserve"
選択を保持しようとする。これはデフォルトである。

現在選択されているテキストを取得するためには、次のJavaScriptで十分である:

var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);

ここで、controlinputまたはtextarea要素である。

テキストの選択範囲を維持する一方で、テキストコントロールの開始時にテキストを追加するには、3つの属性が保持されなければならない:

var oldStart = control.selectionStart;
var oldEnd = control.selectionEnd;
var oldDirection = control.selectionDirection;
var prefix = "http://";
control.value = prefix + control.value;
control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);

ここで、controlinputまたはtextarea要素である。

4.10.20 制約

4.10.20.1 定義
4.10.20.2 制約検証API

HTMLInputElement/invalid_event

Support in all current engines.

Firefox4+Safari5+Chrome10+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android64+Safari iOS5+Chrome Android18+WebView Android4+Samsung Internet4.0+Opera Android12+
caniuse.com table
element . willValidate

HTMLObjectElement/willValidate

Support in all current engines.

Firefox1+Safari6+Chrome46+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android46+WebView Android46+Samsung Internet5.0+Opera AndroidYes

フォームが送信されるときに要素が認証される場合trueを返し、そうでなければfalseを返す。

element . setCustomValidity(message)

HTMLObjectElement/setCustomValidity

Support in all current engines.

Firefox1+Safari6+ChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLSelectElement/setCustomValidity

Support in all current engines.

Firefox4+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

要素の検証に失敗するように、カスタムエラーを設定する。与えられたメッセージは、ユーザーに問題を報告するときにユーザーに表示されるメッセージである。

引数が空文字列である場合、カスタムエラーをクリアする。

element . validity . valueMissing

要素が値を持たないが必須フィールドである場合trueを返し、そうでなければfalseを返す。

element . validity . typeMismatch

要素の値が正しい構文でない場合trueを返し、そうでなければfalseを返す。

element . validity . patternMismatch

要素の値が提供されたパターンとマッチしない場合trueを返し、そうでなければfalseを返す。

element . validity . tooLong

ValidityState/tooLong

Support in all current engines.

Firefox4+Safari11+Chrome15+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android64+Safari iOS5+Chrome AndroidYesWebView Android4+Samsung InternetYesOpera Android14+

要素の値が提供された最大長さより長い場合trueを返し、そうでなければfalseを返す。

element . validity . tooShort

ValidityState/tooShort

Support in all current engines.

Firefox51+Safari11+Chrome40+
Opera27+Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android64+Safari iOS10+Chrome AndroidYesWebView Android67+Samsung InternetYesOpera Android27+

要素の値が空文字列ではなく、提供された最小長さより短い場合trueを返し、そうでなければfalseを返す。

element . validity . rangeUnderflow

要素の値が提供された最小値より短い場合trueを返し、そうでなければfalseを返す。

element . validity . rangeOverflow

要素の値が提供された最大値より長い場合trueを返し、そうでなければfalseを返す。

element . validity . stepMismatch

要素の値がstep属性によって与えられる規則に合致しない場合trueを返し、そうでなければfalseを返す。

element . validity . badInput

ValidityState/badInput

Support in all current engines.

Firefox29+Safari11+Chrome25+
Opera15+Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android64+Safari iOS7+Chrome AndroidYesWebView Android4.4+Samsung InternetYesOpera Android14+

ユーザーエージェントが値に変換できないユーザーインターフェイスで入力をユーザーが提供される場合trueを返し、そうでなければfalseを返す。

element . validity . customError

要素がカスタムエラーを持つ場合trueを返し、そうでなければfalseを返す。

element . validity . valid

要素の値が妥当性問題を持たない場合trueを返し、そうでなければfalseを返す。

valid = element . checkValidity()

HTMLObjectElement/checkValidity

Support in all current engines.

Firefox1+Safari6+Chrome46+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android46+WebView Android46+Samsung Internet5.0+Opera AndroidYes

HTMLSelectElement/checkValidity

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS4.2+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

要素の値が妥当性問題を持たない場合trueを返し、そうでなければfalseを返す。後者の場合要素でinvalidイベントを発火する。

valid = element . reportValidity()

HTMLFormElement/reportValidity

Support in all current engines.

Firefox49+SafariYesChrome40+
OperaYesEdge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox AndroidYesSafari iOSYesChrome Android40+WebView Android40+Samsung Internet4.0+Opera AndroidYes

要素の値が一切妥当性の問題を持たない場合はtrueを返す。そうでなければfalseを返し、要素でinvalidイベントを発火させ、そして(イベントが中止されない場合)ユーザーに問題を報告する。

element . validationMessage

HTMLObjectElement/validationMessage

Support in all current engines.

Firefox1+Safari6+Chrome46+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android46+WebView Android46+Samsung Internet5.0+Opera AndroidYes

要素が妥当性に対してチェックされた場合、ユーザーに表示されるエラーメッセージを返す。

次の例において、スクリプトは値が編集されるたびにフォームコントロールの値をチェックし、かつ妥当な値でない場合はいつでも、適切なメッセージを設定するためにsetCustomValidity()メソッドを使用する。

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>
4.10.20.3 セキュリティ

サーバーは、クライアント側の検証に依存すべきではない。クライアント側の検証は、悪意あるユーザーによって意図的にバイパスされ、古いユーザーエージェントまたは、これらの機能を実装しない自動化ツールのユーザーによって意図せずに回避されうる。制約検証機能は、あらゆる種類のセキュリティメカニズムを提供することでなく、ユーザーの利便性を向上させることのみを意図する。

4.10.21 フォームの送信

フォームが送信されるとき、フォーム内のデータはenctypeで指定した構造体に変換され、指定したメソッドを使用するアクションで指定した宛先に送信される。

たとえば、次のような形式をとる:

<form action="/find.cgi" method=get>
 <input type=text name=t>
 <input type=search name=q>
 <input type=submit>
</form>

ユーザーが最初のフィールドで"cat"および2番目で"猫"と入力し、次に送信ボタンを押す場合、ユーザーエージェントは/find.cgi?t=cats&q=furを読み込む。

一方、このフォームを考えてみる:

<form action="/find.cgi" method=post enctype="multipart/form-data">
 <input type=text name=t>
 <input type=search name=q>
 <input type=submit>
</form>

同じユーザー入力を考えると、提出上の結果はかなり異なる:ユーザーエージェントは、次のテキストのようなエンティティボディとして、代わりに指定されたURLにHTTP POSTを行う。

------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--
4.10.21.1 URLエンコードフォームデータ

application/x-www-form-urlencodedの詳細については、URLを参照のこと。[URL]

4.10.21.2 マルチパートフォームデータ

multipart/form-dataのペイロードを解釈する方法の詳細については、RFC 7578を参照のこと。[RFC7578]

4.10.21.3 プレーンテキストフォームデータ

text/plain形式を使用するペイロードは、人間可読であることを意図される。形式は不明瞭である(たとえば、値の末尾の改行と値でのリテラルの改行を区別する方法はない)ので、これらはコンピューターによって確実に解釈されない。

4.10.21.4 SubmitEventインターフェイス

SubmitEvent

Firefox75+Safari?Chrome81+
Opera?Edge81+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android81+WebView Android81+Samsung InternetNoOpera Android?
event . submitter

フォームの送信をトリガーした送信ボタンを表す要素を返す。または、送信によってトリガーされなかった場合はnullを返す。

4.10.21.5 FormDataEventインターフェイス

FormDataEvent/FormDataEvent

Firefox72+SafariNoChrome77+
Opera64+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidNoSafari iOSNoChrome Android77+WebView Android77+Samsung Internet12.0+Opera Android55+

FormDataEvent

Firefox72+SafariNoChrome77+
Opera64+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidNoSafari iOSNoChrome Android77+WebView Android77+Samsung Internet12.0+Opera Android55+
event . formData

ターゲットのform.に関連付けられている要素の名前と値を表すFormDataオブジェクトを返しす。FormDataオブジェクトに対する操作は、送信されるフォームデータに影響する。