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 フォームの送信
          1. 4.10.18.6.1 フォームコントロールを自動フォーカスする:autofocus属性
        7. 4.10.18.7 入力モダリティ:inputmode属性
        8. 4.10.18.8 オートフィル
          1. 4.10.18.8.1 オートフィルフォームコントロール:autocomplete属性
          2. 4.10.18.8.2 Processing model
      3. 4.10.19 テキストフィールド選択のためのAPI
      4. 4.10.20 制約
        1. 4.10.20.1 定義
        2. 4.10.20.2 Constraint validation
        3. 4.10.20.3 The constraint validation API
        4. 4.10.20.4 セキュリティー
      5. 4.10.21 フォームの送信
        1. 4.10.21.1 導入
        2. 4.10.21.2 Implicit submission
        3. 4.10.21.3 Form submission algorithm
        4. 4.10.21.4 Constructing the form data set
        5. 4.10.21.5 Selecting a form submission encoding
        6. 4.10.21.6 URLエンコードフォームデータ
        7. 4.10.21.7 マルチパートフォームデータ
        8. 4.10.21.8 プレーンテキストフォームデータ
      6. 4.10.22 Resetting a form

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 コントロールとフォームの関連付け

Spec bugs: 28800

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

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

Support: form-attributeChrome for Android 59+Chrome 10+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 4+IE NoneSamsung Internet 4+Opera Mini all+Safari 5.1+Edge NoneAndroid Browser 3+Opera 9.5+

Source: caniuse.com

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

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

The rules in this section are complicated by the fact that although conforming documents or trees will never contain nested form elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate trees that have such nested elements. They are also complicated by rules in the HTML parser that, for historical reasons, can result in a form-associated element being associated with a form element that is not its ancestor.

When a form-associated element is created, its form owner must be initialized to null (no owner).

When a form-associated element is to be associated with a form, its form owner must be set to that form.

When a form-associated element or one of its ancestors becomes connected, then the user agent must reset the form owner of that form-associated element. The HTML parser overrides this requirement when inserting form controls.

When an element changes its parent node resulting in a form-associated element and its form owner (if any) no longer being in the same tree, then the user agent must reset the form owner of that form-associated element.

When a listed form-associated element's form attribute is set, changed, or removed, then the user agent must reset the form owner of that element.

When a listed form-associated element has a form attribute and the ID of any of the elements in the tree changes, then the user agent must reset the form owner of that form-associated element.

When a listed form-associated element has a form attribute and an element with an ID is inserted into or removed from the Document, then the user agent must reset the form owner of that form-associated element.

When the user agent is to reset the form owner of a form-associated element element, it must run the following steps:

  1. If all of the following conditions are true

    then do nothing, and abort these steps.

  2. Set element's form owner to null.

  3. If element is listed, has a form content attribute, and is connected, then:

    1. If the first element in element's tree, in tree order, to have an ID that is case-sensitively equal to element's form content attribute's value, is a form element, then associate the element with that form element.

  4. Otherwise, if element has an ancestor form element, then associate element with the nearest such ancestor form element.

In the following non-conforming snippet:

...
 <form id="a">
  <div id="b"></div>
 </form>
 <script>
  document.getElementById('b').innerHTML =
     '<table><tr><td></form><form id="c"><input id="d"></table>' +
     '<input id="e">';
 </script>
...

The form owner of "d" would be the inner nested form "c", while the form owner of "e" would be the outer form "a".

This happens as follows: First, the "e" node gets associated with "c" in the HTML parser. Then, the innerHTML algorithm moves the nodes from the temporary document to the "b" element. At this point, the nodes see their ancestor chain change, and thus all the "magic" associations done by the parser are reset to normal ancestor associations.

This example is a non-conforming document, though, as it is a violation of the content models to nest form elements, and there is a parse error for the </form> tag.

element . form

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

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

Listed form-associated elements have a form IDL attribute, which, on getting, must return the element's form owner, or null if there isn't one.

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

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

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

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

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

name IDL属性は、nameコンテンツ属性を反映しなければならない。

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属性は、ユーザーが入力できる文字数の制限を宣言する。"文字数"は、JavaScript文字列長さを使って測定され、そして、textarea要素の場合は、すべての改行が1文字に正規化される(CRLFの対とは対照的に)。

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

Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the JavaScript string length of the element's API value is greater than the element's maximum allowed value length, then the element is suffering from being too long.

User agents may prevent the user from causing the element's API value to be set to a value whose JavaScript string length is greater than the element's maximum allowed value length.

In the case of textarea elements, the API value and value differ. In particular, the textarea line break normalization transformation is applied before the maximum allowed value length is checked (whereas the textarea wrapping transformation is not applied).

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

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

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

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

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

Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the JavaScript string length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.

この例において、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コンテンツ属性は、真偽属性である。

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

  1. 要素がbuttoninputselect、またはtextarea要素であり、かつ(その値に関わらず)この要素にdisabled属性が指定される。
  2. 要素がdisabled属性が指定されるfieldset要素の子孫であり、かつもしあればそのfieldset要素の所有する最初のlegend要素の子に属する子孫でない

無効であるフォームコントロールは、要素に送出されていることからユーザーインタラクションタスクソース上のキューに入れられる任意のclickイベントを防がなければならない。

Constraint validation: If an element is disabled, it is barred from constraint validation.

disabled IDL属性は、disabledコンテンツ属性を反映しなければならない。

4.10.18.6 フォームの送信

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

Support: form-submit-attributesChrome for Android 59+Chrome 15+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 4+IE 10+Samsung Internet 4+Opera Mini all+Safari 5.1+Edge 12+Android Browser 4+Opera 10.6+

Source: caniuse.com

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コンテンツ属性は、妥当なコンテンツ名またはキーワードである値を持たなければならない。

要素が送信ボタンでありそのような属性を持つ場合、要素のターゲットは要素のformtarget属性の値である。それがそのような属性を持つ場合、または、そのフォーム所有者target属性の値である。または要素のノード文書target属性をもつbase要素を含む場合、最初のそのようなbase要素のtarget属性の値である。そのような要素が存在しない場合、nullである。


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>

The action IDL attribute must reflect the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the element's node document's URL must be returned instead. The target IDL attribute must reflect the content attribute of the same name. The method and enctype IDL attributes must reflect the respective content attributes of the same name, limited to only known values. The encoding IDL attribute must reflect the enctype content attribute, limited to only known values. The noValidate IDL attribute must reflect the novalidate content attribute. The formAction IDL attribute must reflect the formaction content attribute, except that on getting, when the content attribute is missing or its value is the empty string, the element's node document's URL must be returned instead. The formEnctype IDL attribute must reflect the formenctype content attribute, limited to only known values. The formMethod IDL attribute must reflect the formmethod content attribute, limited to only known values. The formNoValidate IDL attribute must reflect the formnovalidate content attribute. The formTarget IDL attribute must reflect the formtarget content attribute.

4.10.18.6.1 フォームコントロールを自動フォーカスする:autofocus属性

Support: autofocusChrome for Android 59+Chrome 5+UC Browser for Android NoneiOS Safari NoneFirefox 4+IE 10+Samsung Internet 4+Opera Mini NoneSafari 5+Edge 12+Android Browser 3+Opera 9.5+

Source: caniuse.com

