<form>：表單元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<form> HTML 元素代表了一個包含用於提交信息的交互式控制項的文件章節。

嘗試一下

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

屬性

該元素包含全域屬性。

accept

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

備註： 此屬性已被廢棄，不應再使用。 請改用 <input type=file> 元素上的 accept 屬性。

accept-charset

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

autocapitalize

控制輸入文本是否自動大寫，以及如何自動大寫。有關更多信息，請參見 autocapitalize 全域屬性頁面。

autocomplete

指示瀏覽器是否可以默認情況下自動完成輸入元素的值。表單元素上的 autocomplete 屬性會覆蓋 <form> 上的它。可能的值：

  • off：瀏覽器可能不會自動完成輸入。（瀏覽器傾向於忽略對懷疑的登錄表單的此屬性；請參見自動完成屬性和登入欄）
  • on：瀏覽器可能會自動完成輸入。
name

表單的名稱。該值不能為空字符串，且必須在其所在的表單集合中唯一（如果有的話）。

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

規範

Specification
HTML Standard
# the-form-element

瀏覽器相容性

BCD tables only load in the browser

參見