HTML: The Living Standard

Edition for Web Developers — Last Updated 13 November 2024

1. 1. 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である場合、デフォルト値は無視される。

input、textareaおよび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であるといわれる。

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

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

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

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

element.form

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

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

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

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

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

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

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

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

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=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属性を指定される場合、属性値は妥当な非負の整数でなければならない。属性が指定され、数をもたらすその値に非負整数を解析するための規則を適用する場合、その数は要素の最小許容値の長さである。属性を省略する、またはその値を解析しエラーとなる場合、最小許容値の長さは存在しない。

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

<form action="/events/menu.cgi" method="post">
 <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
 <p><label>Describe what you would like for breakfast, if anything:
    <textarea name="breakfast" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for lunch, if anything:
    <textarea name="lunch" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for dinner, if anything:
    <textarea name="dinner" minlength="10"></textarea></label></p>
 <p><input type=submit value="Submit Request"></p>
</form>

4.10.18.5 フォームコントロールの有効化および無効化：disabled属性

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

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

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

• 要素がbutton、input、select、textareaまたはフォームに関連付けられたカスタム要素であり、かつ（その値に関わらず）この要素にdisabled属性が指定される。

• 要素がdisabled属性が指定されるfieldset要素の子孫であり、かつもしあればそのfieldset要素の所有する最初のlegend要素の子に属する子孫でない。

4.10.18.6 フォーム送信属性

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

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

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

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

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

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

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

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

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

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

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

<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"キーワードおよび対応する状態。
• "multipart/form-data"キーワードおよび対応する状態。
• "text/plain"キーワードおよび対応する状態。

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

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

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

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

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

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

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

ユーザーエージェントは、たとえば以前のユーザー入力に基づくユーザーのアドレスを事前に入力するなど、ユーザーにフォームの記入を助けるための機能を持つこともある。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大文字・小文字不区別で一致するトークン：

   • フィールドが、配送先住所や連絡先情報の一部であることを意味する"shipping"
   • フィールドが、請求先住所や連絡先情報の一部であることを意味する"billing"

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

   • コントロールには不適当であるものを除いて、以下のオートフィルフィールド名のいずれかとASCII大文字・小文字不区別で一致するトークン：

     • "name"
     • "honorific-prefix"
     • "given-name"
     • "additional-name"
     • "family-name"
     • "honorific-suffix"
     • "nickname"
     • "username"
     • "new-password"
     • "current-password"
     • "one-time-code"
     • "organization-title"
     • "organization"
     • "street-address"
     • "address-line1"
     • "address-line2"
     • "address-line3"
     • "address-level4"
     • "address-level3"
     • "address-level2"
     • "address-level1"
     • "country"
     • "country-name"
     • "postal-code"
     • "cc-name"
     • "cc-given-name"
     • "cc-additional-name"
     • "cc-family-name"
     • "cc-number"
     • "cc-exp"
     • "cc-exp-month"
     • "cc-exp-year"
     • "cc-csc"
     • "cc-type"
     • "transaction-currency"
     • "transaction-amount"
     • "language"
     • "bday"
     • "bday-day"
     • "bday-month"
     • "bday-year"
     • "sex"
     • "url"
     • "photo"

     （これらの値の説明については、以下の表を参照のこと。）

   • 以下の与えられた順序で：

     1. 任意で、以下の文字列のいずれかとASCII大文字・小文字不区別で一致するトークン：

        • 居住地で誰かに接触するためのフィールドを意味する"home"
        • 職場で誰かに接触するためのフィールドを意味する"work"
        • 場所に関係なく誰かに接触するためのフィールドを意味するmobile"
        • ファックスの連絡先の詳細を説明であるフィールドを意味する"fax"
        • ポケットベルの連絡先の詳細を説明するフィールドを意味する"pager"

     2. コントロールには不適当であるものを除いて、以下のオートフィルフィールド名のいずれかとASCII大文字・小文字不区別で一致するトークン：

        • "tel"
        • "tel-country-code"
        • "tel-national"
        • "tel-area-code"
        • "tel-local"
        • "tel-local-prefix"
        • "tel-local-suffix"
        • "tel-extension"
        • "email"
        • "impp"

        （これらの値の説明については、以下の表を参照のこと。）

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列目でオートフィルフィールドにリストされたグループに属していない場合、オートフィルフィールド名は、コントロールには不適当である。 どのようなコントロールが各グループに分類されるかは、下記の表に記載される。

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

テキスト

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

✔MDN

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+

HTMLInputElement/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"

選択を保持しようとする。これはデフォルトである。

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

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

4.10.20 制約

4.10.20.1 制約検証API

element.willValidate

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

element.setCustomValidity(message)

✔MDN

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

✔MDN

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

✔MDN

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

✔MDN

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

✔MDN

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

✔MDN

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

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

<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インターフェイス

event.submitter

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

4.10.21.5 FormDataEventインターフェイス

event.formData

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