autofocusコンテンツ属性は、ページが読み込まれるとすぐに、または自身を見つけてその中でdialogを表示されるとすぐに、コントロールをフォーカスすることを著者に許可し、ユーザーが手動でメインコントロールにフォーカスすることなしに入力をすぐに開始できるようにする。

autofocus属性は真偽属性である。

要素の直近の祖先オートフォーカス範囲のルート要素は、その要素がdialog要素である場合、要素そのものであり、そうでなければ、もしあれば要素の直近の祖先dialog要素であり、そうでなければ要素の最後の包括祖先要素である。

両方がautofocus属性を指定される同じ直近の祖先オートフォーカス範囲のルート要素をもつ2つの要素が存在してはならない。

When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:

  1. Let target be the element's node document.

  2. If target has no browsing context, abort these steps.

  3. If target's browsing context has no top-level browsing context (e.g. it is a nested browsing context with no parent browsing context), abort these steps.

  4. If target's active sandboxing flag set has the sandboxed automatic features browsing context flag, abort these steps.

  5. If target's origin is not the same as the origin of the node document of the currently focused element in target's top-level browsing context, abort these steps.

  6. If target's origin is not the same as the origin of the active document of target's top-level browsing context, abort these steps.

  7. If the user agent has already reached the last step of this list of steps in response to an element being inserted into a Document whose top-level browsing context's active document is the same as target's top-level browsing context's active document, abort these steps.

  8. If the user has indicated (for example, by starting to type in a form control) that they do not wish focus to be changed, then optionally abort these steps.

  9. Queue a task that runs the focusing steps for the element. User agents may also change the scrolling position of the document, or perform some other action that brings the element to the user's attention. The task source for this task is the user interaction task source.

This handles the automatic focusing during document load. The show() and showModal() methods of dialog elements also processes the autofocus attribute.

Focusing the control does not imply that the user agent has to focus the browser window if it has lost focus.

autofocus IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

次の断片において、文書が読み込まれるとき、テキストコントロールにフォーカスされる。

<input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search">
4.10.18.7 入力モダリティ:inputmode属性

Support: input-inputmodeChrome for Android NoneChrome NoneUC Browser for Android NoneiOS Safari NoneFirefox NoneIE NoneSamsung Internet NoneOpera Mini NoneSafari NoneEdge NoneAndroid Browser NoneOpera None

Source: caniuse.com

inputmodeコンテンツ属性は、ユーザーがフォームコントロールに内容を入力するための最も参考になる入力機構の種類を指定する列挙属性である。

User agents must recognize all the keywords and corresponding states given below, but need not support all of the corresponding states. If a keyword's state is not supported, the user agent must act as if the keyword instead mapped to the given state's fallback state, as defined below. This fallback behavior is transitive.

For example, if a user agent with a QWERTY keyboard layout does not support text prediction and automatic capitalization, then it could treat the latin-prose keyword in the same way as the verbatim keyword, following the chain Latin ProseLatin TextLatin Verbatim.

属性に対して可能なキーワードと状態を以下の表に示す。キーワードが最初の列に示される。そのキーワードの行に属する2列目のセルで与えられる状態、およびその行の3列目のセルに示すフォールバック状態をもつ状態にそれぞれ対応する。

キーワード 状態 フォールバック状態 説明
verbatim 逐語ラテン デフォルト 非散文コンテンツの英数字ラテン文字入力、たとえばユーザー名、パスワード、製品コードなど。
latin ラテンテキスト 逐語ラテン 一部のタイピング補助対応(たとえばテキスト予測など)をともなう、ユーザーの優先言語でラテンスクリプトを入力する。自由形式テキスト検索フィールドなど、人間とコンピューターのコミュニケーションを意図する。
latin-name ラテン名 ラテンテキスト (各単語でユーザーの連絡先リストと自動大文字化からのテキスト予測など)有効な人間の名前の入力を意図されるタイピング補助とともに、ユーザーの優先言語でラテン文字を入力する。顧客名フィールドなどの状況のために意図される。
latin-prose ラテン文 ラテンテキスト (文の最初でテキスト予測と自動大文字化など)有効な人間同士のコミュニケーションを意図されるタイピング補助とともに、ユーザーの優先言語でラテン文字を入力する。電子メールやインスタントメッセージなどの状況のために意図される。
full-width-latin 全角ラテン ラテン文 (文の最初でテキスト予測と自動大文字化など)有効な人間同士のコミュニケーションを意図されるタイピング補助とともに、ユーザーの第二言語でラテン文字を入力する。CJKテキストの内側に埋め込まれるラテンテキストに意図される。
kana かな デフォルト 漢字に変換するためのサポートとともに、全角文字を使用する、かなやローマ字入力、一般にひらがな入力。日本語テキスト入力を対象とする。
kana-name Kana Name かな 漢字に変換するためのサポートおよび人名の入力を意図する(たとえば、ユーザーの連絡先リストからのテキスト予測)目的を入力するとともに、全角文字を使用する、かなやローマ字入力、一般にひらがな入力。顧客名フィールドなどの状況のために意図される。
katakana カタカナ かな 漢字に変換するためのサポートとともに、全角文字を使用する、カタカナ入力。日本語テキスト入力を対象とする。
numeric 数値 デフォルト 0から9までの数字、ユーザーの好みの桁区切り文字、および負数を示す文字のためのキーを含む、数値入力。たとえクレジットカード番号などの、数値コードを意図する。(番号については、"<input type=number>"を優先する。)
tel Telephone 数値 0から9までの数字、"#"文字、および"*"文字のためのキーを含む、電話番号入力。一部のロケールで、これはまた、アルファベットのニーモニックラベル(たとえば、米国で、"2"キーはまた、歴史的に文字A、B、およびCで標識されている)を含むことができる。まれに必要。"<input type=tel>"を代わりに使用する。
email E-mail デフォルト "@"文字および"."文字のような、電子メールアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。まれに必要。"<input type=email>"を代わりに使用する。
url URL デフォルト "/"と"."文字、"www"や".co.uk"のようなドメイン名の中で見つかった文字列を簡単に入力するための、URLの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。Rarely necessary; use "<input type=url>" instead.

専用の入力コントロールが(上記の表に記載される)通常のユースケースのために存在するように、上記の最後3つのキーワードは、完全を期すためだけに提供され、めったに必要ない。

ユーザーエージェントは、ユーザーエージェントのデフォルト入力モダリティーに対応する、Defaultの入力モード状態をすべてサポートしなければならない。この仕様は、ユーザーエージェントのデフォルトのモダリティーが動作する方法を定義しない。欠損値のデフォルト値デフォルトの入力モード状態である。

User agents should use the input modality corresponding to the state of the inputmode attribute when exposing a user interface for editing the value of a form control to which the attribute applies. An input modality corresponding to a state is one designed to fit the description of the state in the table above. This value can change dynamically; user agents should update their interface as the attribute changes state, unless that would go against the user's wishes.

4.10.18.8 オートフィル

Support: input-autocomplete-onoffChrome for Android 59+Chrome (limited) 27+UC Browser for Android 11.4+iOS Safari 5.0+Firefox (limited) 30+IE (limited) 11+Samsung Internet 4+Opera Mini all+Safari (limited) 7+Edge (limited) 12+Android Browser 2.1+Opera 9+

Source: caniuse.com

