HTML 屬性：form

值

要關聯的 <form> 元素的 id。

用法說明

預設情況下，表單控制元件與其最近的祖先 <form> 元素相關聯，而未巢狀在 <form> 中的表單控制元件則不與任何表單相關聯。form 屬性可以覆蓋這些預設行為。

<button>、<fieldset>、<input>、<object>、<output>、<select> 和 <textarea> 元素的 form 屬性允許你指定一個顯式表單所有者，從而可以將文件中任何位置的表單控制元件與同一文件中任何 <form> 元素相關聯。

當表單提交時，無論關聯的控制元件是否物理巢狀在該 <form> 中，甚至巢狀在不同的 <form> 中，<form> 元素的關聯控制元件的名稱和值都將提交。

控制元件的 form 屬性以你想要關聯該控制元件的 <form> 元素的 id 作為其值。為 form 屬性設定的所有其他值都將被忽略。

雖然將屬性值設定為最近的祖先 <form> 的 id 並非必要，但顯式定義表單控制元件與其最近的祖先表單之間的關聯，可以確保如果指令碼或格式錯誤的 HTML 導致該特定的 <form> 不是控制元件最近的表單祖先，表單控制元件也不會與其表單解除關聯。

與非祖先表單關聯

form 屬性可用於將巢狀在一個 <form> 中的表單控制元件與另一個 <form> 相關聯。

在此程式碼示例中，使用者名稱 <input> 巢狀在 internalForm 中，但 form 屬性將該控制元件與其巢狀的祖先表單解除關聯，並將其與 externalForm 相關聯。

<form id="externalForm"></form>
<form id="internalForm">
  <label for="username">Username:</label>
  <input form="externalForm" type="text" name="username" id="username" />
</form>

在這種情況下，當 externalForm 提交時，使用者名稱將被提交，而 internalForm 沒有關聯的表單控制元件。

form 屬性不繼承

form 屬性僅關聯設定它的元素。該屬性行為不被繼承。例如，當 form 屬性設定在 <fieldset> 元素上時，它只關聯 <fieldset>；它不會自動關聯巢狀在該 <fieldset> 中的表單控制元件。

在此示例中，<fieldset> 和 username <input> 與 exampleForm 相關聯，幷包含在 HTMLFormControlsCollection 的 HTMLFormElement.elements 屬性中，但 password 不包含。當 exampleForm 提交時，只有 username 將被包含。

<form id="exampleForm"></form>

<fieldset form="exampleForm">
  <legend>Login information</legend>
  <label
    >Username: <input form="exampleForm" type="text" name="username"
  /></label>
  <label>Password: <input type="password" name="password" /></label>
</fieldset>

每個巢狀元素都需要自己的 form 屬性，或者必須巢狀在表單內部。你可以使用 HTMLFormElement.elements 透過 JavaScript 檢查哪些元素與表單關聯。

表單提交

包含 form 屬性並不意味著該元素將隨表單一起提交。只有可提交元素，包括 <button>、<input>、<select> 和 <textarea>，在它們關聯的 <form> 提交時，它們的名稱和值才會被提交。

在這種情況下，即使 <output> 最初隱式地然後顯式地與 calcForm 關聯，當 calcForm 提交時，result 也不會與 a 和 b 一起提交。但是，它是表單 HTMLFormControlsCollection 的一部分。

<form id="calcForm">
  <label>First number: <input id="a" value="2" type="number" /></label>
  <label>Second number: <input id="b" value="3" type="number" /></label>
  <label>Sum: <output name="result" for="a b" form="calcForm">5</output></label>
</form>

示例

基本示例

此示例演示瞭如何使用 form 屬性將表單關聯元素與 <form> 元素關聯，即使它們沒有明確巢狀在其中。此示例中顯示的所有表單關聯元素都透過隱式（直接巢狀在表單中）或顯式（透過 form 屬性）方式與 loginForm 關聯。當登入表單提交時，每個可提交元素的名稱和值都將包含在內。

<form id="loginForm">
  <label>Username: <input type="text" name="username" /></label>
</form>

<label
  >Password: <input form="loginForm" type="password" name="password"
/></label>
<label>
  Choose an option:
  <select form="loginForm" name="options">
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
</label>
<label
  >Description:
  <textarea form="loginForm" rows="4" name="description">
Hello, World!</textarea
  >
</label>
<button form="loginForm" type="submit" name="submitLogin" value="Login">
  Submit
</button>

與不同表單關聯的元素

在此示例中，我們有兩個 <form> 元素：parentForm 和 targetForm。parentForm 內部的 <button> 將其 form 屬性設定為 targetForm，將其與其最近的祖先 parentForm 解除關聯，同時將其與 targetForm 關聯。當提交按鈕被啟用時，它提交 targetForm，而不是其祖先 parentForm。

<form id="targetForm">
  <input type="text" name="targetInput" />
</form>
<form id="parentForm">
  <button form="targetForm" type="submit" name="submitTarget" value="Target">
    Submit target form
  </button>
</form>

規範

瀏覽器相容性

html.elements.button.form

html.elements.fieldset.form

html.elements.input.form

html.elements.object.form

html.elements.output.form

html.elements.select.form

html.elements.textarea.form

另見

• 覆蓋預設表單行為