Warning:
This wiki has been archived and is now read-only.
View source for HTML5/association-of-controls-and-forms

← HTML5/association-of-controls-and-forms
Jump to: navigation, search
You do not have permission to edit this page, for the following reason:
The action you have requested is limited to users in one of the groups: Users, 106.
You can view and copy the source of this page.
__NOTOC__
==== 控制項與表單的連結 ====
{{eng ver|http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html}}

一個[[HTML5/forms#form-associated-element|表單連結元素]]可以與一個 <code>[[HTML5/forms#the-form-element|form]]</code> 元素有連結，為它的<b id="form-owner">主表單</b>。若一個[[HTML5/forms#form-associated-element|表單連結元素]]並沒有一個相連的 <code>[[HTML5/forms#the-form-element|form]]</code> 元素，則稱其[[#form-owner|主表單]]為空值。

一個[[HTML5/forms#form-associated-element|表單連結元素]]預設為與最近的祖先 <code>[[HTML5/forms#the-form-element|form]]</code> 元素（下面描述），但是 <b id="attr-fae-form"><code>form</code></b> 屬性可以覆蓋這個設定。

{{note|由於瀏覽器不支援巢狀 <code>[[HTML5/forms#the-form-element|form]]</code> 元素，這個功能提供了一個繞道方法。}}

若網頁作者在一個[[HTML5/forms#form-associated-element|表單連結元素]]上指定一個 <code>[[#attr-fae-form|form]]</code> 屬性的值，則該值必須為該元素主 <code>[[HTML5/infrastructure#document|Document]]</code> 裡的一個 <code>[[HTML5/forms#the-form-element|form]]</code> 元素的 [[HTML5/elements#concept-id|ID]]。

{{note|儘管符合規範的文件絕不會有巢狀 <code>[[HTML5/forms#the-form-element|form]]</code> 元素 ，生成這種文件（比如說使用操作 DOM 的腳本）卻是可能的，這讓本小節的規則變得複雜。由於歷史因素，HTML 解析器會產生與不是其祖先的 <code>[[HTML5/forms#the-form-element|form]]</code> 元素相連的[[HTML5/forms#form-associated-element|表單連結元素]]，更增加複雜度。}}

當一個[[HTML5/forms#form-associated-element|表單連結元素]]誕生時，使用者代理必須將其[[#form-owner|主表單]]初始化為空值（沒有主表單）。

當一個[[HTML5/forms#form-associated-element|表單連結元素]]與一個表單<b id="concept-form-association">相連</b>時，使用者代理必須將其[[#form-owner|主表單]]設為該表單。

當一個[[HTML5/forms#form-associated-element|表單連結元素]]的祖先鏈變動（比如說使用者將它或是它的祖先[[HTML5/infrastructure#insert-an-element-into-a-document|進入]]到該 <code>[[HTML5/infrastructure#document|Document]]</code> 或是從該 <code>[[HTML5/infrastructure#document|Document]]</code> [[HTML5/infrastructure#remove-an-element-from-a-document|離去]]）時，使用者代理必須[[#reset-the-form-owner|重設該元素的主表單]]。{{note|[[HTML5/parsing#html-parser|HTML 解析器]]在插入表單控制項的時候無視這項規則}}

當一個[[HTML5/forms#form-associated-element|表單連結元素]]的 <code>[[#attr-fae-form|form]]</code> 屬性被設置、變更、移去時，使用者代理必須[[#reset-the-form-owner|重設該元素的主表單]]。

當一個[[HTML5/forms#form-associated-element|表單連結元素]]有 <code>[[#attr-fae-form|form]]</code> 屬性且該 <code>[[HTML5/infrastructure#document|Document]]</code> 的任一個元素的 [[HTML5/elements#concept-id|ID]] 更動時，使用者代理必須[[#reset-the-form-owner|重設該表單連結元素的主表單]]。

當一個[[HTML5/forms#form-associated-element|表單連結元素]]有 <code>[[#attr-fae-form|form]]</code> 屬性且一個有 [[HTML5/elements#concept-id|ID]] 的元素[[HTML5/infrastructure#insert-an-element-into-a-document|進入]]到該 <code>[[HTML5/infrastructure#document|Document]]</code> 或是從該 <code>[[HTML5/infrastructure#document|Document]]</code> [[HTML5/infrastructure#remove-an-element-from-a-document|離去]]時，使用者代理必須[[#reset-the-form-owner|重設該表單連結元素的主表單]]。

當使用者代理要<b id="reset-the-form-owner">重設一個表單連結元素的主表單</b>時，它必須執行下列步驟：

# 若該元素的[[#form-owner|主表單]]不為空值，且該元素沒有 <code>[[#attr-fae-form|form]]</code> 內容屬性，且祖先鏈變動後該元素的[[#form-owner|主表單]]是最近的祖先 <code>[[HTML5/forms#the-form-element|form]]</code> 元素，則不做任何事並退出這些步驟。
# 設該元素的[[#form-owner|主表單]]為空值。
# 若該元素有內容屬性 <code>[[#attr-fae-form|form]]</code> ，執行以下步驟：
## 若第一個「滿足[[HTML5/infrastructure#in-a-document|在 <code>Document</code> 內]]且其 [[HTML5/elements#concept-id|ID]] 在[[HTML5/infrastructure#case-sensitive|區分大小寫]]下等同於[[HTML5/forms#form-associated-element|表單連結元素]]的內容屬性 <code>[[#attr-fae-form|form]]</code> 的值」的元素是一個 <code>[[HTML5/forms#the-form-element|form]]</code> 元素，則將該[[HTML5/forms#form-associated-element|表單連結元素]]與 <code>[[HTML5/forms#the-form-element|form]]</code> 元素[[#concept-form-association|相連]]。
## 退出「重設一個表單連結元素的主表單」的步驟。
# 否則，若該[[HTML5/forms#form-associated-element|表單連結元素]]有一個祖先 <code>[[HTML5/forms#the-form-element|form]]</code> 元素，則將該[[HTML5/forms#form-associated-element|表單連結元素]]與最近的祖先 <code>[[HTML5/forms#the-form-element|form]]</code> [[#concept-form-association|相連]]。
# 否則，該元素沒有相連表單。

{{codesample|在下面的不合法片段裡：

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

"d" 的[[#form-owner|主表單]]是巢狀表單內測的 "c"，但 "e" 的[[#form-owner|主表單]]是外側的 "a"。

事情發生順序如下：首先，"e" 節點在 [[HTML5/parsing#html-parser|HTML 解析器]]內與 "c" 相連。後來，<code>[[HTML5/elements#dom-innerhtml|innerHTML]]</code> 演算法將這些節點從暫時文件移到 "b" 元素上。在這個時候，這些節點看到祖先鏈的變動，也因此解析器的「魔法」相連被重設成一般的祖先相連。

此範例為為不合法的文件，因為它違背了內容模型不允許巢狀 <code>[[HTML5/forms#the-form-element|form]]</code> 元素的規定。}}

{{non-normative|
<var>元素</var> . <code>[[#dom-fae-form|form]]</code>

回傳元素的[[#form-owner|主表單]]。

若沒有則回傳空值。}}

[[HTML5/forms#form-associated-element|表單連結元素]] 有  IDL 屬性 <b id="dom-fae-form"><code>form</code></b>。該屬性在獲取時必須回傳元素的[[#form-owner|主表單]]，或是在沒有[[#form-owner|主表單]]時回傳空值。

==== 表單控制項的共通屬性 ====
===== 為表單控制項命名 =====
內容屬性 <b id="attr-fe-name"><code>name</code></b> 可以用來命名表單控制項，表單的命名直接影響[[#form-submission|表單提交]]的過程與 <code>[[HTML5/forms#the-form-element|form]]</code> 元素的 <code>[[HTML5/forms#dom-form-elements|elements]]</code> 物件。若網頁作者欲設定此屬性，則它的取值必不可為空字串。

本規範允許任何非空的 <code>[[#attr-fe-name|name]]</code> 值，但是 "<code>[[#attr-fe-name-charset|_charset_]]</code>" 與 "<code>[[#attr-fe-name-isindex|isindex]]</code>" 這兩個值有特殊作用：

<b id="attr-fe-name-isindex"><code>isindex</code></b>

若一個用 <code>[[#attr-fs-enctype-urlencoded|application/x-www-form-urlencoded]]</code> 作為提交機制的表單的第一個控制項為[[HTML5/states-of-the-type-attribute#text-state-and-search-state|文字]]控制項且其名字為這個值，則表單僅提交這個控制項取值，不送出名字。

<b id="attr-fe-name-charset"><code>_charset_</code></b>

若沒有 <code>[[HTML5/the-input-element#attr-input-value|value]]</code> 屬性的[[HTML5/states-of-the-type-attribute#hidden-state|隱藏]]控制項的名字為這個值，則表單提交時的控制項取值自動變成提交的編碼。

IDL 屬性 <b id="dom-fe-name"><code>name</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fe-name|name]]</code>。

===== 啟用和停用控制項 =====
內容屬性 <b id="attr-fe-disabled"><code>disabled</code></b> 是一個[[HTML5/common-microsyntaxes#boolean-attribute|布林屬性]]。

若一個表單控制項設有 <code>[[#attr-fe-disabled|disabled]]</code> 屬性，或者它是一個設有 <code>[[HTML5/forms#attr-fieldset-disabled|disabled]]</code> 屬性的 <code>[[HTML5/forms#the-fieldset-element|fieldset]]</code> 元素的子嗣但「不是」該 <code>[[HTML5/forms#the-fieldset-element|fieldset]]</code> 元素的第一個 <code>[[HTML5/forms#the-legend-element|legend]]</code> 子元素（若存在）的子嗣，則這個表單控制項處於<b id="concept-fe-disabled">停用狀態</b>。

處於[[#concept-fe-disabled|停用狀態]]的表單控制項必須防止任何[[HTML5/webappapis#user-interaction-task-source|使用者互動任務源]]上[[HTML5/webappapis#queue-a-task|隊列]]的 <code>[[HTML5/infrastructure#event-click|click]]</code> 事件被分發到元素上。

'''約束驗證'''：若一個元素處於[[#concept-fe-disabled|停用狀態]]，則[[#barred-from-constraint-validation|不進行這個元素的約束驗證]]。

IDL 屬性 <b id="dom-fe-disabled"><code>disabled</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fe-disabled|disabled]]</code>。

===== 控制項的取值 =====
每個表單控制項都具有<b id="concept-fe-value">取值</b>與<b id="concept-fe-checked">確認標記</b>。（僅有 <code>[[HTML5/the-input-element#the-input-element|input]]</code> 元素有後者）。這些是描述使用者與控制項互動狀態的變數。

為了定義有 <code>[[HTML5/common-input-element-attributes#attr-input-multiple|multiple]]</code> 屬性的 <code>[[HTML5/the-input-element#the-input-element|input]]</code> 元素的約束驗證行為，<code>[[HTML5/the-input-element#the-input-element|input]]</code> 元素也可能會有另外的<b id="concept-fe-values">取值組</b>變數。

===== 控制項的自動聚焦 =====
內容屬性 <b id="attr-fe-autofocus"><code>autofocus</code></b> 讓網頁作者可以選定頁面讀取完成同時該獲得焦距的控制項，這讓使用者可以立即輸入內容而不需要手動給主要控制項焦距。

<code>[[#attr-fe-autofocus|autofocus]]</code> 屬性是一個[[HTML5/common-microsyntaxes#boolean-attribute|布林屬性]]。

網頁作者必不可指定 <code>[[#attr-fe-autofocus|autofocus]]</code> 屬性在超過一個文件裡的元素上。

當設置了 <code>[[#attr-fe-autofocus|autofocus]]</code> 屬性的元素[[HTML5/infrastructure#insert-an-element-into-a-document|進入到文件裡時]]，使用者代理應該執行下列步驟：

# 設<var>目標</var>為元素的 <code>[[HTML5/infrastructure#document|Document]]</code> 。
# 若<var>目標</var>沒有[[HTML5/browsers#browsing-context|瀏覽上下文]]，退出這些步驟。
# 若<var>目標</var>的[[HTML5/browsers#browsing-context|瀏覽上下文]]沒有[[HTML5/browsers#top-level-browsing-context|頂級瀏覽上下文]]（例如，<var>目標</var>是沒有[[HTML5/browsers#parent-browsing-context|父瀏覽上下文]]的[[HTML5/browsers#nested-browsing-context|嵌套的瀏覽上下文]]），退出這些步驟。
# 若<var>目標</var>的[[HTML5/browsers#browsing-context|瀏覽上下文]]在創建的時候不設有[[HTML5/the-iframe-element#sandboxed-automatic-features-browsing-context-flag|沙盒中的自動機能瀏覽上下文標記]]，退出這些步驟。
# 若<var>目標</var>的[[HTML5/origin-0#origin|來源]]與<var>目標</var>的[[HTML5/browsers#parent-browsing-context|父瀏覽上下文]]中此時有焦距的元素的 <code>[[HTML5/infrastructure#document|Document]]</code> 的[[HTML5/origin-0#origin|來源]]不[[HTML5/origin-0#same-origin|相同]]，退出這些步驟。
# 若<var>目標</var>的[[HTML5/origin-0#origin|來源]]與<var>目標</var>的[[HTML5/browsers#top-level-browsing-context|頂級瀏覽上下文]]的[[HTML5/browsers#active-document|現行文件]]的[[HTML5/origin-0#origin|來源]]不[[HTML5/origin-0#same-origin|相同]]，退出這些步驟。
# 若使用者代理曾經為了回應一個[[HTML5/browsers#top-level-browsing-context|頂級瀏覽上下文]]的[[HTML5/browsers#active-document|現行文件]]與<var>目標</var>的[[HTML5/browsers#top-level-browsing-context|頂級瀏覽上下文]]的[[HTML5/browsers#active-document|現行文件]]相同的元素[[HTML5/infrastructure#insert-an-element-into-a-document|進入]]一個 <code>[[HTML5/infrastructure#document|Document]]</code> 的事件，退出這些步驟。
# 若可以由使用者的行為（例如開始在表單控制項輸入內容）推論使用者不希望聚焦改變，可以退出這些步驟。
# 將以下任務[[HTML5/webappapis#queue-a-task|排入隊列]]：確認該元素[[HTML5/editing#focusable|可得到焦距]]，若可，執行該元素的[[HTML5/editing#focusing-steps|聚焦步驟]]。使用者代理也可以改變文件的捲軸位置，或是用其他方法讓使用者注意到該元素。此任務的[[HTML5/webappapis#task-source|任務源]]為 [[HTML5/webappapis#dom-manipulation-task-source|DOM 操作任務源]]。

{{note|給控制項焦距不代表使用者代理必須給予已失焦的瀏覽器視窗焦距。}}

IDL 屬性 <b id="dom-fe-autofocus"><code>autofocus</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]同樣名稱的內容屬性。

{{codesample|在下面的片段裡，當文件讀取完成的時文字控制項會得到焦距：

<pre><input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search"></pre>}}

===== 限制使用者的輸入長度 =====
<var>髒值標記</var>控制的<b id="attr-fe-maxlength">表單控制項 <code>maxlength</code> 屬性</b>可以用來宣告使用者能輸入的字符數限制。

若網頁作者欲指定一個元素的[[#attr-fe-maxlength|表單控制項 <code>maxlength</code> 屬性]]，該屬性值必須是[[HTML5/common-microsyntaxes#valid-non-negative-integer|合法非負整數]]。若使用者指定此屬性且使用者代理對這個值使用[[HTML5/common-microsyntaxes#rules-for-parsing-non-negative-integers|非負整數解析規則]]進行解析可以得到一個數字，則該數字是此元素的<b id="maximum-allowed-value-length">最大容許取值長度</b> 。若使用者未指定此屬性或解析屬性值發生錯誤，則沒有[[#maximum-allowed-value-length|最大容許取值長度]]。 

'''約束驗證'''：若一個元素具有[[#maximum-allowed-value-length|最大容許取值長度]]，<var>髒值標記</var>為真，[[#concept-fe-value|取值]]最後一次的更改是透過使用者（而不是腳本造成的改變），且元素[[#concept-fe-value|取值]]的[[HTML5/common-microsyntaxes#code-point-length|代碼點長度]]大於元素的[[#maximum-allowed-value-length|最大容許取值長度]]，則該元素[[#suffering-from-being-too-long|苦於過長]]。

使用者代理可以阻止使用者進行讓元素的[[#concept-fe-value|取值]]的[[HTML5/common-microsyntaxes#code-point-length|代碼點長度]]大於元素的[[#maximum-allowed-value-length|最大容許取值長度]]的行為。

===== 表單提交 =====

網頁作者可以在 <code>[[HTML5/forms#the-form-element|form]]</code> 元素或是[[HTML5/forms#concept-submit-button|提交按鈕]]（提交表單按鈕的代表原素，例如 <code>[[HTML5/the-input-element#attr-input-type|type]]</code> 屬性處於[[HTML5/number-state#submit-button-state|提交按鈕]]狀態的 <code>[[HTML5/the-input-element#the-input-element|input]]</code> 元素）上指定<b id="attributes-for-form-submission">表單提交用屬性</b>。

網頁作者可以指定在 <code>[[HTML5/forms#the-form-element|form]]</code> 元素上的[[#attributes-for-form-submission|表單提交用屬性]]有 <code>[[#attr-fs-action|action]]</code>、<code>[[#attr-fs-enctype|enctype]]</code>、<code>[[#attr-fs-method|method]]</code>、<code>[[#attr-fs-novalidate|novalidate]]</code> 與 <code>[[#attr-fs-target|target]]</code>。

網頁作者可以指定在[[HTML5/forms#concept-submit-button|提交按鈕]]上的[[#attributes-for-form-submission|表單提交用屬性]]有相對的 <code>[[#attr-fs-formaction|formaction]]</code>、<code>[[#attr-fs-formenctype|formenctype]]</code>、<code>[[#attr-fs-formmethod|formmethod]]</code>、<code>[[#attr-fs-formnovalidate|formnovalidate]]</code> 與 <code>[[#attr-fs-formtarget|formtarget]]</code>。若未指定，這些屬性的預設值是 <code>[[HTML5/forms#the-form-element|form]]</code> 元素上對應屬性的值。

若網頁作者指定內容屬性 <b id="attr-fs-action"><code>action</code></b> 與 <b id="attr-fs-formaction"><code>formaction</code></b>，則取值必須是[[HTML5/urls#valid-non-empty-url-potentially-surrounded-by-spaces|可能有兩邊空白的合法非空網址]]。

若一個元素為[[HTML5/forms#concept-submit-button|提交按鈕]]且它具有 <code>[[#attr-fs-formaction|formaction]]</code> 屬性，則它的<b id="concept-fs-action">行動</b>是該屬性的值，否則此元素的[[#concept-fs-action|行動]]是其[[#form-owner|主表單]] <code>[[#attr-fs-action|action]]</code> 屬性（若有）的值，否則此元素的[[#concept-fs-action|行動]]是空字串。

內容屬性 <b id="attr-fs-method"><code>method</code></b> 與 <b id="attr-fs-formmethod"><code>formmethod</code></b> 是有以下關鍵字與狀態的[[HTML5/common-microsyntaxes#enumerated-attribute|列舉屬性]]：

* 對應到 <b id="attr-fs-method-get">GET</b> 狀態的關鍵字 <b id="attr-fs-method-get-keyword"><code>get</code></b>，表示 HTTP GET 方法。
* 對應到 <b id="attr-fs-method-post">POST</b> 狀態的關鍵字 <b id="attr-fs-method-post-keyword"><code>post</code></b>，表示 HTTP POST 方法。

這兩個屬性的<var>失蹤預設值</var>是 [[#attr-fs-method-get|GET]] 狀態。

一個元素的<b id="concept-fs-method">方法</b>是這兩個狀態其一。若此元素為[[HTML5/forms#concept-submit-button|提交按鈕]]且它具有 <code>[[#attr-fs-formmethod|formmethod]]</code> 屬性，則此元素的[[#concept-fs-method|方法]]是該屬性的狀態，否則此元素的[[#concept-fs-method|方法]]是其[[#form-owner|主表單]] <code>[[#attr-fs-method|method]]</code> 屬性的狀態。

內容屬性 <b id="attr-fs-enctype"><code>enctype</code></b> 與 <b id="attr-fs-formenctype"><code>enctype</code></b> 是有以下關鍵字與狀態的[[HTML5/common-microsyntaxes#enumerated-attribute|列舉屬性]]：

* 關鍵字 "<b id="attr-fs-enctype-urlencoded"><code>application/x-www-form-urlencoded</code></b>" 與對應的狀態。
* 關鍵字 "<b id="attr-fs-enctype-formdata"><code>multipart/ford-data</code></b>" 與對應的狀態。
* 關鍵字 "<b id="attr-fs-enctype-text"><code>text/plain</code></b>" 與對應的狀態。

這兩個屬性的<var>失蹤預設值</var>是 <code>[[#attr-fs-enctype-urlencoded|application/x-www-form-urlencoded]]</code> 狀態。

一個元素的<b id="concept-fs-enctype">編碼型別</b>是這兩個狀態其一。若此元素為[[HTML5/forms#concept-submit-button|提交按鈕]]且它具有 <code>[[#attr-fs-formenctype|formenctype]]</code> 屬性，則此元素的[[#concept-fs-enctype|編碼型別]]是該屬性的狀態，否則此元素的[[#concept-fs-enctype|編碼型別]]是其[[#form-owner|主表單]] <code>[[#attr-fs-enctype|enctype]]</code> 屬性的狀態。

若網頁作者指定內容屬性 <b id="attr-fs-target"><code>target</code></b> 與 <b id="attr-fs-formtarget"><code>formtarget</code></b>，則取值必須是[[HTML5/browsers#valid-browsing-context-name-or-keyword|合法瀏覽上下文名稱或關鍵字]]。

如果一个元素是一个[[HTML5/forms#concept-submit-button|提交按钮]]，且该元素拥有[[#attr-fs-formtarget|formtarget]]属性，则该元素的<b id="concept-fs-target">目标</b>为该属性值；或者，如果该元素的[[#form-owner|所属表单]]拥有[[#attr-fs-target|target]]属性，则为该属性的值；或者，如果[[HTML5/infrastructure#document|Document]]包含一个拥有[[HTML5/semantics#attr-base-target|target]]属性的[[HTML5/semantics#the-base-element|base]]元素，则为第一个这样的[[HTML5/semantics#the-base-element|base]]元素的[[HTML5/semantics#attr-base-target|target]]属性的值；或者，如果没有这样的元素，则为空字符串。

內容屬性 <b id="attr-fs-novalidate"><code>novalidate</code></b> 與 <b id="attr-fs-formnovalidate"><code>formnovalidate</code></b> 是[[HTML5/common-microsyntaxes#boolean-attribute|布林屬性]]。若存在，代表提交時不驗證該表單。

若一個元素為[[HTML5/forms#concept-submit-button|提交按鈕]]且它具有 <code>[[#attr-fs-formnovalidate|formnovalidate]]</code> 屬性，或此元素的[[#form-owner|主表單]]具有 <code>[[#attr-fs-novalidate|novalidate]]</code> 屬性，則此元素的<b id="concept-fs-novalidate">不驗證狀態</b>為真，否則為假。

{{codesample|在表單具有驗證約束的時候，這個屬性可以用來做「儲存」按鈕，讓使用者儲存書寫到一半的表單資料。下面的例子是個簡單的表單，有兩個必填欄位與三個按鈕：一個用來提交表單，但是非填完不能提交，一個用來儲存表單，讓使用者可以繼續未完的作業，一個用來清空表單。

<pre><form action="editor.cgi" method="post">
 <p><label>姓名：<input required name=fn></label></p>
 <p><label>短文：<textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="提交短文"></p>
 <p><input type=submit formnovalidate name=save value="儲存短文"></p>
 <p><input type=submit formnovalidate name=cancel value="取消"></p>
</form></pre>}}

IDL 屬性 <b id="dom-fs-action"><code>action</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]同樣名稱的內容屬性，除非在獲取的時候內容屬性不存在或是屬性的取值為空字串，在這種情形下必須回傳[[HTML5/dom#the-document-s-address|文件的位置]]。IDL 屬性 <b id="dom-fs-target"><code>target</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]同樣名稱的內容屬性。IDL 屬性 <b id="dom-fs-method"><code>method</code></b> 與 <b id="dom-fs-enctype"><code>enctype</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]同樣名稱的內容屬性，[[HTML5/common-dom-interfaces#limited-to-only-known-values|受限於已知取值]]。IDL 屬性 <b id="dom-fs-encoding"><code>encoding</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-enctype|enctype]]</code> ，[[HTML5/common-dom-interfaces#limited-to-only-known-values|限制於已知取值]]。IDL 屬性 <b id="dom-fs-novalidate"><code>noValidate</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-novalidate|novalidate]]</code>。IDL 屬性 <b id="dom-fs-formaction"><code>formAction</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-formaction|formaction]]</code>，除非在獲取的時候內容屬性不存在或是屬性的取值為空字串，在這種情形下必須回傳[[HTML5/dom#the-document-s-address|文件的位置]]。IDL 屬性 <b id="dom-fs-formenctype"><code>formEnctype</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-formenctype|formenctype]]</code> ，[[HTML5/common-dom-interfaces#limited-to-only-known-values|限制於已知取值]]。IDL 屬性 <b id="dom-fs-formmethod"><code>formMethod</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-formmethod|formmethod]]</code> ，[[HTML5/common-dom-interfaces#limited-to-only-known-values|限制於已知取值]]。IDL 屬性 <b id="dom-fs-formnovalidate"><code>formNoValidate</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-formnovalidate|formnovalidate]]</code>。IDL 屬性 <b id="dom-fs-formtarget"><code>formTarget</code></b> 必須[[HTML5/common-dom-interfaces#reflect|反映]]內容屬性 <code>[[#attr-fs-formtarget|formtarget]]</code>。

===== 提交元素方向性 =====
表單控制項元素上的<b id="form-control-dirname-attribute">表單控制項 <code>dirname</code> 屬性</b>可以用來提交此元素的[[HTML5/elements#the-directionality|方向性]]，並可以用來命名[[#form-submission|表單提交]]時含有這個值的欄位。若網頁作者欲設定此屬性，值必不可為空字串。

==== 文本字段选择API ====
{{anchor|textFieldSelection}}

[[HTML5/the-input-element#the-input-element|input]]和[[HTML5/the-button-element#the-textarea-element|textarea]]元素在其DOM接口中定义了下列成员，用来对它们的选择进行操作：

<code>
void [[#dom-textarea-input-select|select]]();<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attribute unsigned long [[#dom-textarea-input-selectionstart|selectionStart]];<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attribute unsigned long [[#dom-textarea-input-selectionend|selectionEnd]];<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attribute DOMString [[#dom-textarea-input-selectiondirection|selectionDirection]];<br/>
void [[#dom-textarea-input-setselectionrange|setSelectionRange]](in unsigned long start, in unsigned long end, in optional DOMString direction);
</code>

这些方法和属性暴露和控制了[[HTML5/the-input-element#the-input-element|input]]和[[HTML5/the-button-element#the-textarea-element|textarea]]文本字段中的选择。

{{non-normative|
'''<nowiki>selection . select()</nowiki>'''

选择文本字段中的所有内容。

'''<nowiki>selection . selectionStart [ = value ]</nowiki>'''

返回选择部分起始位置的偏移量。

可以被设置，用来修改选择部分的起始位置。

'''<nowiki>selection . selectionEnd [ = value ]</nowiki>'''

返回选择部分结束位置的偏移量。

可以被设置，用来修改选择部分的结束位置。

'''<nowiki>selection . selectionDirection [ = value ]</nowiki>'''

返回选择部分的当前方向。

可以被设置，用来修改选择部分的方向。

可能的值包括“forward”、“backward”和“none”。

'''<nowiki>selection . setSelectionRange(start, end [, direction] )</nowiki>'''

在给出的方向下，用给出的子字符串修改选择部分。如果忽略了方向，则被重置为平台的默认值（none或forward）。
}}

如果这些方法和属性被用于不适用的[[HTML5/the-input-element#the-input-element|input]]元素，则必须抛出一个[[HTML5/common-dom-interfaces#invalid_state_err|INVALID_STATE_ERR]]异常。否则，必须按需下面的描述执行。

对于[[HTML5/the-input-element#the-input-element|input]]元素，这些方法和属性必须操作该元素的[[#concept-fe-value|值]]。对于[[HTML5/the-button-element#the-textarea-element|textarea]]元素，这些方法和属性必须操作该元素的[[HTML5/the-button-element#concept-textarea-raw-value|原始值]]。

在可能的情况下，用户界面中修改[[HTML5/the-input-element#the-input-element|input]]和[[HTML5/the-button-element#the-textarea-element|textarea]]元素的文本选中部分的功能必须在本节所描述的DOM API下实现，以便可以全部触发相同的事件等。

[[HTML5/the-input-element#the-input-element|input]]和[[HTML5/the-button-element#the-textarea-element|textarea]]元素的选中部分拥有一个''方向''，其值为''forward''、''backward''和''none''。这个方向将在用户对选择部分进行操作时设置。选择部分方向的精确意义有平台决定。

{{note|在Windows下，方向指定了符号相对于选择部分的位置：一个向前的选择，其符号在选择部分之后；一个向后的选择，其符号在选择部分之前。Windows没有none方向。在Mac下，方向指定了在用户在Shift模式下使用方向键调整选择部分的大小时将影响选中部分的那一端：向前的选择将修改选中部分的结尾；向后的选择将修改选择部分的开头。none方向是Mac的默认方向，它表示没有特点的方向尚未选定。用户在第一次调整选择部分时指定隐式方向，这取决于使用了哪个方向键。}}

<b id="dom-textarea-input-select">select()</b>方法必须全选文本字段的内容，如果平台支持''none''方向，则其方向为''none''，否则方向为''forward''。用户代理必须以[[HTML5/webappapis#user-interaction-task-source|用户交互任务源]]作为任务源[[HTML5/webappapis#queue-a-task|排入一个任务]]以在该元素上冒泡地[[HTML5/webappapis#fire-a-simple-event|触发一个简单事件]]，其名称为select。

对于<b id="dom-textarea-input-selectionstart">selectionStart</b>属性，在获取时，必须返回紧接在选择部分起始位置之后的字符的偏移量（按照逻辑上的顺序）。如果没有选择部分，则必须返回紧接在文本输入光标之后的字符的偏移量（按照逻辑上的顺序）。

在设置时，必须如同调用了[[#dom-textarea-input-setselectionrange|setSelectionRange()]]方法，其中，使用新值作为第一个参数；如果[[#dom-textarea-input-selectionend|selectionEnd]]属性的值不小于新值，则使用[[#dom-textarea-input-selectionend|selectionEnd]]属性的值作为第二个参数，否则必须使用新值作为第二个参数；使用[[#dom-textarea-input-selectiondirection|selectionDirection]]属性的当前值作为第三个参数。

对于<b id="dom-textarea-input-selectionend">selectionEnd</b>属性，在获取时，必须返回紧接在选择部分结束位置之后的字符的偏移量（按照逻辑上的顺序）。如果没有选择部分，则必须返回紧接在文本输入光标之后的字符的偏移量（按照逻辑上的顺序）。

在设置时，必须如同调用了[[#dom-textarea-input-setselectionrange|setSelectionRange()]]方法，其中，使用[[#dom-textarea-input-selectionstart|selectionStart]]属性的当前值作为第一个参数；使用新值作为第二个参数；使用[[#dom-textarea-input-selectiondirection|selectionDirection]]属性的当前值作为第三个参数。

对于<b id="dom-textarea-input-selectiondirection">selectionDirection</b>属性，在获取时，必须返回与当前选择部分方向对应的字符串：如果方向为''向前''则“forward”；如果方向为''向后''则“backward”；否则“none”。

在设置时，必须如同调用了[[#dom-textarea-input-setselectionrange|setSelectionRange()]]方法，其中，使用[[#dom-textarea-input-selectionstart|selectionStart]]属性的当前值作为第一个参数；使用[[#dom-textarea-input-selectionend|selectionEnd]]属性的当前值作为第二个参数；使用新值作为第三个参数。

<b id="dom-textarea-input-setselectionrange">setSelectionRange(start, end, direction)</b>方法必须将文本字段的选择部分设为以第''start''个位置（按照逻辑上的顺序）的字符为开始、以第(''end''-1)个位置（按照逻辑上的顺序）的字符为结束的字符串序列。大于文本字段值的长度的参数必须被视为指向文本字段的结尾。如果''end''小于等于''start''，则选中部分的开始和结束必须都被指向紧靠偏移量为''end''的字符之前。对于没有空选择概念的用户代理，必须将光标定位于紧靠偏移量为''end''的字符之前。如果''direction''[[HTML5/infrastructure#case-sensitive|区分大小写]]地匹配字符串“backward”，则选择部分的方向为''向后''；如果''direction''[[HTML5/infrastructure#case-sensitive|区分大小写]]地匹配字符串“forward”或平台不支持方向为none，则选择部分的方向为''向前''；否则选择部分的方向为''none''（包括参数被忽略）。用户代理必须以[[HTML5/webappapis#user-interaction-task-source|用户交互任务源]]为任务源[[HTML5/webappapis#queue-a-task|排入一个任务]]以在该元素上冒泡地[[HTML5/webappapis#fire-a-simple-event|触发一个简单事件]]，该事件名为select。

对于所有适用这些API的元素，在所有任何时候都拥有一个选择部分或一个文本输入光标（即使元素尚未[[HTML5/rendering#being-rendered|被渲染]]）。用户代理应该按照平台的约定确定其初始状态。

在渲染时不可见的字符——例如U+200D零宽度联合字符——仍然算作字符。因此，选择部分可以只包含这些不可见字符，文本输入光标也可以放在这些字符的两侧。

{{codesample|
为了获得当前选择的文字，必须执行下列JavaScript代码：

<pre>
var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);
</pre>

……其中''control''为一个[[HTML5/the-input-element#the-input-element|input]]和[[HTML5/the-button-element#the-textarea-element|textarea]]元素。
}}

{{codesample|
为了向一个文本控件的开始位置插入一些文本，并保持文本选择部分，则必须保持三个属性：

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

……其中''control''为一个[[HTML5/the-input-element#the-input-element|input]]和[[HTML5/the-button-element#the-textarea-element|textarea]]元素。
}}

==== 约束 ====
{{anchor|constraints}}
===== 定义 =====
{{anchor|definitions}}

对于[[HTML5/forms#category-listed|可列的表单相关元素]]，除非<b id="barred-from-constraint-validation">该元素禁止约束验证</b>，都将作为<b id="candidate-for-constraint-validation">约束验证的候选</b>。（举例说明，如果一个元素是[[HTML5/the-button-element#the-output-element|output]]或[[HTML5/forms#the-fieldset-element|fieldset]]元素，则[[#barred-from-constraint-validation|该元素禁止约束验证]]。）

一个元素可以定义一个<b id="custom-validity-error-message">自定义有效性验证错误信息</b>。初始化时，元素必须将其[[#custom-validity-error-message|自定义有效性验证错误信息]]设为空字符串。当其值不是空字符串时，则表示该元素[[#suffering-from-a-custom-error|出现自定义错误]]。这可以通过[[#dom-cva-setcustomvalidity|setCustomValidity()]]方法设置。用户代理应该在向同于提示控件的问题时使用该[[#custom-validity-error-message|自定义有效性验证错误信息]]。

一个元素可以通过多种途径进行验证。下列列出了表单控件可以处于的<b id="validity-states">有效性状态</b>的列表，这些状态基于约束验证的原因使控件无效。（下面的定义是不规范的；本规范的其他部分精确的定义了何时应该应用这些状态。）

* <b id="suffering-from-being-missing">出现未填写</b>
** 若控件没有[[#concept-fe-value|值]]但拥有required属性（[[HTML5/the-input-element#the-input-element|input]] [[HTML5/common-input-element-attributes#attr-input-required|required]]、[[HTML5/the-button-element#the-select-element|select]] [[HTML5/the-button-element#attr-select-required|required]]、[[HTML5/the-button-element#the-textarea-element|textarea]] [[HTML5/the-button-element#attr-textarea-required|required]]），或者，对于处于一个[[HTML5/number-state#radio-button-group|单选按钮组]]中的一个元素，如果组中的任意一个其他元素拥有[[HTML5/common-input-element-attributes#attr-input-required|requited]]。
* <b id="suffering-from-a-type-mismatch">出现类型不匹配</b>
** 若控件允许用户输入任意的[[#concept-fe-value|值]]，但该[[#concept-fe-value|值]]的语法不正确（[[HTML5/states-of-the-type-attribute#e-mail-state|电子邮件]]、[[HTML5/states-of-the-type-attribute#url-state|URL]]）。
* <b id="suffering-from-a-pattern-mismatch">出现格式不匹配</b>
** 若控件拥有一个不符合[[HTML5/common-input-element-attributes#attr-input-pattern|pattern]]属性的[[#concept-fe-value|值]]。
* <b id="suffering-from-being-too-long">出现内容过长</b>
** 若控件拥有一个对于[[#attr-fe-maxlength|表单控件maxlength属性]]过长的[[#concept-fe-value|值]]（[[HTML5/the-input-element#the-input-element|input]] [[HTML5/common-input-element-attributes#attr-input-maxlength|maxlengt]]、[[HTML5/the-button-element#the-textarea-element|textarea]] [[HTML5/the-button-element#attr-textarea-maxlength|maxlength]]）。
* <b id="suffering-from-an-underflow">出现下溢</b>
** 若控件拥有一个对于[[HTML5/common-input-element-attributes#attr-input-min|min]]属性过低的[[#concept-fe-value|值]]。
* <b id="suffering-from-an-overflow">出现溢出</b>
** 若控件拥有一个对于[[HTML5/common-input-element-attributes#attr-input-max|max]]属性过高的[[#concept-fe-value|值]]。
* <b id="suffering-from-a-step-mismatch">出现步长不匹配</b>
** 若控件拥有一个不适合[[HTML5/common-input-element-attributes#attr-input-step|step]]属性的规则的[[#concept-fe-value|值]]。
* <b id="suffering-from-a-custom-error">出现自定义错误</b>
** 若控件的[[#custom-validity-error-message|自定义有效性验证错误信息]]（通过元素的[[#dom-cva-setcustomvalidity|setCustomValidity()]]方法设置）不为空字符串。

{{note|即使元素被[[#concept-fe-disabled|禁用]]，其仍然可以出现这些状态；因此这些状态仍然会被表现在DOM中，即使表单验证发生在表单提交时用户无法看到这些状态。}}

如果一个元素没有出现上述[[#validity-states|有效性状态]]，则该元素<b id="concept-fv-valid">满足其约束条件</b>。

===== 约束验证 =====
{{anchor|constraint-validation}}

如果用户代理被要求<b id="statically-validate-the-constraints">静态验证[[HTML5/forms#the-form-element|form]]元素''表单''的约束</b>，则必须执行下列步骤。这些步骤返回一个''肯定''结果（表单中的全部控件均有效）或一个''否定''结果（存在无效的控件），以及一个（可能为空的）无效元素的列表。这些步骤不适用脚本程序。

# 设''控件集合''为所有[[#form-owner|所属表单]]为''表单''的[[HTML5/forms#category-submit|可提交元素]]的列表，保持[[HTML5/infrastructure#tree-order|树形结构顺序]]。
# 设''无效控件集合''为一个元素列表，该列表初始化为空。
# 按照[[HTML5/infrastructure#tree-order|树形结构顺序]]遍历''控件集合''的每一个''字段''，执行下列子步骤：
## 如果''字段''不是一个[[#candidate-for-constraint-validation|约束验证的候选]]，则进入下一个元素。
## 否则，如果''字段''[[#concept-fv-valid|满足其约束条件]]，则进入下一个元素。
## 否则，将''字段''插入到''无效控件集合''中。
# 如果''无效控件集合''为空，则返回''肯定''的结果并跳过这些步骤。
# 按照[[HTML5/infrastructure#tree-order|树形结构顺序]]遍历''无效控件集合''的每一个''字段''，执行下列子步骤
## 在''字段''上[[HTML5/webappapis#fire-a-simple-event|触发一个简单事件]]，该事件名为invalid，且可撤销。
## 如果事件没有被撤销，则将''字段''插入到''未处理无效控件集合''中。
# 返回''否定''结果以及在''未处理无效控件集合''中的元素的列表。

如果用户代理被要求<b id="interactively-validate-the-constraints">交互式地验证[[HTML5/forms#the-form-element|form]]元素''表单''的约束</b>，则用户代理必须执行下列步骤：

# [[#statically-validate-the-constraints|静态验证''表单''的约束]]，并且，如果返回''否定''结果，则设''未处理无效控件集合''为返回的元素列表。
# 如果返回的结果是''肯定''的，则返回该结果并跳过这些步骤。
# 向用户报告''未处理无效控件集合''中给出的至少一个元素约束所出现的问题。用户代理可能会在处理过程中通过对这些元素中的一个执行[[HTML5/editing#focusing-steps|聚焦步骤]]使该元素获得焦点，还可能会通过改变滚动条位置或其他行为使该元素进入用户视野。用户代理可能会报告超过一个约束冲突。如果恰当，用户代理可能会合并相关的约束冲突报告（例如，如果在一个[[HTML5/number-state#radio-button-group|组]]中的多个单选按钮被标为必填项，则只需要报告一个错误）。如果一个空间没有被[[HTML5/rendering#being-rendered|渲染]]（例如，其设置了[[HTML5/editing#the-hidden-attribute|hidden]]属性）则用户代理可能会报告一个脚本错误。
# 返回''否定''结果。

===== 约束验证API =====
{{anchor|the-constraint-validation-api}}

{{non-normative|
'''<nowiki>element . willValidate</nowiki>'''

如果该元素在表达提交时将要进行验证，则返回真；否则返回假。

'''<nowiki>element . setCustomValidity(message)</nowiki>'''

设置一个自定义错误，使该元素不能通过验证。给出的信息是向用户报告问题时将要展示的消息。

如果攒书为空字符串，则清除自定义错误。

'''<nowiki>element . validity . valueMissing</nowiki>'''

如果该元素没有值但是一个必填字段，则返回真；否则返回假。

'''<nowiki>element . validity . typeMismatch</nowiki>'''

如果该元素的值的语法不正确，则返回真；否则返回假。

'''<nowiki>element . validity . patternMismatch</nowiki>'''

如果该元素的值不匹配指定的格式，则返回真；否则返回假。

'''<nowiki>element . validity . tooLong</nowiki>'''

如果该元素的值超过指定的最大长度，则返回真；否则返回假。

'''<nowiki>element . validity . rangeUnderflow</nowiki>'''

如果该元素的值低于指定的最小值，则返回真；否则返回假。

'''<nowiki>element . validity . rangeOverflow</nowiki>'''

如果该元素的值高于指定的最大值，则返回真；否则返回假。

'''<nowiki>element . validity . stepMismatch</nowiki>'''

如果该元素的值不适合由[[HTML5/common-input-element-attributes#attr-input-step|step]]属性给出的规则，则返回真；否则返回假。

'''<nowiki>element . validity . customError</nowiki>'''

如果该元素拥有一个自定义错误，则返回真；否则返回假。

'''<nowiki>element . validity . valid</nowiki>'''

如果该元素的值通过验证，则返回真；否则返回假。

'''<nowiki>valid = element . checkValidity()</nowiki>'''

如果该元素的值通过验证，则返回真；否则返回假并在该元素上触发一个invalid事件。

'''<nowiki>element . validationMessage</nowiki>'''

如果该元素检查过有效性，则返回将会向用户展示的错误信息。
}}

如果一个元素[[#candidate-for-constraint-validation|约束验证的候选]]，则<b id="dom-cva-willvalidate">willValidate</b>属性必须返回真，否则必须返回假（例如，如果任意条件[[#barred-from-constraint-validation|禁止表单验证]]，则返回假）。

当调用<b id="dom-cva-setcustomvalidity">setCustomValidity(message)</b>时，必须将[[#custom-validity-error-message|自定义有效性验证错误信息]]为''message''参数给出的值。

{{codesample|
在下面的例子中，脚本程序在一个表单控件每次被编辑时检查其值，一旦其不是一个有效的值，则使用[[#dom-cva-setcustomvalidity|setCustomValidity()]]方法设置一个恰当的消息。

<pre>
<label>感觉：<input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "开心" ||
       input.value == "不错" ||
       input.value == "疲劳") {
     input.setCustomValidity('"' + input.value + '"不是一个感觉。');
   } else {
     // 输入正确，重置错误信息。
     input.setCustomValidity('');
   }
 }
</script>
</pre>
}}

<b id="dom-cva-validity">validity</b>属性必须返回一个[[#validitystate|ValidityState]]对象，该对象表示该元素的[[#validity-states|有效性状态]]。该对象是[[HTML5/infrastructure#live|活动的]]，且每次调用该元素的[[#dom-cva-validity|validity]]属性时必须返回同一个对象。

<code>
interface <b id="validitystate">ValidityState</b> {<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-valuemissing|valueMissing]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-typemismatch|typeMismatch]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-patternmismatch|patternMismatch]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-toolong|tooLong]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-rangeunderflow|rangeUnderflow]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-rangeoverflow|rangeOverflow]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-stepmismatch|stepMismatch]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-customerror|customError]];<br/>
&nbsp;&nbsp;readonly attribute boolean [[#dom-validitystate-valid|valid]];<br/>
};
</code>

[[#validitystate|ValidityState]]对象拥有下列属性。在获取这些属性时，如果在下面的列表中给出的对应的条件为真，则它们必须返回真，否则必须返回假。

* <b id="dom-validitystate-valuemissing">valudMissing</b>
** 该控件[[#suffering-from-being-missing|出现未填写]]。
* <b id="dom-validitystate-typemismatch">typeMismatch</b>
** 该控件[[#suffering-from-a-type-mismatch|出现类型不匹配]]。
* <b id="dom-validitystate-patternmismatch">patternMismatch</b>
** 该控件[[#suffering-from-a-pattern-mismatch|出现格式不匹配]]。
* <b id="dom-validitystate-toolong">tooLong</b>
** 该控件[[#suffering-from-being-too-long|出现内容过长]]。
* <b id="dom-validitystate-rangeunderflow">rangeUnderflow</b>
** 该控件[[#suffering-from-an-underflow|出现下溢]]。
* <b id="dom-validitystate-rangeoverflow">rangeOverflow</b>
** 该控件[[#suffering-from-an-overflow|出现溢出]]。
* <b id="dom-validitystate-stepmismatch">stepMismatch</b>
** 该控件[[#suffering-from-a-step-mismatch|出现步长不匹配]]。
* <b id="dom-validitystate-customerror">customError</b>
** 该控件[[#suffering-from-a-custom-error|出现自定义错误]]。
* <b id="dom-validitystate-valid">valid</b>
** 没有其他条件为真。

在调用<b id="dom-cva-checkvalidatity">checkValidity()</b>方法时，如果当前元素是一个[[#candidate-for-constraint-validation|约束验证的候选]]且不[[#concept-fv-valid|满足其约束条件]]，则用户代理必须在该元素上[[HTML5/webappapis#fire-a-simple-event|触发一个简单事件]]并返回假，该事件名为invalid，且可以被撤销。否则，必须不进行其他操作并返回真。

如果当前元素不是一个[[#candidate-for-constraint-validation|约束验证的候选]]或如果是但其[[#concept-fv-valid|满足其约束条件]]，则<b id="dom-cva-validationmessage">validationMessage</b>属性必须返回空字符串；否则，如果唯一的存在有效性约束问题的表单控件，其必须返回一个用户代理将要将其展示给用户的适当的本地化消息。如果用户代理不会在这种情况下显示一个文本消息（例如，它会显示一个图形化的提示），则该属性必须返回一个恰当的本地化消息，其表示（一个过多个）使该控件不安全的有效性约束。如果当前元素是一个[[#candidate-for-constraint-validation|约束验证的候选]]且[[#suffering-from-a-custom-error|出现自定义错误]]，则返回值应该包括[[#custom-validity-error-message|自定义有效性错误消息]]。

===== 安全性 =====
{{anchor|security-forms}}

服务器不应依赖客户端验证。客户端验证可以被恶意用户故意绕开，还可以被使用没有实现这些特性的旧用户代理或自动化工具的用户无意地忽略。约束验证功能只用于改进用户体验，不提供任何形式的安全机制。

==== {{anchor|form-submission}}表單提交 ====
===== 介绍 =====
''此章節不具有規範性''

當使用者提交表單時，使用者代理會根據[[#concept-fs-enctype|編碼型別]]將表單的資料專換成相應的結構，並使用給定的[[#concept-fs-method|方法]]將該結構送至[[#concept-fs-action|行動]]指定的目的地。

拿以下的表單來當例子：

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

若使用者在第一個欄位輸入 "cats"，在第二個輸入 "fur"，並按下提交按鈕，則使用者代理會載入 <code>/find.cgi?t=cats&q=fur</code>。

另一外面，若以下表單：

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

有了同樣的使用者輸入，提交的結果不太一樣：使用者代理會對給定的網址 HTTP POST 以下的實體內容：

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

 cats
 ------kYFrd4jNJEgCervE
 Content-Disposition: form-data; name="q"
 
 fur
 ------kYFrd4jNJEgCervE--
</pre>

===== 隱式提交 =====
用户代理可为每个表單建立一個[[HTML5/forms#concept-button|按鈕]]作为表單的<b id="default-button">預設按鈕</b>。[[#default-button|預設按鈕]]應該是以[[HTML5/infrastructure#tree-order|樹排序]]算的第一個[[#form-owner|所属表單]]是該[[HTML5/forms#the-form-element|form]]元素的[[HTML5/forms#concept-submit-button|提交按鈕]]，不過使用者代理可選另一個適合特定平台的按鈕。若平台支援使用者啟動隱式表單提交（舉例來說，在一些平台上，在一個文字欄位有焦距的時候按「輸入鍵」會啟動隱式表單提交），則隱式提交必須觸發[[#default-button|預設按鈕]]的[[HTML5/elements#activation-behavior|啟動行為]]。

{{note|因此，若[[#default-button|預設按鈕]]處於[[#concept-fe-disabled|停用狀態]]，則當使用者使用隱式提交機制時，使用者代理不會提交表單。（處於停用狀態的按鈕沒有[[HTML5/elements#activation-behavior|啟動行為]]。）}}

若表單沒有[[HTML5/forms#concept-submit-button|提交按鈕]]，則使用者代理必須在隱式提交發生時由 <code>[[HTML5/forms#the-form-element|form]]</code> 元素[[#concept-form-submit|提交]] <code>[[HTML5/forms#the-form-element|form]]</code> 元素自己。

===== 表单提交算法 =====
{{anchor|form-submission-algorithm}}

当一个[[HTML5/forms#the-form-element|form]]元素''表单''通过某元素''提交器''（通常是一个按钮）进行<b id="concept-form-submit">提交</b>时，可选的设置一个''通过脚本提交''标记，用户代理必须执行下列步骤：

# 设''表单所属文档''为''表单''所在的[[HTML5/infrastructure#document|Document]]。
# 如果''表单所属文档''没有与其关联的[[HTML5/browsers#browsing-context|浏览器上下文]]或其[[HTML5/browsers#browsing-context|浏览器上下文]]在该[[HTML5/infrastructure#document|Document]]创建时设置了[[HTML5/the-iframe-element#sandboxed-forms-browsing-context-flag|沙箱中的表单浏览器上下文标记]]，则不进行任何操作并跳过这些步骤。
# 设''表单浏览器上下文''为''表单所属文档''的[[HTML5/browsers#browsing-context|浏览器上下文]]。
# 如果''表单''已经被提交（例如，在处理下两步中触发的事件时表单被再次提交，这可能是由于脚本程序重复的在''表单''上调用了[[HTML5/forms#dom-form-submit|submit()]]方法），则跳过这些步骤。这不影响本算法早先的实例。
# 如果没有设置''通过脚本提交''标记，且''提交器''元素的[[#concept-fs-novalidate|未验证状态]]为假，则[[#interactively-validate-the-constraints|交互式验证''表单''的约束]]并检查其结果：如果返回否定结果（约束验证的结论是该字段无效，并且可能会通知用户）则跳过这些步骤。
# 如果没有设置''通过脚本提交''标记，则需要在''表单''上[[HTML5/webappapis#fire-a-simple-event|触发一个简单事件]]，该事件名为submit，且可以被撤销。如果该事件的默认行为被阻止（例如，如果该事件被撤销）则跳过这些步骤。否则，继续（有效的默认行为是执行提交）。
# 设''行为''为''提交器''元素的[[#concept-fs-action|行为]]。
# 如果''行为''是空字符串，则设''行为''为''表单所属文档''的[[HTML5/dom#the-document-s-address|文档的地址]]。{{note|这步[[HTML5/introduction#willful-violation|故意违反]]RFC 3986，这需要基于URL处理。这种违反行为是为了与旧版相兼容。[[HTML5/references#refsRFC3986|[RFC3986]]]}}
# 相对于''提交器''元素[[HTML5/urls#resolve-a-url|解释]][[HTML5/urls#url|URL]]''行为''。如果失败，则跳过这些步骤。否则，设''行为''是返回的[[HTML5/urls#absolute-url|绝对URL]]。
# 设''scheme''是返回的[[HTML5/urls#absolute-url|绝对URL]]的[[HTML5/urls#url-scheme|<scheme>]]。
# 设''enctype''是''提交器''元素的[[#concept-fs-enctype|enctype]]。
# 设''method''是''提交器''元素的[[#concept-fs-method|method]]。
# 设''target''是''提交器''元素的[[#concept-fs-target|target]]。
# 如果在提交表单时，用户指定了一个特点的浏览器上下文，则设''目标浏览器上下文''为该[[HTML5/browsers#browsing-context|浏览器上下文]]。否则，使用''目标''为名称、''表单浏览器上下文''为上下文应用[[HTML5/browsers#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name|通过给出的浏览器上下文名称选择浏览器上下文的规则]]，并将''目标浏览器上下文''设为返回的[[HTML5/browsers#browsing-context|浏览器上下文]]。
# 如果''目标浏览器上下文''在上一步被创建，或者如果''表单文档''尚未被[[HTML5/the-end#completely-loaded|完全加载]]，则设''替换''为真，否则设为假。
# 基于每行的第一个单元格中给出的''scheme''的值在下表中选择一个适当的行。之后，基于每列的第一个单元格中给出的''method''的值在该行内选择一个适当的单元格。之后，跳转至该表格下面定义的与单元格中的内容同名的步骤。

{|
! style="border-right: 2px solid #fff; border-bottom: 2px solid #fff;" | 
! style="border-right: 2px solid #fff; border-bottom: 2px solid #fff;" | [[#attr-fs-method-get|GET]]
! style="border-bottom: 2px solid #fff;" | [[#attr-fs-method-post|POST]]
|-
! style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | http
| style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | [[#submit-mutate-action|改变行为URL]]
| style="border-bottom: 1px solid #fff;" | [[#submit-body|提交实体主体]]
|-
! style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | https
| style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | [[#submit-mutate-action|改变行为URL]]
| style="border-bottom: 1px solid #fff;" | [[#submit-body|提交实体主体]]
|-
! style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | ftp
| style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | [[#submit-get-action|获得行为URL]]
| style="border-bottom: 1px solid #fff;" | [[#submit-get-action|获得行为URL]]
|-
! style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | javascript
| style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | [[#submit-get-action|获得行为URL]]
| style="border-bottom: 1px solid #fff;" | [[#submit-get-action|获得行为URL]]
|-
! style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | data
| style="border-right: 2px solid #fff; border-bottom: 1px solid #fff;" | [[#submit-get-action|获得行为URL]]
| style="border-bottom: 1px solid #fff;" | [[#submit-data-post|发送数据]]
|-
! style="border-right: 2px solid #fff; border-bottom: 2px solid #fff;" | mailto
| style="border-right: 2px solid #fff; border-bottom: 2px solid #fff;" | [[#submit-mailto-headers|邮寄报头]]
| style="border-bottom: 2px solid #fff;" | [[#submit-mailto-body|邮寄主体]]
|}

如果''scheme''没有在表格中列出，则其行为没有被本规范定义。在其他规范的定义了该''scheme''的情况下，用户代理应该按照其类似于本规范中相似的scheme的方式执行。

行为如下：

* <b id="submit-mutate-action">改变行为URL</b>
*# 设''query''为通过[[#application-x-www-form-urlencoded-encoding-algorithm|application/x-www-form-urlencoded编码算法]]对''表单数据集''进行编码，并解释为一个US-ASCII字符串。
*# 设''目标''为一个新的[[HTML5/urls#url|URL]]，其等于''行为''，但其[[HTML5/urls#url-query|<query>]]组件被替换为''query''（如果恰当，加入一个U+003F问号字符(?)）。
*# 将''目标浏览器上下文''[[HTML5/history#navigate|导航]]至''目标''。如果''替换''为真，则''目标浏览器上下文''必须以[[HTML5/history#replacement-enabled|启用替换]]方式进行导航。
* <b id="submit-body">提交实体主体</b>
*# 设''实体主体''为通过[[#appropriate-form-encoding-algorithm|恰当的表单编码算法]]对''表单数据集''进行编码的结果。
*# ''MIME类型''有下列确定：
*# '''如果''enctype''为[[#attr-fs-enctype-urlencoded|application/x-www-form-urlencoded]]'''
*#* 设''MIME类型''为“application/x-www-form-urlencoded”。
*# '''如果''enctype''为[[#attr-fs-enctype-formdata|multipart/form-data]]'''
*#* 设''MIME类型''为由字符串“multipart/form-data;”、U+0020空格字符、字符串“boundary=”和由[[#multipart-form-data-encoding-algorithm|multipart/form-data编码算法]]产生的[[#multipart-form-data-boundary-string|multipart/form-data边界字符串]]连接而成的字符串。
*# '''如果''enctype''为[[#attr-fs-enctype-text|text/plain]]'''
*#* 设''MIME类型''为“text/plain”。
*# 否则，将''目标浏览器上下文''[[HTML5/history#navigate|导航]]至''目标''，其中以''实体主体''作为实体主体使用''method''给出的HTTP方法，其类型为''MIME类型''。如果''替换''为真，则''目标浏览器上下文''必须以[[HTML5/history#replacement-enabled|启用替换]]方式进行导航。
* <b id="submit-get-action">获得行为URL</b>
*# 将''目标浏览器上下文''[[HTML5/history#navigate|导航]]至''行为''。如果''替换''为真，则''目标浏览器上下文''必须以[[HTML5/history#replacement-enabled|启用替换]]方式进行导航。
* <b id="submit-data-post">发送数据</b>
*# 设''数据''为通过[[#appropriate-form-encoding-algorithm|恰当的表单编码算法]]对''表单数据集''进行编码的结果。
*# 如果''行为''包含字符串“%%%%”（四个U+0025百分号字符），则如果按照US-ASCII进行解释，则%转义''数据''中不匹配URI通用语法产生的unreserved的所有字节，之后按照US-ASCII字符串处理返回的结果，进一步的%转义所有U+0025百分号字符并用返回的双重转义的字符串替换''行为''中的第一个“%%%%”。[[HTML5/references#refsRFC3986|RFC3986]]
*# 否则，如果''行为''包含字符串“%%”（一行中的两个U+0025百分号字符，并非四个），则如果按照US-ASCII进行解释，则%转义''数据''中不匹配URI通用语法产生的unreserved的所有字符，之后按照US-ASCII字符串处理返回的结果，用返回的转义字符串替换''行为''中的第一个“%%”。[[HTML5/references#refsRFC3986|RFC3986]]
*# 将''目标浏览器上下文''[[HTML5/history#navigate|导航]]至经过隐式修改的''行为''（可能为一个[[HTML5/infrastructure#data-protocol|data: URL]]）。如果''替换''为真，则''目标浏览器上下文''必须以[[HTML5/history#replacement-enabled|启用替换]]方式进行导航。
* <b id="submit-mailto-headers">邮寄报头</b>
*# 设''头部''为通过[[#application-x-www-form-urlencoded-encoding-algorithm|application/a-www-form-urlencoded编码算法]]对''表单数据集''进行编码，并解释为一个US-ASCII字符串。
*# 将''头部''中出的的U+002B加号字符(+)替换为字符串“%20”。
*# 设''目标''为''行为''中从第一个字符到紧靠第一个U+003F分号字符(?)之前的字符（如果存在）或者字符串结尾的所有字符。
*# 向''目标''追加一个单独的U+003F问号字符(?)。
*# 向''目标''追加''头部''。
*# 否则，将''目标浏览器上下文''[[HTML5/history#navigate|导航]]至''目标''。如果''替换''为真，则''目标浏览器上下文''必须以[[HTML5/history#replacement-enabled|启用替换]]方式进行导航。
* <b id="submit-mailto-body">邮寄主体</b>
*# 设''主体''为通过[[#appropriate-form-encoding-algorithm|恰当的表单编码算法]]对''表单数据集''进行编码的结果并且如果按照US-ASCII进行解释，则%转义返回值中不匹配URI通用语法产生的unreserved的所有字节。
*# 设''目标''为与''行为''相同的值。
*# 如果''目标''不包含U+003F问号字符(?)，则追加一个单独的U+003F问号字符(?)。否则，追加一个单独的U+0026与字符(&)。
*# 向''目标''追加一个字符串“body=”。
*# 向''目标''追加按照US-ASCII解释的''主体''。
*# 将''目标浏览器上下文''[[HTML5/history#navigate|导航]]至''目标''。如果''替换''为真，则''目标浏览器上下文''必须以[[HTML5/history#replacement-enabled|启用替换]]方式进行导航。

<b id="appropriate-form-encoding-algorithm">恰当的表单编码算法</b>由下列条件确定：

* '''如果''enctype''为[[#attr-fs-enctype-urlencoded|application/x-www-form-urlencoded]]'''
** 使用[[#application-x-www-form-urlencoded-encoding-algorithm|application/x-www-form-urlencoded编码算法]]。
* '''如果''enctype''为[[#attr-fs-enctype-formdata|multipart-form-data]]'''
** 使用[[#multipart-form-data-encoding-algorithm|multipart/form-data编码算法]]。
* '''如果''enctype''为[[#attr-fs-enctype-text|text/plain]]'''
** 使用[[#text-plain-encoding-algorithm|text/plain编码算法]]。

===== 构建表单数据集 =====
{{anchor|constructing-form-data-set}}

为表单''表单''<b id = "constructing-the-form-data-set">构建表单数据集</b>的算法如下：

# 设''控件集合''为一个[[#form-owner|所属表单]]为''表单''的所有[[HTML5/forms#category-submit|可提交元素]]的列表，保持[[HTML5/infrastructure#tree-order|树形结构顺序]]。
# 设''表单数据集''为一个“名称-值-类型”元组的列表，初始化为空。
# ''LOOP''：按照[[HTML5/infrastructure#tree-order|树形结构顺序]]遍历''控件集合''中的每一个''字段''，执行下列子步骤：
## 如果满足下列任意条件，则该元素跳过这些子步骤：
##* ''字段''元素拥有一个[[HTML5/the-button-element#the-datalist-element|datalist]]元素作为其祖先。
##* ''字段''元素被[[#concept-fe-disabled|禁用]]。
##* ''字段''元素是一个[[HTML5/forms#concept-button|按钮]]但并非''提交器''。
##* ''字段''元素是一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/number-state#checkbox-state|复选框]]状态且其[[#concept-fe-checked|选中状态]]为假的[[HTML5/the-input-element#the-input-element|input]]元素。
##* ''字段''元素是一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/number-state#radio-button-state|单选按钮]]状态且其[[#concept-fe-checked|选中状态]]为假的[[HTML5/the-input-element#the-input-element|input]]元素。
##* ''字段''元素不是一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/number-state#image-button-state|图片按钮]]状态的[[HTML5/the-input-element#the-input-element|input]]元素，且''字段''元素没有标记[[#attr-fe-name|name]]属性或其[[#attr-fe-name|name]]属性的值为空字符串。
##* ''字段''元素是一个没有使用[[HTML5/infrastructure#plugin|plugin]]的[[HTML5/the-iframe-element#the-object-element|object]]元素。
##* 否则，按照下列步骤处理''字段''
## 设''类型''为''字段''type IDL属性的值。
## 如果'字段''元素是一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/number-state#image-button-state|图片按钮]]状态的[[HTML5/the-input-element#the-input-element|input]]元素，则进一步嵌套运行下列子步骤：
### 如果''字段''标记了一个[[#attr-fe-name|name]]属性且其值不是空字符串，则设''名称''为该值并紧跟一个单独的U+002E句号字符(.)。否则，设''名称''为空字符串。
### 设''名称<sub>x</sub>''为将''名称''和一个单独的U+0078拉丁小写字母X字符(x)串联而组成的字符串。
### 设''名称<sub>y</sub>''为将''名称''和一个单独的U+0079拉丁小写字母Y字符(y)串联而组成的字符串。
### ''字段''元素是''提交器''，且在调用当前算法之前用户[[HTML5/number-state#concept-input-type-image-coordinate|指定了一个坐标]]。设''x''为用户所选择的坐标的X坐标，设''y''为用户所选择的坐标的y坐标。
### 向''表单数据集''追加一个实体，其名称为''名称<sub>x</sub>''、值为''x''、类型为''类型''。
### 向''表单数据集''追加一个实体，其名称为''名称<sub>y</sub>''、值为''y''、类型为''类型''。
### 跳过本元素的其余子步骤：如果''控件集合''中村中其他元素，则返回上方标有''LOOP''的步骤，否则跳转至下方标有''END''的步骤。
## 设''名称''为''字段''元素的[[#attr-fe-name|name]]属性的值。
## 如果''字段''元素是一个[[HTML5/the-button-element#the-select-element|select]]元素，则对于该[[HTML5/the-button-element#the-select-element|select]]元素中的每一个[[HTML5/the-button-element#concept-option-selectedness|选择状态]]为真的[[HTML5/the-button-element#the-option-element#option]]元素，向''表单数据集''中追加一个实体，其名称为''名称''、值为[[HTML5/the-button-element#the-option-element#option]]元素的[[HTML5/the-button-element#concept-option-value|值]]、类型为''类型''。
## 否则，如果''字段''元素是一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/number-state#checkbox-state|复选框]]状态或[[HTML5/number-state#radio-button-state|单选按钮]]状态的[[HTML5/the-input-element#the-input-element|input]]元素，则进一步嵌套运行下列子步骤：
### 如果''字段''元素标记了[[HTML5/the-input-element#attr-input-value|value]]属性，则设''值''为该属性的值；否则，设''值''为字符串“on”。
### 向''表单数据集''中追加一个实体，其名称为''名称''、值为''值''、类型为''类型''。
## 否则，如果''字段''元素是一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/number-state#file-upload-state|文件上传]]状态的[[HTML5/the-input-element#the-input-element|input]]元素，则对于该[[HTML5/the-input-element#the-input-element|input]]元素中[[HTML5/number-state#concept-input-type-file-selected|选择的]]每一个文件，向''表单数据集''中追加一个实体，其名称为''名称''、值为该文件（包含名称、类型和主体）、类型为''类型''。如果没有[[HTML5/number-state#concept-input-type-file-selected|选择文件]]，则向''表单数据集''中追加一个实体，其名称为''名称''、值为空字符串、类型为“application/octet-stream”。
## 否则，如果''字段''元素是一个[[HTML5/the-iframe-element#the-object-element|object]]元素：尝试从[[HTML5/infrastructure#plugin|plugin]]中获得表单提交值，如果成功，则像''表单数据集''中追加一个实体，其名称为''名称''、值为返回的提交值、类型为字符串“object”。
## 否则，向''表单数据集''中追加一个实体，其名称为''名称''、值为''字段''元素的[[#concept-fe-value|值]]、类型为''类型''。
## 如果该元素拥有一个[[#form-control-dirname-attribute|表单控件dirname属性]]，且该属性的值不是一个空字符，则执行下列子步骤：
### 设''dirname''为该元素dirname属性的值。
### 如果该元素的[[HTML5/elements#the-directionality|书写方向]]为‘[[HTML5/elements#concept-ltr|ltr]]’，则设''dir''为字符串“ltr”，否则设为字符串“rtl”（例如当该元素的[[HTML5/elements#the-directionality|书写方向]]为‘[[HTML5/elements#concept-rtl|rtl]]’）。
### 向''表单数据集''追加一个实体，其名称为''dirname''、值为''dir''、类型为字符串“direction”。{{note|如果一个元素是一个[[HTML5/the-button-element#the-textarea-element|textarea]]元素或一个[[HTML5/the-input-element#attr-input-type|type]]属性处于[[HTML5/states-of-the-type-attribute#text-state-and-search-state|文本]]状态或[[HTML5/states-of-the-type-attribute#text-state-and-search-state|搜索]]状态的[[HTML5/the-input-element#the-input-element|input]]元素，则该元素可以仅拥有一个[[#form-control-dirname-attribute|表单控件dirname属性]]。}}
# ''END''：返回''表单数据集''。

===== URL编码表单数据 =====
{{anchor|url-encoded-form-data}}

<b id="application-x-www-form-urlencoded-encoding-algorithm">application/x-www-form-urlencoded编码算法</b>如下：

# 设''结果''为空字符串。
# 如果[[HTML5/forms#the-form-element|form]]元素拥有一个[[HTML5/forms#attr-form-accept-charset|accept-charset]]属性，则综合考虑从''表单数据集''的名称和值中找到的字符和用户代理所支持的字符编码，在[[HTML5/forms#the-form-element|form]]的[[HTML5/forms#attr-form-accept-charset|accept-charset]]属性所给出的列表中选择一个[[HTML5/infrastructure#ascii-compatible-character-encoding|兼容ASCII]]的字符编码。如果没有支持的编码或列表中没有编码，则设选中的字符编码为UTF-8。<br/>否则，如果[[HTML5/dom#document-s-character-encoding|文档的字符编码]]是一个[[HTML5/infrastructure#ascii-compatible-character-encoding|兼容ASCII的字符编码]]，则其为选中的字符编码。<br/>否则，设选中的字符编码为UTF-8。
# 设''字符集''为选中的字符编码的[[HTML5/infrastructure#preferred-mime-name|首选MIME名称]]。
# 对于''表单数据集''中的每个实体，执行下列子步骤：
## 如果实体的名称为“[[#attr-fe-name-charset|_charset_]]”且其类型为“hidden”，将其值替换为''字符集''。
## 如果实体的类型为“file”，将其值替换为文件的文件名。
## 对于实体的名称和值中的每个不能用选中的字符编码表示的字符，将该字符替换为一个由一个U+0026与字符(&)、一个U+0023井号字符(#)、一或多个U+0030数字零(0)到U+0039数字九(9)范围内的表示十进制的Unicode码位的字符和一个U+003B分号字符(;)组成的字符串。
## 对于实体的名称和值中的每个字符，应用下列相应的子子步骤：
##* '''该字符是一个U+0020空格字符'''
##** 将该字符替换为一个单独的U+002B加号字符(+)。
##* '''如果该字符不属于U+0020、U+002A、U+002D、U+002E、U+0030至U+0039、U+0041至U+005A、U+005F、U+0061至U+007A'''
##** 将该字符替换为下列格式的字符串：
##**# 设''s''为一个空字符串。
##**# 对于该字符按选中的字符编码表示的每个字节''b''，依次执行下列恰当的子子子步骤：
##**#* '''如果该字节属于0x20、0x2A、0x2D、0x2E、0x30至0x39、0x41至0x5A、0x5F、0x61至0x7A'''
##**#** 向''s''追加码位等于该字节的Unicode字符。
##**#* '''否则'''
##**#** 向''s''追加一个U+0025百分号字符(%)紧跟两个在U+0030数字零(0)至U+0039数字九(9)和U+0041罗马大写字符A至U+0046罗马大写字符F范围内的表示该字节的十六进制值（如果必要使用零进行填充）。
##* '''否则'''
##** 保留该字符
## 如果实体的名称为“[[#attr-fe-name-isindex|isindex]]”，其类型为“text”，且其为''表单数据集''的第一个实体，则将其值追加至''结果''中，并跳过本实体的其余子步骤，移至下一个实体（如果存在），或整个算法中的下一步。
## 如果不是第一个实体，向''结果''中追加一个单独的U+0026与字符(&)。
## 向''结果''中追加实体的名称。
## 向''结果''中追加一个单独的U+003D等于号字符(=)。
## 向''结果''中追加实体的值。
# 将''结果''按照US-ASCII编码并返回编码后的字节流。

===== 多部分表单数据 =====
{{anchor|multipart-form-data-encoding-algorithm}}

<b id="multipart-form-data-encoding-algorithm">multipart/form-data编码算法</b>如下：

# 设''结果''为空字符串。
# 如果调用该算法时明确了字符编码，则将选中的字符编码设为该编码。（该算法用于其他提供了明确的字符编码的规范，避免像下一段中所描述的依赖[[HTML5/forms#the-form-element|form]]元素。）<br/>否则，如果[[HTML5/forms#the-form-element|form]]元素拥有一个[[HTML5/forms#attr-form-accept-charset|accept-charset]]属性，则综合考虑从''表单数据集''的名称和值中找到的字符和用户代理所支持的字符编码，在[[HTML5/forms#the-form-element|form]]的[[HTML5/forms#attr-form-accept-charset|accept-charset]]属性所给出的列表中选择一个[[HTML5/infrastructure#ascii-compatible-character-encoding|兼容ASCII]]的字符编码。如果没有支持的编码或列表中没有编码，则设选中的字符编码为UTF-8。<br/>否则，如果[[HTML5/dom#document-s-character-encoding|文档的字符编码]]是一个[[HTML5/infrastructure#ascii-compatible-character-encoding|兼容ASCII的字符编码]]，则其为选中的字符编码。<br/>否则，设选中的字符编码为UTF-8。
# 设''字符集''为选中的字符编码的[[HTML5/infrastructure#preferred-mime-name|首选MIME名称]]。
# 对于''表单数据集''中的每个实体，执行下列子步骤：
## 如果实体的名称为“[[#attr-fe-name-charset|_charset_]]”且其类型为“hidden”，将其值替换为''字符集''。
## 对于实体的名称和值中的每个不能用选中的字符编码表示的字符，将该字符替换为一个由一个U+0026与字符(&)、一个U+0023井号字符(#)、一或多个U+0030数字零(0)到U+0039数字九(9)范围内的表示十进制的Unicode码位的字符和一个U+003B分号字符(;)组成的字符串。
# 使用RFC 2388中描述的规则对（现在已经改变的）''表单数据集''进行编码，''从表单返回值：multipart/form-data''，并返回编码后的字节流。[[HTML5/references#refsRFC2388|[RFC2388]]]

''表单数据集''中的每个实体是一个''字段''，实体的名称是''字段名''、实体的值是''字段值''。

各部分之间的顺序必须和''表单数据集''中个字段的顺序相同。拥有相同名称的多个实体必须作为不同的字段进行处理。

{{note|<nowiki>特别的，这意味着，对于作为一个单独的&lt;input type=file multiple&gt;元素的一部分提交的多个文件，将造成每个文件拥有其各自的字段；不适用RFC 2388的“文件集”功能（“multipart/mixed”）。</nowiki>}}

对于与非文件字段相对应的multipart/form-data资源产生的部分，禁止其标记一个[[HTML5/fetching-resources#content-type|Content-Type]]头。它们的名称和值必须使用上面选择的字符编码进行编码（特别的，字段名字没有按照RFC 2388中所建议的转换为一个7位安全编码）。

用于用户代理产生该算法的返回值的边界是<b id="multipart-form-data-boundary-string">multipart/form-data边界字符串</b>。（该值是用于产生由该算法产生的表单提交酬载的MIME类型的。）

===== 纯文本表单数据 =====
{{anchor|plain-text-form-data}}

<b id="text-plain-encoding-algorithm">text/plain编码算法</b>如下：

# 设''结果''为空字符串。
# 如果[[HTML5/forms#the-form-element|form]]元素拥有一个[[HTML5/forms#attr-form-accept-charset|accept-charset]]属性，则综合考虑从''表单数据集''的名称和值中找到的字符和用户代理所支持的字符编码，在[[HTML5/forms#the-form-element|form]]的[[HTML5/forms#attr-form-accept-charset|accept-charset]]属性所给出的列表中选择一个字符编码。如果没有支持的编码或列表中没有编码，则设选中的字符编码为UTF-8。<br/>否则，设选中的字符编码为[[HTML5/dom#document-s-character-encoding|文档的字符编码]]。
# 设''字符集''为选中的字符编码的[[HTML5/infrastructure#preferred-mime-name|首选MIME名称]]。
# 如果实体的名称为“[[#attr-fe-name-charset|_charset_]]”且其类型为“hidden”，将其值替换为''字符集''。
# 如果实体的类型为“file”，将其值替换为文件的文件名。
# 对于''表单数据集''中的每个实体，执行下列子步骤：
## 向''结果''中追加实体的名称。
## 向''结果''中追加一个单独的U+003D等于号字符(=)。
## 向''结果''中追加实体的值。
## 向''结果''中追加一个U+000D回车(CR)U+000A换行(LF)字符对。
# 使用选择的字符编码对''结果''进行编码并返回编码返回的字节流。

==== 表單重置 ====
若一个[[HTML5/forms#the-form-element|form]]元素''表单''被<b id="concept-form-reset">重置</b>，用户代理必须在''表单''上[[HTML5/webappapis#fire-a-simple-event|激活一个简单事件]]，该事件名为reset，且该事件可取消。之后，如果事件没有被取消，必须调用对每一个[[#form-owner|所属表单]]为''表单''的[[HTML5/forms#category-reset|可重设元素]]调用[[#concept-form-reset-control|重置算法]]。

每种[[HTML5/forms#category-reset|可重设元素]]定义了它们的<b id="concept-form-reset-control">重置算法</b>。这些算法的一部分中对表单控件的修改不计入用户引发的修改（因此，例如，不会触发input事件）。
Templates used on this page:
Return to HTML5/association-of-controls-and-forms.
Retrieved from "https://www.w3.org/html/ig/zh/wiki/HTML5/association-of-controls-and-forms"
View source for HTML5/association-of-controls-and-forms

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Navigation

Tools