4.10.18.8.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" 新しいパスワード(たとえば、アカウントの作成またはパスワードの変更の場合) 自由形式テキスト、改行なし GUMFXbadyrS3 Password
"current-password" usernameフィールドによって識別されるアカウントに対する現在のパスワード(たとえば、ログイン時) 自由形式テキスト、改行なし qwerty Password
"organization" 人、アドレス、またはこのフィールドに関連付けられた他のフィールドの連絡先情報に対応する会社名 自由形式テキスト、改行なし World Wide Web Consortium テキスト
"street-address" 所在地住所(複数行、改行を保持) 自由形式テキスト 32 Vassar Street
MIT Room 32-G524
複数行
"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-12
"cc-exp-month" 決済手段の有効期限の月コンポーネント 1から12までの範囲で妥当な整数 12 数値
"cc-exp-year" 決済手段の有効期限の年コンポーネント 0より大きい妥当な整数 2014 数値
"cc-csc" 決済手段のセキュリティーコード(カードのセキュリティーコード(CSC)、カード検証コード(CVC)、カード検証値(CVV)、署名欄コード(SPC)、クレジットカードID(CCID)などとして知られている) ASCII数字 419 テキスト
"cc-type" 決済手段の種類 自由形式テキスト、改行なし Visa テキスト
"transaction-currency" ユーザーが使用よりトランザクションを好む通貨 ISO 4217通貨コード[ISO4217] GBP テキスト
"transaction-amount" (たとえば、ビッドまたは販売価格を入力する際に)ユーザーがトランザクションに望む金額 妥当な浮動小数点数 401.00 数値
"language" 優先言語 妥当なBCP 47言語タグ[BCP47] ja テキスト
"bday" 誕生日 妥当な日付文字列 1955-06-08 日付
"bday-day" 誕生日の日コンポーネント 1から31までの範囲で妥当な整数 8 数値
"bday-month" 誕生日の月コンポーネント 1から12までの範囲で妥当な整数 6 数値
"bday-year" 誕生日の年コンポーネント 0より大きい妥当な整数 1955 数値
"sex" 性別認識(たとえば、女性、ファファフィネ) 自由形式テキスト、改行なし Male テキスト
"url" ホームページや会社に対応する他のウェブページ、人、アドレス、またはこのフィールドに関連付けられる他のフィールドでの連絡先情報 Valid URL string https://www.w3.org/People/Berners-Lee/ URL
"photo" 写真、アイコン、会社に対応する他の画像、人、アドレス、またはこのフィールドに関連付けられる他のフィールドの連絡先情報 Valid URL string https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg URL
"tel" 国コードを含む完全な電話番号 ASCII数字およびU+0020 SPACE characters、接頭辞としてU+002B PLUS SIGN文字(+) +1 617 253 5702 Tel
"tel-country-code" 電話番号の国コードコンポーネント ASCII数字、接頭辞としてU+002B PLUS SIGN文字(+) +1 テキスト
"tel-national" 適用される場合は国の内部の接頭辞とともに、国コードコンポーネントなしの電話番号 ASCII数字およびU+0020 SPACE characters 617 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.org E-mail
"impp" インスタントメッセージングプロトコルのエンドポイントを表すURL(たとえば、"aim:goim?screenname=example"またはxmpp:fred@example.net") Valid URL string irc://example.org/timbl,isuser URL

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

テキスト
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
textarea要素
select要素
複数行
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要素
数値
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Number状態のtype属性をもつinput要素
textarea要素
select要素
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Month状態のtype属性をもつinput要素
textarea要素
select要素
日付
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.18.8.2 Processing model

Each input element to which the autocomplete attribute applies, each select element, and each textarea element, has an autofill hint set, an autofill scope, an autofill field name, and an IDL-exposed autofill value.

The autofill field name specifies the specific kind of data expected in the field, e.g. "street-address" or "cc-exp".

The autofill hint set identifies what address or contact information type the user agent is to look at, e.g. "shipping fax" or "billing".

The autofill scope identifies the group of fields whose information concerns the same subject, and consists of the autofill hint set with, if applicable, the "section-*" prefix, e.g. "billing", "section-parent shipping", or "section-child shipping home".

These values are defined as the result of running the following algorithm:

  1. If the element has no autocomplete attribute, then jump to the step labeled default.

  2. Let tokens be the result of splitting the attribute's value on ASCII whitespace.

  3. If tokens is empty, then jump to the step labeled default.

  4. Let index be the index of the last token in tokens.

  5. If the indexth token in tokens is not an ASCII case-insensitive match for one of the tokens given in the first column of the following table, or if the number of tokens in tokens is greater than the maximum number given in the cell in the second column of that token's row, then jump to the step labeled default. Otherwise, let field be the string given in the cell of the first column of the matching row, and let category be the value of the cell in the third column of that same row.

    Token Maximum number of tokens カテゴリー
    "off" 1 Off
    "on" 1 Automatic
    "name" 3 Normal
    "honorific-prefix" 3 Normal
    "given-name" 3 Normal
    "additional-name" 3 Normal
    "family-name" 3 Normal
    "honorific-suffix" 3 Normal
    "nickname" 3 Normal
    "organization-title" 3 Normal
    "username" 3 Normal
    "new-password" 3 Normal
    "current-password" 3 Normal
    "organization" 3 Normal
    "street-address" 3 Normal
    "address-line1" 3 Normal
    "address-line2" 3 Normal
    "address-line3" 3 Normal
    "address-level4" 3 Normal
    "address-level3" 3 Normal
    "address-level2" 3 Normal
    "address-level1" 3 Normal
    "country" 3 Normal
    "country-name" 3 Normal
    "postal-code" 3 Normal
    "cc-name" 3 Normal
    "cc-given-name" 3 Normal
    "cc-additional-name" 3 Normal
    "cc-family-name" 3 Normal
    "cc-number" 3 Normal
    "cc-exp" 3 Normal
    "cc-exp-month" 3 Normal
    "cc-exp-year" 3 Normal
    "cc-csc" 3 Normal
    "cc-type" 3 Normal
    "transaction-currency" 3 Normal
    "transaction-amount" 3 Normal
    "language" 3 Normal
    "bday" 3 Normal
    "bday-day" 3 Normal
    "bday-month" 3 Normal
    "bday-year" 3 Normal
    "sex" 3 Normal
    "url" 3 Normal
    "photo" 3 Normal
    "tel" 4 Contact
    "tel-country-code" 4 Contact
    "tel-national" 4 Contact
    "tel-area-code" 4 Contact
    "tel-local" 4 Contact
    "tel-local-prefix" 4 Contact
    "tel-local-suffix" 4 Contact
    "tel-extension" 4 Contact
    "email" 4 Contact
    "impp" 4 Contact
  6. If category is Off or Automatic but the element's autocomplete attribute is wearing the autofill anchor mantle, then jump to the step labeled default.

  7. If category is Off, let the element's autofill field name be the string "off", let its autofill hint set be empty, and let its IDL-exposed autofill value be the string "off". Then, abort these steps.

  8. If category is Automatic, let the element's autofill field name be the string "on", let its autofill hint set be empty, and let its IDL-exposed autofill value be the string "on". Then, abort these steps.

  9. Let scope tokens be an empty list.

  10. Let hint tokens be an empty set.

  11. Let IDL value have the same value as field.

  12. If the indexth token in tokens is the first entry, then skip to the step labeled done.

  13. Decrement index by one.

  14. If category is Contact and the indexth token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    The substeps are:

    1. Let contact be the matching string from the list above.

    2. Insert contact at the start of scope tokens.

    3. Add contact to hint tokens.

    4. Let IDL value be the concatenation of contact, a U+0020 SPACE character, and the previous value of IDL value (which at this point will always be field).

    5. If the indexth entry in tokens is the first entry, then skip to the step labeled done.

    6. Decrement index by one.

  15. If the indexth token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    The substeps are:

    1. Let mode be the matching string from the list above.

    2. Insert mode at the start of scope tokens.

    3. Add mode to hint tokens.

    4. Let IDL value be the concatenation of mode, a U+0020 SPACE character, and the previous value of IDL value (which at this point will either be field or the concatenation of contact, a space, and field).

    5. If the indexth entry in tokens is the first entry, then skip to the step labeled done.

    6. Decrement index by one.

  16. If the indexth entry in tokens is not the first entry, then jump to the step labeled default.

  17. If the first eight characters of the indexth token in tokens are not an ASCII case-insensitive match for the string "section-", then jump to the step labeled default.

  18. Let section be the indexth token in tokens, converted to ASCII lowercase.

  19. Insert section at the start of scope tokens.

  20. Let IDL value be the concatenation of section, a U+0020 SPACE character, and the previous value of IDL value.

  21. Done: Let the element's autofill hint set be hint tokens.

  22. Let the element's autofill scope be scope tokens.

  23. Let the element's autofill field name be field.

  24. Let the element's IDL-exposed autofill value be IDL value.

  25. Abort these steps.

  26. Default: Let the element's IDL-exposed autofill value be the empty string, and its autofill hint set and autofill scope be empty.

  27. If the element's autocomplete attribute is wearing the autofill anchor mantle, then let the element's autofill field name be the empty string and abort these steps.

  28. Let form be the element's form owner, if any, or null otherwise.

  29. If form is not null and form's autocomplete attribute is in the off state, then let the element's autofill field name be "off".

    Otherwise, let the element's autofill field name be "on".


For the purposes of autofill, a control's data depends on the kind of control:

An input element with its type attribute in the E-mail state and with the multiple attribute specified
The element's values.
Any other input element
A textarea element
The element's value.
A select element with its multiple attribute specified
The option elements in the select element's list of options that have their selectedness set to true.
Any other select element
The option element in the select element's list of options that has its selectedness set to true.

How to process the autofill hint set, autofill scope, and autofill field name depends on the mantle that the autocomplete attribute is wearing.

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

When an element's autofill field name is "off", the user agent should not remember the control's data, and should not offer past values to the user.

In addition, when an element's autofill field name is "off", values are reset when traversing the history.

Banks frequently do not want UAs to prefill login information:

<p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
<p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>

When an element's autofill field name is not "off", the user agent may store the control's data, and may offer previously stored values to the user.

For example, suppose a user visits a page with this control:

<select name="country">
 <option>Afghanistan
 <option>Albania
 <option>Algeria
 <option>Andorra
 <option>Angola
 <option>Antigua and Barbuda
 <option>Argentina
 <option>Armenia
 <!-- ... -->
 <option>Yemen
 <option>Zambia
 <option>Zimbabwe
</select>

これは次のようにレンダリングされるだろう:

A drop-down control with a long alphabetical list of countries.

Suppose that on the first visit to this page, the user selects "Zambia". On the second visit, the user agent could duplicate the entry for Zambia at the top of the list, so that the interface instead looks like this:

The same drop-down control with the alphabetical list of countries, but with Zambia as an entry at the top.

When the autofill field name is "on", the user agent should attempt to use heuristics to determine the most appropriate values to offer the user, e.g. based on the element's name value, the position of the element in its tree, what other fields exist in the form, and so forth.

オートフィルフィールド名が上記のオートフィルフィールドの名前のいずれかに該当する場合、ユーザーエージェントは、以前のこのセクションの表に示すようなフィールド名の意味と一致する提案を提供すべきである。オートフィルのヒントセットは複数の可能な提案の中で選択するために使用されるべきである。

たとえば、ユーザーが一度 "shipping"キーワードを使用するフィールドにアドレスを入力し、"billing" キーワードを使用するフィールドに別のアドレスを入力した場合、後続で、オートフィルヒントがキーワード"shipping"を含むフォームコントロールに提案されるだろう最初のアドレスのみを構成する。しかし、 両方のアドレスは、オートフィルヒントセットがいずれかのキーワードが含まないアドレスに関連したフォームコントロールに対して提案されるかもしれない。

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

When the autofill field name is not the empty string, then the user agent must act as if the user had specified the control's data for the given autofill hint set, autofill scope, and autofill field name combination.

When the user agent autofills form controls, elements with the same form owner and the same autofill scope must use data relating to the same person, address, payment instrument, and contact details. When a user agent autofills "country" and "country-name" fields with the same form owner and autofill scope, and the user agent has a value for the country" field(s), then the "country-name" field(s) must be filled using a human-readable name for the same country. When a user agent fills in multiple fields at once, all fields with the same autofill field name, form owner and autofill scope must be filled with the same value.

ユーザーエージェントが2つの電話番号、+1 555 123 1234および+1 555 666 7777を知っていると仮定する。値"123"をとともにautocomplete="shipping tel-local-prefix"を持つフィールド、および値"7777"とともにautocomplete="shipping tel-local-suffix"を持つ同じフォームの別のフィールドを埋めることはユーザーエージェントbに対して適合しないだろう。前述の情報が指定される唯一の妥当な事前入力値は、それぞれ、"123"と"1234"、または"666"と"7777"となる。

同様に、ある理由でフォームがcc-exp"フィールドと"cc-exp-month"フィールドの両方を含む、およびユーザーエージェントがフォームを事前入力する場合、前者の月コンポーネントは後者と一致する必要があるだろう。

This requirement interacts with the autofill anchor mantle also. 次のマークアップ断片を考えてみよう:

<form>
 <input type=hidden autocomplete="nickname" value="TreePlate">
 <input type=text autocomplete="nickname">
</form>

The only value that a conforming user agent could suggest in the text control is "TreePlate", the value given by the hidden input element.

The "section-*" tokens in the autofill scope are opaque; user agents must not attempt to derive meaning from the precise values of these tokens.

For example, it would not be conforming if the user agent decided that it should offer the address it knows to be the user's daughter's address for "section-child" and the addresses it knows to be the user's spouses' addresses for "section-spouse".

The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the control's data, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing). ユーザーエージェントは、は、ユーザーが入力したかもしれない値を使用するコントロールのみを事前入力しなければならない。

たとえば、select要素が、値"Steve"、"Rebecca"、"Jay"、"Bob"をもつoption要素のみを持ち、かつオートフィルフィールド名"given-name"を持つが、フィールドを事前入力が"Evan"であるようなユーザーエージェントのアイデアのみである場合、ユーザーエージェントは、フィールドを事前入力できない。ユーザーが自分自身を行っていることができなかったので、何らかの形で値"Evan"にselect要素を設定することは準拠しないだろう。

A user agent prefilling a form control must not discriminate between form controls that are in a document tree and those that are connected; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element's root is a shadow root versus a Document.

A user agent prefilling a form control's value must not cause that control to suffer from a type mismatch, suffer from being too long, suffer from being too short, suffer from an underflow, suffer from an overflow, or suffer from a step mismatch. A user agent prefilling a form control's value must not cause that control to suffer from a pattern mismatch either. Where possible given the control's constraints, user agents must use the format given as canonical in the aforementioned table. Where it's not possible for the canonical format to be used, user agents should use heuristics to attempt to convert values so that they can be used.

たとえば、ユーザーエージェントがユーザーのミドルネームが"Ines"であり、フォームコントロールを事前入力しようとする試みる場合、このようになる:

<input name=middle-initial maxlength=1 autocomplete="additional-name">

ユーザーエージェントは"I"を"Ines"に変換し、このように事前入力できるだろう。

よち複雑な例では、月の値となる。ユーザーエージェントが、ユーザーの誕生日が2012年7月27日であることを知っている場合、わずかに異なる値を持つ以下のコントロールのすべてを事前入力しよう試み、この情報から駆動する。

<input name=b type=month autocomplete="bday">
2012-07 状態が月/年の組み合わせのみを受け入れるので、日は破棄される。(Note that this example is non-conforming, because the autofill field name bday is not allowed with the Month state.)
<select name=c autocomplete="bday">
 <option>Jan
 <option>Feb
 ...
 <option>Jul
 <option>Aug
 ...
</select>
July The user agent picks the month from the listed options, either by noticing there are twelve options and picking the 7th, or by recognizing that one of the strings (three characters "Jul" followed by a newline and a space) is a close match for the name of the month (July) in one of the user agent's supported languages, or through some other similar mechanism.
<input name=a type=number min=1 max=12 autocomplete="bday-month">
7 ユーザーエージェントは、フィールドのように、範囲1から12の数字を"July"に変換する。
<input name=a type=number min=0 max=11 autocomplete="bday-month">
6 ユーザーエージェントは、フィールドのように、範囲0から11の数字を"July"に変換する。
<input name=a type=number min=1 max=11 autocomplete="bday-month">
フォームが期待するものとして良い推測ができないため、ユーザーエージェントはフィールドに入力しない。

ユーザーエージェントは、ユーザーが要素のオートフィルフィールド名を上書き可能にしてもよい。たとえばページの作成者の異議にもかかわらず記憶されるおよび事前に入力されるよう許可するために"off"から"on"に変更すること、または値を記憶しないよう常に"off"にするなど。

More specifically, user agents may in particular consider replacing the autofill field name of form controls that match the description given in the first column of the following table, when their autofill field name is either "on" or "off", with the value given in the second cell of that row. If this table is used, the replacements must be done in tree order, since all but the first row references the autofill field name of earlier elements. When the descriptions below refer to form controls being preceded or followed by others, they mean in the list of listed elements that share the same form owner.

フォームのコントロール New autofill field name
an input element whose type attribute is in the Text state that is followed by an input element whose type attribute is in the Password state "username"
an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is "username" "current-password"
an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is "current-password" "new-password"
an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is "new-password" "new-password"

autocomplete IDL属性は、取得時に、要素のIDL公開オートフィル値を返さなければならず、設定時に、同じ名前のコンテンツ属性を反映しなければならない。

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] )

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

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

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

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

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

