<form>：表單元素

基線 廣泛可用

此功能已得到良好建立，並在許多裝置和瀏覽器版本中都能正常執行。它自以下時間起在瀏覽器中可用： 2015 年 7 月.

<form> HTML 元素表示包含用於提交資訊的互動式控制元件的文件部分。

試一試

可以使用 :valid 和 :invalid CSS 偽類 根據表單內的 elements 是否有效來設定 <form> 元素的樣式。

屬性

此元素包含 全域性屬性。

accept

伺服器接受的以逗號分隔的內容型別。

注意：此屬性已棄用，不應使用。請改用<input type=file>元素上的accept屬性。

accept-charset

伺服器接受的以空格分隔的字元編碼。瀏覽器按照它們列出的順序使用它們。預設值表示與頁面相同的編碼。（在早期版本的 HTML 中，字元編碼也可以用逗號分隔。）

autocapitalize

控制輸入文字是否自動大寫，以及如果自動大寫，以何種方式大寫。有關更多資訊，請參閱autocapitalize全域性屬性頁面。

autocomplete

指示輸入元素是否可以預設情況下由瀏覽器自動填充其值。表單元素上的autocomplete屬性會覆蓋<form>上的屬性。可能的值

  • off：瀏覽器可能不會自動填充條目。（瀏覽器傾向於忽略疑似登入表單的此屬性；請參閱管理登入欄位的自動填充。）
  • on：瀏覽器可能會自動填充條目。
name

表單的名稱。該值不能是空字串，並且在它所屬的表單集合中的form元素中必須是唯一的（如果有）。

rel

控制表單建立的註釋和連結型別。註釋包括external、nofollow、opener、noopener和noreferrer。連結型別包括help、prev、next、search和license。rel值是這些列舉值的空格分隔列表。

表單提交的屬性

以下屬性控制表單提交期間的行為。

action

處理表單提交的 URL。此值可以被<button>、<input type="submit">或<input type="image">元素上的formaction屬性覆蓋。當設定method="dialog"時，此屬性將被忽略。

enctype

如果method屬性的值為post，則enctype是表單提交的MIME 型別。可能的值

  • application/x-www-form-urlencoded：預設值。
  • multipart/form-data：如果表單包含type=file的<input>元素，請使用此值。
  • text/plain：用於除錯目的。

此值可以被<button>、<input type="submit">或<input type="image">元素上的formenctype屬性覆蓋。

method

提交表單時使用的HTTP方法。唯一允許的方法/值是（不區分大小寫）

  • post：POST方法；表單資料作為請求正文傳送。
  • get（預設）：GET；表單資料附加到action URL，並使用?分隔符。當表單沒有副作用時，請使用此方法。
  • dialog：當表單位於<dialog>內部時，關閉對話方塊並導致在提交時觸發submit事件，而無需提交資料或清除表單。

此值會被<button>、<input type="submit">或<input type="image">元素上的formmethod屬性覆蓋。

novalidate

此布林屬性指示表單在提交時不應進行驗證。如果未設定此屬性（因此表單**將**進行驗證），則可以被屬於表單的<button>、<input type="submit">或<input type="image">元素上的formnovalidate屬性覆蓋。

target

指示在提交表單後在何處顯示響應。它是瀏覽上下文（例如，選項卡、視窗或 iframe）的名稱/關鍵字。以下關鍵字具有特殊含義

  • _self（預設）：載入到與當前瀏覽上下文相同的瀏覽上下文。
  • _blank：載入到一個新的未命名的瀏覽上下文。這提供了與設定rel="noopener"相同的行為，該行為不會設定window.opener。
  • _parent：載入到當前瀏覽上下文的父瀏覽上下文。如果沒有父級，則行為與_self相同。
  • _top：載入到頂級瀏覽上下文（即，是當前瀏覽上下文的祖先並且沒有父級的瀏覽上下文）。如果沒有父級，則行為與_self相同。
  • _unfencedTop：將嵌入式受限框架內表單的響應載入到頂級框架（即，與其他保留的目標不同，遍歷受限框架的根之外）。僅在受限框架內可用。

此值可以被<button>、<input type="submit">或<input type="image">元素上的formtarget屬性覆蓋。

示例

html
<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

結果

技術摘要

內容類別 流內容、可感知內容
允許的內容 流內容，但不包含<form>元素
標籤省略 無，開始和結束標籤都是必須的。
允許的父元素 任何接受流內容的元素
隱式 ARIA 角色 form
允許的 ARIA 角色 search、none或presentation
DOM 介面 HTMLFormElement

規範

規範
HTML 標準
# the-form-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