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 制約検証API
        2. 4.10.20.2 セキュリティ
      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である場合、デフォルト値は無視される。

inputtextareaおよびselect要素は、ユーザー妥当性真偽値を持つ。It is initially set to false.

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

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

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

4.10.17.2 可変性

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

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

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

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

フォームに関連付けられた要素は、関連するパーサー挿入フラグを持つ。

Element/input#form

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Attributes#attr-form

Support in all current engines.

Firefox1+Safari≤4+Chrome1+
Opera≤12.1+Edge79+
Edge (Legacy)12+Internet Explorer≤6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android≤12.1+

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

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

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

element.form

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

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

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

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

Element/input#name

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

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

isindex以外で、nameに対して任意の空でない値が許可される。ASCII大文字・小文字不区別で一致する名前_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属性

Element/input#dirname

Support in all current engines.

Firefox116+Safari6+Chrome17+
Opera12.1+Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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属性

Attributes/disabled

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Attributes/disabled

Support in all current engines.

Firefox4+Safari6+Chrome20+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

Attributes/disabled

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Attributes/disabled

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Attributes/disabled

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

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

次のいずれかに該当する場合、フォームコントロールは無効になる:

4.10.18.6 フォーム送信属性

Element/form#Attributes_for_form_submission

Support in all current engines.

Firefox4+Safari10.1+Chrome10+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

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

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

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


Element/input#formaction

Support in all current engines.

Firefox4+Safari5+Chrome9+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

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

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


Element/input#formmethod

Support in all current engines.

Firefox4+Safari5+Chrome9+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

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

キーワード状態概要
getGETformがHTTP GETメソッドを使用することを示す。
postPOSTformがHTTP POSTメソッドを使用することを示す。
dialogDialogformは、もしあれば、フォーム自身が存在する dialogボックスを閉じ、そうでなければは送信しないことを示す。

method属性の欠損値のデフォルト不正値のデフォルトの両方は、GET状態である。

formmethod属性の欠損値のデフォルト不正値のデフォルトは両方ともGET状態である。

要素のメソッドはこれらの状態のいずれかである。要素が送信ボタンでありかつ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>

Element/input#formenctype

Support in all current engines.

Firefox4+Safari5+Chrome9+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

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

属性の欠損値のデフォルト不正値のデフォルト</46>は、どちらもapplication/x-www-form-urlencoded状態である。

formenctype属性の欠損値のデフォルトと、その不正値のデフォルトは、application/x-www-form-urlencoded状態である。

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


Element/input#formtarget

Support in all current engines.

Firefox4+Safari5+Chrome9+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

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


Element/input#formnovalidate

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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 オートフィル
4.10.18.7.1 オートフィルフォームコントロール:autocomplete属性

Attributes/autocomplete

Support in all current engines.

Firefox4+Safari6+Chrome14+
Opera12.1+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

ユーザーエージェントは、たとえば以前のユーザー入力に基づくユーザーのアドレスを事前に入力するなど、ユーザーにフォームの記入を助けるための機能を持つこともある。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つのオプションについていずれか:

  4. オプションで、文字列"webauthn"とASCII大文字小文字不区別で一致するトークン。これは、ユーザーエージェントは、ユーザーがフォームコントロールを操作するときに、conditionalメディエーションを介して利用可能な公開鍵クレデンシャルを表示すべきであることを意味する。 webauthnは、input要素とtextarea要素に対してのみ有効である。

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

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

"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番目に、および他の多くは、単に1つの名前を(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"ユーザー名自由形式テキスト、改行なしtimblUsername
"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.orgUsername
"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要素
Username
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Email状態のtype属性をもつ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()

HTMLInputElement/select

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

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"
選択を保持しようとする。これはデフォルトである。

現在選択されているテキストを取得するためには、次の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 制約検証API
element.willValidate

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

element.setCustomValidity(message)

HTMLInputElement/setCustomValidity

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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

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

element.validity.valueMissing

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

element.validity.typeMismatch

ValidityState/typeMismatch

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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

element.validity.patternMismatch

ValidityState/patternMismatch

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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

element.validity.tooLong

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

element.validity.tooShort

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

element.validity.rangeUnderflow

ValidityState/rangeUnderflow

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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

element.validity.rangeOverflow

ValidityState/rangeOverflow

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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

element.validity.stepMismatch

ValidityState/stepMismatch

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

要素の値が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

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

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

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

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

Support in all current engines.

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

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

4.10.21.5 FormDataEventインターフェイス

FormDataEvent/FormDataEvent

Support in all current engines.

Firefox72+Safari15+Chrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

FormDataEvent

Support in all current engines.

Firefox72+Safari15+Chrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
event.formData

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