For input elements, these methods and attributes must operate on the element's value. For textarea elements, these methods and attributes must operate on the element's raw value.

Where possible, user interface features for changing the text selection in input and textarea elements must be implemented in terms of the DOM API described in this section, so that, e.g., all the same events fire.

The selections of input and textarea elements have a selection direction, which is either "forward", "backward", or "none". This direction is set when the user manipulates the selection. The exact meaning of the selection direction depends on the platform. To set the selection direction of an element to a given direction, update the element's selection direction to the given direction, unless the direction is "none" and the platform does not support that direction; in that case, update the element's selection direction to "forward".

On Windows, the direction indicates the position of the caret relative to the selection: a "forward" selection has the caret at the end of the selection and a "backward" selection has the caret at the start of the selection. Windows has no "none" direction.

On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the "forward" direction means the end of the selection is modified, and the "backward" direction means the start of the selection is modified. The "none" direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used.

The select() method, when invoked, must run the following steps:

  1. If this element is an input element, and either select() does not apply to this element or the corresponding control has no selectable text, return.

    For instance, in a user agent where <input type=color> is rendered as a color well with a picker, as opposed to a text control accepting a hexadecimal color code, there would be no selectable text, and thus calls to the method are ignored.

  2. Set the selection range with 0 and infinity.

