<form>：表單元素

嘗試一下

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

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

屬性

該元素包含全域屬性。

accept 已棄用

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

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

accept-charset

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

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 屬性覆蓋。

範例

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

結果

技術摘要

規範

瀏覽器相容性

參見

• HTML 表單指南
• 在創建表單時使用的其他元素：<button>、<datalist>、<fieldset>、<input>、<label>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select>、<textarea>。
• 獲取表單中元素的列表：HTMLFormElement.elements
• ARIA：表單角色
• ARIA：搜索角色