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

* Some parts of this feature may have varying levels of support.

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

嘗試一下

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

屬性

該元素包含全域屬性

accept 已棄用

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

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

accept-charset

伺服器接受的字元編碼。該規範允許使用單一不區分大小寫的值——"UTF-8",反映了這種編碼的普遍性(歷史上,可以以逗號分隔或空格分隔的清單指定多個字元編碼)。

autocapitalize

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

autocomplete

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

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

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

rel

控制註釋和表單創建的連接類型。註釋包括 externalnofollowopenernoopenernoreferrer。連接類型包括 helpprevnextsearchlicenserel 的值是這些枚舉值的空格分隔列表。

提交表單的屬性

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

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 方法。 允許的方法/值只有(不區分大小寫):

  • postPOST 方法;表單數據作為請求主體發送。
  • 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 角色 searchnonepresentation
DOM 介面 HTMLFormElement

規範

Specification
HTML
# the-form-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
form
accept-charset
action
autocomplete
new-password value
one-time-code value
webauthn value
Experimental
enctype
method
name
novalidate
rel
target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

參見