The selectionStart attribute's getter must run the following steps:

  1. If this element is an input element, and selectionStart does not apply to this element, return null.

  2. If there is no selection, return the offset (in logical order) to the character that immediately follows the text entry cursor.

  3. Return the offset (in logical order) to the character that immediately follows the start of the selection.

The selectionStart attribute's setter must run the following steps:

  1. If this element is an input element, and selectionStart does not apply to this element, throw an "InvalidStateError" DOMException.

  2. Let end be the value of this element's selectionEnd attribute.

  3. If end is less than the given value, set end to the given value.

  4. Set the selection range with the given value, end, and the value of this element's selectionDirection attribute.

The selectionEnd attribute's getter must run the following steps:

  1. If this element is an input element, and selectionEnd does not apply to this element, return null.

  2. If there is no selection, return the offset (in logical order) to the character that immediately follows the text entry cursor.

  3. Return the offset (in logical order) to the character that immediately follows the end of the selection.

The selectionEnd attribute's setter must run the following steps:

  1. If this element is an input element, and selectionEnd does not apply to this element, throw an "InvalidStateError" DOMException.

  2. Set the selection range with the value of this element's selectionStart attribute, the given value, and the value of this element's selectionDirection attribute.

The selectionDirection attribute's getter must run the following steps:

  1. If this element is an input element, and selectionDirection does not apply to this element, return null.

  2. Return this element's selection direction.

The selectionDirection attribute's setter must run the following steps:

  1. If this element is an input element, and selectionDirection does not apply to this element, throw an "InvalidStateError" DOMException.

  2. Set the selection range with the value of this element's selectionStart attribute, the value of this element's selectionEnd attribute, and the given value.

The setSelectionRange(start, end, direction) method, when invoked, must run the following steps:

  1. If this element is an input element, and setSelectionRange() does not apply to this element, throw an "InvalidStateError" DOMException.

  2. Set the selection range with start, end, and direction.

To set the selection range with an integer or null start, an integer or null or the special value infinity end, and optionally a string direction, run the following steps:

  1. If start is null, let start be zero.

  2. If end is null, let end be zero.

  3. Set the selection of the text control to the sequence of characters starting with the character at the startth position (in logical order) and ending with the character at the (end-1)th position. Arguments greater than the length of the value of the text control (including the special value infinity) must be treated as pointing at the end of the text control. If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end. In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset end.

  4. If direction is not a case-sensitive match for either the string "backward" or "forward", or if the direction argument was omitted, set direction to "none".

  5. Set the selection direction of the text control to direction.

  6. If the previous steps caused the selection of the text control to be modified (in either extent or direction), then queue a task, using the user interaction task source, to fire an event named select at the element, with the bubbles attribute initialized to true.

