path: root/files/zh-tw/web/html/forms_in_html/index.html

---
title: Forms in HTML
slug: Web/HTML/Forms_in_HTML
translation_of: Learn/HTML/Forms/HTML5_updates
---
<div>
  {{gecko_minversion_header("2")}}</div>
<h2 id="摘要">摘要</h2>
<p>HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記，也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性，也提供即時的使用者輸入回饋，因為這些特色，HTML5的Form元素在使用者體驗上有更好的表現，甚至，這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。</p>
<p>本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。</p>
<h2 id="&lt;input>元素">&lt;input&gt;元素</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a>元素的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type">type</a>屬性新增了一些屬性值。</p>
<ul>
  <li><code>search</code>: 代表此為搜尋欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。</li>
  <li><code>tel</code>: 代表此為電話編輯欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。基於各國電話號碼不一，你可以利用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern">pattern</a>和<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength">maxlength</a>屬性來限制輸入。</li>
  <li><code>url</code>: 代表此為URL編輯欄位，換行符號與前後空白符號會自動從輸入值中刪除。</li>
  <li>
    <p><code>email</code>: 代表此為email欄位，換行符號會自動從輸入值中刪除。只有在輸入符合ABNF規範: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )，其中atext定義在<a href="http://tools.ietf.org/html/rfc5322#section-3.2.3" title="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a>，而ldh-str定義在<a href="http://tools.ietf.org/html/rfc1034#section-3.5" title="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>。</p>
    <div class="note">
      <strong>Note:</strong> 當有設定<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple">multiple</a>屬性時，可以用逗號分隔email來一次輸入多個email，但目前FireFox不支援此功能。</div>
  </li>
</ul>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a>元素同時也新增了一些屬性:</p>
<ul>
  <li>{{htmlattrxref("list", "input")}}: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist">&lt;datalist&gt;</a>元素的ID，這個元素下的內容，亦即<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option">&lt;option&gt;</a>元素的值會顯示在輸入欄位的建議區來用於提示訊息。</li>
  <li>{{htmlattrxref("pattern", "input")}}: 一個用來檢查輸入的正規表達式(regular expression)，當type屬性值為text, tel, search, url與email時可以使用。</li>
  <li>{{htmlattrxref("form", "input")}}: 指示該&lt;input&gt;隸屬於哪一個<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">&lt;form&gt;</a>元素的一串文字，一個input只能隸屬於一個form下。</li>
  <li>{{htmlattrxref("formmethod", "input")}}: 指示使用的HTTP方法(GET或POST)，這個屬性值會取代&lt;form&gt;元素下<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method">method</a>屬性所定義的HTTP方法。這個屬性只有在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a>屬性出現而且type值為image或submit時才有效。</li>
  <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: 當欄位驗證失敗時顯示的訊息，此為Mozilla擴充功能、非標準。</li>
</ul>
<h2 id="&lt;form>元素">&lt;form&gt;元素</h2>
<p>{{HTMLElement("form")}} 元素新增了一些屬性</p>
<ul>
  <li>{{htmlattrxref("novalidate", "form")}}: 當表單送出時，阻止表單驗證。</li>
