1. Web
  2. HTML
  3. 参考
  4. 属性
  5. form

HTML 属性：form

form HTML 属性将表单关联元素与同一文档中的 <form> 元素相关联。此属性适用于 <button>、<fieldset>、<input>、<object>、<output>、<select> 和 <textarea> 元素。

值

要关联的 <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 相关联。

html
<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 将被包含。

html
<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 的一部分。

html
<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 关联。当登录表单提交时，每个可提交元素的名称和值都将包含在内。

html
<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。

html
<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
# attr-fae-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

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题