The setRangeText(replacement, start, end, selectMode) method, when invoked, must run the following steps:

  1. If this element is an input element, and setRangeText() does not apply to this element, throw an "InvalidStateError" DOMException.

  2. Set this element's dirty value flag to true.

  3. If the method has only one argument, then let start and end have the values of the selectionStart attribute and the selectionEnd attribute respectively.

    Otherwise, let start, end have the values of the second and third arguments respectively.

  4. If start is greater than end, then throw an "IndexSizeError" DOMException and abort these steps.

  5. If start is greater than the length of the value of the text control, then set it to the length of the value of the text control.

  6. If end is greater than the length of the value of the text control, then set it to the length of the value of the text control.

  7. Let selection start be the current value of the selectionStart attribute.

  8. Let selection end be the current value of the selectionEnd attribute.

  9. If start is less than end, delete the sequence of characters starting with the character at the startth position (in logical order) and ending with the character at the (end-1)th position.

  10. Insert the value of the first argument into the text of the value of the text control, immediately before the startth character.

  11. Let new length be the length of the value of the first argument.

  12. Let new end be the sum of start and new length.

  13. Run the appropriate set of substeps from the following list:

    If the fourth argument's value is "select"

    Let selection start be start.

    Let selection end be new end.

    If the fourth argument's value is "start"

    Let selection start and selection end be start.

    If the fourth argument's value is "end"

    Let selection start and selection end be new end.

    If the fourth argument's value is "preserve" (the default)
    1. Let old length be end minus start.

    2. Let delta be new length minus old length.

    3. If selection start is greater than end, then increment it by delta. (If delta is negative, i.e. the new text is shorter than the old text, then this will decrease the value of selection start.)

      Otherwise: if selection start is greater than start, then set it to start. (This snaps the start of the selection to the start of the new text if it was in the middle of the text that it replaced.)

    4. If selection end is greater than end, then increment it by delta in the same way.

      Otherwise: if selection end is greater than start, then set it to new end. (This snaps the end of the selection to the end of the new text if it was in the middle of the text that it replaced.)

  14. Set the selection range with selection start and selection end.

The setRangeText() method uses the following enumeration:

enum SelectionMode {
  "select",
  "start",
  "end",
  "preserve" // default
};

All elements to which this API applies have either a selection or a text entry cursor position at all times (even for elements that are not being rendered). The initial state must consist of a text entry cursor at the beginning of the control.

U+200D ZERO WIDTH JOINERのような、不可視のレンダリングをともなう文字は、依然として文字としてカウントされる。したがって、たとえば選択は単に不可視の文字を含めることができ、テキスト挿入カーソルは片側またはそのような文字の別のものに配置できる。


現在選択されているテキストを取得するためには、次の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 定義

A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation. (For example, an element is barred from constraint validation if it is an object element.)

An element can have a custom validity error message defined. Initially, an element must have its custom validity error message set to the empty string. When its value is not the empty string, the element is suffering from a custom error. It can be set using the setCustomValidity() method. The user agent should use the custom validity error message when alerting the user to the problem with the control.

An element can be constrained in various ways. The following is the list of validity states that a form control can be in, making the control invalid for the purposes of constraint validation. (The definitions below are non-normative; other parts of this specification define more precisely when each state applies or does not.)

Suffering from being missing

When a control has no value but has a required attribute (input required, textarea required); or, more complicated rules for select elements and controls in radio button groups, as specified in their sections.

Suffering from a type mismatch

When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL).

Suffering from a pattern mismatch

When a control has a value that doesn't satisfy the pattern attribute.

Suffering from being too long

When a control has a value that is too long for the form control maxlength attribute (input maxlength, textarea maxlength).

Suffering from being too short

When a control has a value that is too short for the form control minlength attribute (input minlength, textarea minlength).

Suffering from an underflow

When a control has a value that is not the empty string and is too low for the min attribute.

Suffering from an overflow

When a control has a value that is not the empty string and is too high for the max attribute.

Suffering from a step mismatch

When a control has a value that doesn't fit the rules given by the step attribute.

Suffering from bad input

When a control has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state.

Suffering from a custom error

When a control's custom validity error message (as set by the element's setCustomValidity() method) is not the empty string.

An element can still suffer from these states even when the element is disabled; thus these states can be represented in the DOM even if validating the form during submission wouldn't indicate a problem to the user.

An element satisfies its constraints if it is not suffering from any of the above validity states.

4.10.20.2 Constraint validation

When the user agent is required to statically validate the constraints of form element form, it must run the following steps, which return either a positive result (all the controls in the form are valid) or a negative result (there are invalid controls) along with a (possibly empty) list of elements that are invalid and for which no script has claimed responsibility:

  1. Let controls be a list of all the submittable elements whose form owner is form, in tree order.

  2. Let invalid controls be an initially empty list of elements.

  3. For each element field in controls, in tree order:

    1. If field is not a candidate for constraint validation, then move on to the next element.

    2. Otherwise, if field satisfies its constraints, then move on to the next element.

    3. Otherwise, add field to invalid controls.

  4. If invalid controls is empty, then return a positive result and abort these steps.

  5. Let unhandled invalid controls be an initially empty list of elements.

  6. For each element field in invalid controls, if any, in tree order:

    1. Let notCanceled be the result of firing an event named invalid at field, with the cancelable attribute initialized to true.

    2. If notCanceled is true, then add field to unhandled invalid controls.

  7. Return a negative result with the list of elements in the unhandled invalid controls list.

If a user agent is to interactively validate the constraints of form element form, then the user agent must run the following steps:

  1. Statically validate the constraints of form, and let unhandled invalid controls be the list of elements returned if the result was negative.

  2. If the result was positive, then return that result and abort these steps.

  3. Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user. User agents may focus one of those elements in the process, by running the focusing steps for that element, and may change the scrolling position of the document, or perform some other action that brings the element to the user's attention. User agents may report more than one constraint violation. User agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a group are marked as required, only one error need be reported). If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.

  4. Return a negative result.

4.10.20.3 The constraint validation API
element . willValidate

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

element . setCustomValidity(message)

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

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

element . validity . valueMissing

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

element . validity . typeMismatch

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

element . validity . patternMismatch

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

element . validity . tooLong

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

element . validity . tooShort

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

element . validity . rangeUnderflow

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

element . validity . rangeOverflow

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

element . validity . stepMismatch

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

element . validity . badInput

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

element . validity . customError

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

element . validity . valid

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

valid = element . checkValidity()

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

valid = element . reportValidity()

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

element . validationMessage

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

The willValidate attribute's getter must return true, if this element is a candidate for constraint validation, and false otherwise (i.e., false if any conditions are barring it from constraint validation).

The setCustomValidity(message) method, when invoked, must set the custom validity error message to message.

次の例において、スクリプトは値が編集されるたびにフォームコントロールの値をチェックし、かつ妥当な値でない場合はいつでも、適切なメッセージを設定するために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>

The validity attribute's getter must return a ValidityState object that represents the validity states of this element. This object is live.

interface ValidityState {
  readonly attribute boolean valueMissing;
  readonly attribute boolean typeMismatch;
  readonly attribute boolean patternMismatch;
  readonly attribute boolean tooLong;
  readonly attribute boolean tooShort;
  readonly attribute boolean rangeUnderflow;
  readonly attribute boolean rangeOverflow;
  readonly attribute boolean stepMismatch;
  readonly attribute boolean badInput;
  readonly attribute boolean customError;
  readonly attribute boolean valid;
};

A ValidityState object has the following attributes. On getting, they must return true if the corresponding condition given in the following list is true, and false otherwise.

valueMissing

The control is suffering from being missing.

typeMismatch

The control is suffering from a type mismatch.

patternMismatch

The control is suffering from a pattern mismatch.

tooLong

The control is suffering from being too long.