</ul>
<h2 id="The_datalist_element" name="The_datalist_element"> <code>&lt;datalist&gt;</code>元素</h2>
<p>{{HTMLElement("datalist")}}元素是{{HTMLElement("option")}}元素的列表，{{HTMLElement("option")}}元素會用於提示輸入建議。</p>
<p>可以利用{{HTMLElement("input")}}的{{htmlattrxref("list", "input")}}屬性來連結{{HTMLElement("input")}}元素與{{HTMLElement("datalist")}}</p>
<h2 id="The_output_element" name="The_output_element"><code>&lt;output&gt;</code>元素</h2>
<p><code>{{HTMLElement("output")}}</code>元素代表運算結果。</p>
<p>可以利用{{htmlattrxref("for", "output")}}屬性來設定<code>{{HTMLElement("output")}}</code>元素和其他影響計算結果的元素(如input或參數)的關係，{{htmlattrxref("for", "output")}}屬性的值為一串以空白分隔的元素ID。</p>
<p>{{non-standard_inline}} Gecko2.0(不一定適用其他瀏覽器引擎)支援自定義{{HTMLElement("output")}}元素的驗證條件和錯誤訊息，所以提供了其{{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}和 {{Cssxref(":-moz-ui-valid")}}的CSS pseudo-class，在以下狀況這個特色將很有用，例如沒有輸入值有問題，但計算結果違反了商業規則(好比說總百分比不可超過100)。</p>
<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder屬性</h2>
<p><code>{{HTMLElement("input")}}</code>元素和<code>{{HTMLElement("textarea")}}</code>元素的{{htmlattrxref("placeholder", "input")}}屬性會在輸入欄位上顯示輸入提示，這個屬性的值不可以含有回車或換行符號。</p>
<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus屬性</h2>
<p>{{htmlattrxref("autofocus", "input")}}屬性指示除非使用者另有指定(例如在其他控制項上進行輸入操作)，否則當載入網頁時表單控制項要自動聚焦於特定元素上；autofocus屬性值為布林值(Boolean)，一份文件只能有一份表單設定autofocus屬性。能夠設定這個屬性的元素有<code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code>與<code>{{HTMLElement("textarea")}}</code>，不過當{{htmlattrxref("type", "input")}}屬性為隱藏(hidden)下，autofocus是無效的，也就是說，不能自動聚焦於隱藏元素上。</p>
<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM屬性</h2>
<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM介面提供了<code>{{HTMLElement("label")}}</code>元素一個新的control屬性，control屬性會回傳被標記的控制項，這個控制項便是該label適用的控制項，也就是&lt;label&gt;元素{{htmlattrxref("for", "label")}}屬性指定的元素(如果有的話)或是第一個後代控制項元素。</p>
<h2 id="Constraint_Validation" name="Constraint_Validation">約束驗證</h2>
<p>HTML5提供了客戶端表單驗證的語法和API，基於安全性與資料正確性，雖然這並不能取代伺服器端驗證，但是客戶端驗證可以提拱使用者更好的立即輸入回饋體驗。</p>
<p>當{{HTMLElement("input")}}元素設定了title屬性，其值會作為提示框之內容，若是驗證失敗，提示框的內容會換成相關的錯誤訊息，我們可以利用非標準的{{htmlattrxref("x-moz-errormessage")}}屬性或setCustomValidity()方法來自定義錯誤訊息。</p>
<pre class="brush: html">&lt;input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"&gt;</pre>
<div class="note">
  <strong>Note:</strong> 約束驗證不支援表單的{{HTMLElement("button")}}元素，若是想根據表單驗證果來設定按鈕樣式，可以利用{{cssxref(":-moz-submit-invalid")}} pseudo-class。</div>
<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">約束驗證的HTML語法</h3>
<p>下列是HTML5用來約束表單資料的語法</p>
<ul>
  <li>{{HTMLElement("input")}}, {{HTMLElement("select")}},和{{HTMLElement("textarea")}}的{{htmlattrxref("required", "input")}}屬性表示輸入不可為空。{{HTMLElement("input")}}元素在用{{htmlattrxref("required", "input")}}屬性時需要搭配某些特定{{htmlattrxref("type", "input")}}屬性值)</li>
  <li>{{HTMLElement("input")}}元素的{{htmlattrxref("pattern", "input")}}屬性規範了輸入必須符合指定的正規表達式。</li>
  <li>{{HTMLElement("input")}}元素的{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性規範了最小和最大輸入值。</li>
  <li>{{HTMLElement("input")}}元素的{{htmlattrxref("step", "input")}}屬性(和{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性結合使用)規範了輸入值一次調整的幅度，當輸入值不符合允許的調整幅度即驗證失敗。</li>
  <li>{{HTMLElement("input")}}和{{HTMLElement("textarea")}}元素的{{htmlattrxref("maxlength", "input")}}屬性規範了最大輸入字元數(以Unicode編碼計算)。</li>
  <li>{{htmlattrxref("type", "input")}}值的url和email表示輸入必須是合格的URL或email格式。</li>
</ul>
<p>另外，我們可以在{{HTMLElement("form")}}元素上設定{{htmlattrxref("novalidate", "form")}}屬性或是在{{HTMLElement("button")}}元素以及{{htmlattrxref("type", "input")}}為submit或image的{{HTMLElement("input")}}元素上設定{{htmlattrxref("formnovalidate", "button")}}屬性來避免輸入約束驗證。這些屬性都會指示表單送出時不要進行驗證。</p>
<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">約束驗證API</h3>
<p>下列是客戶端驗證可用的DOM屬性和方法:</p>
<ul>
  <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>物件有checkValidity()方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&amp;redirectslug=DOM%2FHTMLFormElement" title="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&amp;redirectslug=DOM%2FHTMLFormElement">表單相關元素:</a>
    <ul>
      <li><code>willValidate</code> 屬性為false若該元素沒有通過驗證。</li>
      <li><code>validity</code> 屬性( <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 物件)代表該元素目前的驗證結果。</li>
      <li><code>validationMessage</code>屬性是驗證失敗時的訊息。</li>
      <li><code>checkValidity()</code> 方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li>
      <li><code>setCustomValidity()</code> 可以自定義驗證失敗訊息。</li>
    </ul>
  </li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li>
</ul>