<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 偽類，根據表單內的 elements 是否有效來設定 <form> 元素的樣式。

屬性

此元素包含全域性屬性。

accept 已廢棄

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

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

accept-charset

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

autocapitalize

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

autocomplete

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

• off：瀏覽器可能不會自動完成條目。（瀏覽器傾向於忽略可疑的登入表單；請參見管理登入欄位的自動填充。）
• on：瀏覽器可以自動完成條目。

name

表單的名稱。該值不能為空字串，並且在它所屬的表單集合中的 form 元素中必須是唯一的（如果有）。該名稱成為 Window、Document 和 document.forms 物件的屬性，包含對錶單元素的引用。

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

目標

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

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

此值可以被 <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：搜尋角色