tooShort

The control is suffering from being too short.

rangeUnderflow

The control is suffering from an underflow.

rangeOverflow

The control is suffering from an overflow.

stepMismatch

The control is suffering from a step mismatch.

badInput

The control is suffering from bad input.

customError

The control is suffering from a custom error.

valid

None of the other conditions are true.

The checkValidity() method, when invoked, must run these steps:

  1. If this element is a candidate for constraint validation and does not satisfy its constraints, then:

    1. Fire an event named invalid at this element, with the cancelable attribute initialized to true (though canceling has no effect).

    2. Return false.

  2. Return true.

The reportValidity() method, when invoked, must run these steps:

  1. If this element is a candidate for constraint validation and does not satisfy its constraints, then:

    1. Let report be the result of firing an event named invalid at this element, with the cancelable attribute initialized to true.

    2. If report is true, then report the problems with the constraints of this element to the user. When reporting the problem with the constraints to the user, the user agent may run the focusing steps for this element, and may change the scrolling position of the document, or perform some other action that brings this element to the user's attention. User agents may report more than one constraint violation, if this element suffers from multiple problems at once. If this element is not being rendered, then the user agent may, instead of notifying the user, report the error for the running script.

    3. Return false.

  2. Return true.

The validationMessage attribute's getter must run these steps:

  1. If this element is not a candidate for constraint validation or if this element satisfies its constraints, then return the empty string.

  2. Return a suitably localized message that the user agent would show the user if this were the only form control with a validity constraint problem. If the user agent would not actually show a textual message in such a situation (e.g., it would show a graphical cue instead), then return a suitably localized message that expresses (one or more of) the validity constraint(s) that the control does not satisfy. If the element is a candidate for constraint validation and is suffering from a custom error, then the custom validity error message should be present in the return value.

4.10.20.4 セキュリティー

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

4.10.21 Form submission

4.10.21.1 導入

この節は非規範的である。

フォームが送信される際、フォーム内のデータは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.2 Implicit submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.

There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents are strongly encouraged to support this.

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Date, Month, Week, Time, Local Date and Time, Number

4.10.21.3 Form submission algorithm

When a form element form is submitted from an element submitter (typically a button), optionally with a submitted from submit() method flag set, the user agent must run the following steps:

  1. If form is not connected, then return.

    This check is currently under discussion, and may be either removed or expanded. See issue #2615 and issue #2708.

  2. Let form document be the form's node document.

  3. If form document has no associated browsing context, or its active sandboxing flag set has its sandboxed forms browsing context flag set, then return.

  4. Let form browsing context be the browsing context of form document.

  5. If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then fire an event named invalid at the form element and then abort these steps.

  6. If the submitted from submit() method flag is not set, then:

    1. Let continue be the result of firing an event named submit at form, with the bubbles attribute initialized to true and the cancelable attribute initialized to true.

    2. If continue is false, then abort these steps.

  7. Let form data set be the result of constructing the form data set for form in the context of submitter.

  8. Let encoding be the result of picking an encoding for the form.

  9. Let action be the submitter element's action.

  10. If action is the empty string, let action be the URL of the form document.

  11. Parse the URL action, relative to the submitter element's node document. これが失敗する場合、この手順を中止する。

  12. Let parsed action be the resulting URL record.

  13. Let scheme be the scheme of parsed action.

  14. Let enctype be the submitter element's enctype.

  15. Let method be the submitter element's method.

  16. Let target be the submitter element's target.

  17. Let target browsing context and replace be the result of applying the rules for choosing a browsing context using target and form browsing context.

  18. If target browsing context is null, then return.

  19. If form document has not yet completely loaded and the submitted from submit() method flag is set, then set replace to true.

  20. If the value of method is dialog then jump to the submit dialog steps.

    Otherwise, select the appropriate row in the table below based on the value of scheme as given by the first cell of each row. Then, select the appropriate cell on that row based on the value of method as given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table.

    GET POST
    http Mutate action URL Submit as entity body
    https Mutate action URL Submit as entity body
    ftp Get action URL Get action URL
    javascript Get action URL Get action URL
    data Mutate action URL Get action URL
    mailto Mail with headers Mail as body

    If scheme is not one of those listed in this table, then the behavior is not defined by this specification. User agents should, in the absence of another specification defining this, act in a manner analogous to that defined in this specification for similar schemes.

    Each form element has a planned navigation, which is either null or a task; when the form is first created, its planned navigation must be set to null. In the behaviors described below, when the user agent is required to plan to navigate to a particular resource destination, it must run the following steps:

    1. If the form has a non-null planned navigation, remove it from its task queue.

    2. Let the form's planned navigation be a new task that consists of running the following steps:

      1. Let the form's planned navigation be null.

      2. Navigate target browsing context to destination. If replace is true, then target browsing context must be navigated with replacement enabled.

      For the purposes of this task, target browsing context and replace are the variables that were set up when the overall form submission algorithm was run, with their values as they stood when this planned navigation was queued.

    3. Queue the task that is the form's new planned navigation.

      The task source for this task is the DOM manipulation task source.

    The behaviors are as follows:

    Mutate action URL

    Let query be the result of running the application/x-www-form-urlencoded serializer with form data set and encoding.

    Set parsed action's query component to query.

    Plan to navigate to parsed action.

    Submit as entity body

    Switch on enctype:

    application/x-www-form-urlencoded

    Let body be the result of running the application/x-www-form-urlencoded serializer with form data set and encoding.

    Set body to the result of encoding body.

    Let MIME type be "application/x-www-form-urlencoded".

    multipart/form-data

    Let body be the result of running the multipart/form-data encoding algorithm with form data set and encoding.

    Let MIME type be the concatenation of the string "multipart/form-data;", a U+0020 SPACE character, the string "boundary=", and the multipart/form-data boundary string generated by the multipart/form-data encoding algorithm.

    text/plain

    Let body be the result of running the text/plain encoding algorithm with form data set and encoding.

    Set body to the result of encoding body using encoding.

    Let MIME type be "text/plain".

    Plan to navigate to a new request whose url is parsed action, method is method, header list consists of `Content-Type`/MIME type, and body is body.

    Get action URL

    Plan to navigate to parsed action.

    The form data set is discarded.

    Mail with headers

    Let headers be the result of running the application/x-www-form-urlencoded serializer with form data set and encoding.

    Replace occurrences of U+002B PLUS SIGN characters (+) in headers with the string "%20".

    Set parsed action's query to headers.

    Plan to navigate to parsed action.

    Mail as body

    Switch on enctype:

    text/plain

    Let body be the result of running the text/plain encoding algorithm with form data set and encoding.

    Set body to the result of concatenating the result of UTF-8 percent encoding each code point in body, using the default encode set. [URL]

    そうでなければ

    Let body be the result of running the application/x-www-form-urlencoded serializer with form data set and encoding.

    If parsed action's query is null, then set it to the empty string.

    If parsed action's query is not the empty string, then append a single U+0026 AMPERSAND character (&) to it.

    Append "body=" to parsed action's query.

    Append body to parsed action's query.

    Plan to navigate to parsed action.

    Submit dialog

    Let subject be the nearest ancestor dialog element of form, if any.

    If there isn't one, or if it does not have an open attribute, do nothing. Otherwise, proceed as follows:

    If submitter is an input element whose type attribute is in the Image Button state, then let result be the string formed by concatenating the selected coordinate's x-component, expressed as a base-ten number using ASCII digits, a U+002C COMMA character (,), and the selected coordinate's y-component, expressed in the same way as the x-component.

    Otherwise, if submitter has a value, then let result be that value.

    Otherwise, there is no result.

    Then, close the dialog subject. If there is a result, let that be the return value.

4.10.21.4 Constructing the form data set

The algorithm to construct the form data set for a form form optionally in the context of a submitter submitter is as follows. If not specified otherwise, submitter is null.

  1. Let controls be a list of all the submittable elements whose form owner is form, in tree order.

  2. Let the form data set be a list of name-value-type tuples, initially empty.

  3. For each element field in controls, in tree order:

    1. If any of the following is true:

      • The field element has a datalist element ancestor.
      • The field element is disabled.
      • The field element is a button but it is not submitter.
      • The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
      • The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
      • The field element is not an input element whose type attribute is in the Image Button state, and either the field element does not have a name attribute specified, or its name attribute's value is the empty string.
      • The field element is an object element that is not using a plugin.

      Then continue.

    2. Let type be the value of the type IDL attribute of field.

    3. If the field element is an input element whose type attribute is in the Image Button state, then:

      1. If the field element has a name attribute specified and its value is not the empty string, let name be that value followed by a single U+002E FULL STOP character (.). Otherwise, let name be the empty string.

      2. Let namex be the string consisting of the concatenation of name and a single U+0078 LATIN SMALL LETTER X character (x).

      3. Let namey be the string consisting of the concatenation of name and a single U+0079 LATIN SMALL LETTER Y character (y).

      4. The field element is submitter, and before this algorithm was invoked the user indicated a coordinate. Let x be the x-component of the coordinate selected by the user, and let y be the y-component of the coordinate selected by the user.

      5. Append an entry to the form data set with the name namex, the value x, and the type type.

      6. Append an entry to the form data set with the name namey and the value y, and the type type.

      7. Continue.

    4. Let name be the value of the field element's name attribute.

    5. If the field element is a select element, then for each option element in the select element's list of options whose selectedness is true and that is not disabled, append an entry to the form data set with the name as the name, the value of the option element as the value, and type as the type.

    6. Otherwise, if the field element is an input element whose type attribute is in the Checkbox state or the Radio Button state, then:

      1. If the field element has a value attribute specified, then let value be the value of that attribute; otherwise, let value be the string "on".

      2. Append an entry to the form data set with name as the name, value as the value, and type as the type.

    7. Otherwise, if the field element is an input element whose type attribute is in the File Upload state, then for each file selected in the input element, append an entry to the form data set with the name as the name, the file (consisting of the name, the type, and the body) as the value, and type as the type. If there are no selected files, then append an entry to the form data set with the name as the name, the empty string as the value, and application/octet-stream as the type.

    8. Otherwise, if the field element is an object element: try to obtain a form submission value from the plugin, and if that is successful, append an entry to the form data set with name as the name, the returned form submission value as the value, and the string "object" as the type.

    9. Otherwise, append an entry to the form data set with name as the name, the value of the field element as the value, and type as the type.

    10. If the element has a dirname attribute, and that attribute's value is not the empty string, then:

      1. Let dirname be the value of the element's dirname attribute.

      2. Let dir be the string "ltr" if the directionality of the element is 'ltr', and "rtl" otherwise (i.e. when the directionality of the element is 'rtl').

      3. Append an entry to the form data set with dirname as the name, dir as the value, and the string "direction" as the type.

      An element can only have a dirname attribute if it is a textarea element or an input element whose type attribute is in either the Text state or the Search state.

  4. For the name of each entry in the form data set, and for the value of each entry in the form data set whose type is not "file" or "textarea", replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), by a string consisting of a U+000D (CR) and U+000A (LF).

    In the case of the value of textarea elements, this newline normalization is already performed during the conversion of the control's raw value into the control's value (which also performs any necessary line wrapping). In the case of input elements type attributes in the File Upload state, the value is not normalized.

  5. Replace the name of each entry in the form data set, and the value of each entry in the form data set whose type is not "file", with the results of converting to a sequence of Unicode scalar values.

  6. Return the form data set.

4.10.21.5 Selecting a form submission encoding

If the user agent is to pick an encoding for a form, it must run the following steps:

  1. Let encoding be the document's character encoding.

  2. If the form element has an accept-charset attribute, set encoding to the return value of running these substeps:

    1. Let input be the value of the form element's accept-charset attribute.

    2. Let candidate encoding labels be the result of splitting input on ASCII whitespace.

    3. Let candidate encodings be an empty list of character encodings.

    4. For each token in candidate encoding labels in turn (in the order in which they were found in input), get an encoding for the token and, if this does not result in failure, append the encoding to candidate encodings.

    5. If candidate encodings is empty, return UTF-8.

    6. Return the first encoding in candidate encodings.

  3. Return the result of getting an output encoding from encoding.

4.10.21.6 URLエンコードフォームデータ

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

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

Spec bugs: 16909

The multipart/form-data encoding algorithm, given a form data set and encoding, is as follows:

  1. Let result be the empty string.

  2. Let charset be the name of encoding.

  3. For each entry in the form data set:

    1. If the entry's name is "_charset_" and its type is "hidden", replace its value with charset.

    2. For each character in the entry's name and value that cannot be expressed using the selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND character (&), a U+0023 NUMBER SIGN character (#), one or more ASCII digits representing the code point of the character in base ten, and finally a U+003B (;).

  4. Encode the (now mutated) form data set using the rules described by RFC 7578, Returning Values from Forms: multipart/form-data, and return the resulting byte stream. [RFC7578]

    Each entry in the form data set is a field, the name of the entry is the field name and the value of the entry is the field value.

    The order of parts must be the same as the order of fields in the form data set. Multiple entries with the same name must be treated as distinct fields.

    The parts of the generated multipart/form-data resource that correspond to non-file fields must not have a `Content-Type` header specified. Their names and values must be encoded using the character encoding selected above.

    File names included in the generated multipart/form-data resource (as part of file fields) must use the character encoding selected above, though the precise name may be approximated if necessary (e.g. newlines could be removed from file names, quotes could be changed to "%22", and characters not expressible in the selected character encoding could be replaced by other characters).

    The boundary used by the user agent in generating the return value of this algorithm is the multipart/form-data boundary string. (This value is used to generate the MIME type of the form submission payload generated by this algorithm.)

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

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

The text/plain encoding algorithm, given a form data set and encoding, is as follows:

  1. Let result be the empty string.

  2. Let charset be the name of encoding.

  3. For each entry in the form data set:

    1. If the entry's name is "_charset_" and its type is "hidden", replace its value with charset.

    2. If the entry's type is "file", replace its value with the file's name only.

    3. Append the entry's name to result.

    4. Append a single U+003D EQUALS SIGN character (=) to result.

    5. Append the entry's value to result.

    6. Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF) character pair to result.

  4. Return result.

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

4.10.22 Resetting a form

When a form element form is reset, run these steps:

  1. Let reset be the result of firing an event named reset at form, with the bubbles and cancelable attributes initialized to true.

  2. If reset is true, then invoke the reset algorithm of each resettable element whose form owner is form.

Each resettable element defines its own reset algorithm. Changes made to form controls as part of these algorithms do not count as changes caused by the user (and thus, e.g., do not cause input events to fire).