Adds form html attribute. (mdn#40760)

* Adds `form` html attribute.

* Add `input` form attribute link.

* Adds fieldset form attribute link.

* Adds `label` form attribute link.

* Add `select` form attribute link.

* Add `textarea` form attribute link.

* Add `object` form attribute link.

* Add `output` form attribute link.

* Add `meter` form attribute link.

* Add `button` form attribute link.

* Add `progress` form attribute link.

* Improve `form` example section.

* Revert `label` element changes.

* Revert `meter` element changes.

* Revert `progress` element changes.

* Polish `form` attribute.

* Remove unsupported elements for the `form` attribute.

* Polish `form` example section.

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <[email protected]>

* Fix `github action` issues

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Fixs `MD033` issue including a small typo.

* Add explicit `labe`l for all non-hidden form controls.

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <[email protected]>

* Remove trailing space.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply polish suggestions from code review

Co-authored-by: Estelle Weyl <[email protected]>

* Removes both a trailing space and an extra space.

* Minor polishments.

* Update files/en-us/web/html/reference/attributes/form/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply tightening suggestions from code review

Co-authored-by: Chris Mills <[email protected]>

---------

Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Chris Mills <[email protected]>

files/en-us/web/html/reference/attributes/form/index.md

@@ -0,0 +1,142 @@
+---
+title: "HTML attribute: form"
+short-title: form
+slug: Web/HTML/Reference/Attributes/form
+page-type: html-attribute
+browser-compat:
+  - 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
+sidebar: htmlsidebar
+---
+
+The `form` HTML attribute associates a form-associated element with a {{htmlelement("form")}} element within the same document. This attribute applies to the {{htmlelement("button")}}, {{htmlelement("fieldset")}}, {{htmlelement("input")}}, {{htmlelement("object")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, and {{htmlelement("textarea")}} elements.
+
+## Values
+
+The `id` of the `<form>` element that the element should be associated with.
+
+## Usage notes
+
+By default, form controls are associated with their nearest ancestor {{htmlelement("form")}} element, while form controls that are not nested within a `<form>` are not associated with any form. The `form` attribute enables overriding these default behaviors.
+
+The `form` attribute of the {{htmlelement("button")}}, {{htmlelement("fieldset")}}, {{htmlelement("input")}}, {{htmlelement("object")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, and {{htmlelement("textarea")}} elements allows you to specify an explicit form owner, enabling you to associate form controls located anywhere within a document with any `<form>` element located in the same document.
+
+When a form is submitted, the names and values of the `<form>` element's associated controls are submitted, whether or not they are physically nested within that `<form>`, and even if they are nested in a different `<form>`.
+
+A control's `form` attribute takes as its value the `id` of the `<form>` element you want to associate the control with. All other values set for the `form` attribute are ignored.
+
+While setting the attribute value to the `id` of the nearest ancestor `<form>` isn't necessary, explicitly defining the association between a form control and its nearest ancestor form ensures the form control will not be disassociated from its form if scripts or malformed HTML result in that specific `<form>` not being the nearest form ancestor of the control.
+
+### Associating with a non-ancestor form
+
+The `form` attribute can be used to associate a form control nested in one `<form>` with another `<form>`.
+
+In this code example, the username `<input>` is nested within the `internalForm`, but the `form` attribute disassociates the control from its ancestor form in which it is nested, and associates it with the `externalForm` instead:
+
+```html
+<form id="externalForm"></form>
+<form id="internalForm">
+  <label for="username">Username:</label>
+  <input form="externalForm" type="text" name="username" id="username" />
+</form>
+```
+
+In this case, the username will be submitted when the `externalForm` is submitted, while the `internalForm` has no associated form controls.
+
+### Non-inheritance of the `form` attribute
+
+The `form` attribute only associates the element on which it is set. The attribute behavior is not inherited. For example, when the `form` attribute is set on a `<fieldset>` element, it only associates the `<fieldset>`; it does **not** automatically associate the form controls nested within that `<fieldset>`.
+
+In this example, the `<fieldset>` and `username` `<input>` are associated with the`exampleForm`, and included in the {{domxref("HTMLFormControlsCollection")}} of the {{domxref("HTMLFormElement.elements")}} property, but the`password` is not. Only the `username` will be included when the `exampleForm` is submitted:
+
+```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>
+```
+
+Each nested element needs its own `form` attribute or must be nested inside the form. You can check which elements are associated with a form via JavaScript, using [HTMLFormElement.elements](/en-US/docs/Web/API/HTMLFormElement/elements).
+
+### Form submission
+
+Including the `form` attribute does not mean the element will be submitted with the form. Only submittable elements, including `<button>`, `<input>`, `<select>`, and `<textarea>`, have their name and values submitted when their associated `<form>` is submitted.
+
+In this case, even though the `<output>` is implicitly then explicitly associated with the `calcForm`, the `result` is not submitted along with `a` and `b` when `calcForm` is submitted. It is, however, part of the form's `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>
+```
+
+## Examples
+
+### Basic example
+
+This example demonstrates how form-associated elements can be associated with a `<form>` element using the `form` attribute, even if they are not explicitly nested inside it. All of the form-associated elements shown in this example are associated with the `loginForm` either implicitly (by being directly nested inside the form), or explicitly via the `form` attribute. When the login form is submitted, the names and values of each submittable element will be included.
+
+```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>
+```
+
+### Element associated with a different form
+
+In this example, we have two `<form>` elements: `parentForm` and `targetForm`. The `<button>` inside `parentForm` has its `form` attribute set to `targetForm`, disassociating it from its nearest ancestor `parentForm`, while associating it with the `targetForm`. When the submit button is activated, it submits the `targetForm`, not its `parentForm` ancestor.
+
+```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>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{compat}}
+
+## See also
+
+- [`Overriding default form behaviors`](/en-US/docs/Web/HTML/Reference/Elements/input/image#overriding_default_form_behaviors)

files/en-us/web/html/reference/attributes/index.md

@@ -504,11 +504,8 @@ Elements in HTML have **attributes**; these are additional values that configure
         {{ HTMLElement("button") }},
         {{ HTMLElement("fieldset") }},
         {{ HTMLElement("input") }},
-        {{ HTMLElement("label") }},
-        {{ HTMLElement("meter") }},
         {{ HTMLElement("object") }},
         {{ HTMLElement("output") }},
-        {{ HTMLElement("progress") }},
         {{ HTMLElement("select") }},
         {{ HTMLElement("textarea") }}
       </td>

files/en-us/web/html/reference/elements/button/index.md

@@ -77,7 +77,7 @@ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/R
   - : Turns a `<button>` element into a command button, controlling a given interactive element by issuing the command specified in the button's [`command`](#command) attribute. The `commandfor` attribute takes the ID of the element to control as its value. This is a more general version of [`popovertarget`](#popovertarget).
 - [`disabled`](/en-US/docs/Web/HTML/Reference/Attributes/disabled)
   - : This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : The {{HTMLElement("form")}} element to associate the button with (its _form owner_). The value of this attribute must be the `id` of a `<form>` in the same document. (If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element, if any.)
 
     This attribute lets you associate `<button>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.

files/en-us/web/html/reference/elements/fieldset/index.md

@@ -47,7 +47,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
 
 - [`disabled`](/en-US/docs/Web/HTML/Reference/Attributes/disabled)
   - : If this Boolean attribute is set, all form controls that are descendants of the `<fieldset>`, are disabled, meaning they are not editable and won't be submitted along with the {{htmlelement("form")}}. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the {{HTMLElement("legend")}} element won't be disabled.
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : This attribute takes the value of the [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) attribute of a {{HTMLElement("form")}} element you want the `<fieldset>` to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the {{HTMLElement("input")}} elements inside the `<fieldset>` to be associated with the form, you need to use the `form` attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using {{domxref("HTMLFormElement.elements")}}.
 - `name`
   - : The name associated with the group.

files/en-us/web/html/reference/elements/input/index.md

@@ -450,7 +450,7 @@ A few additional non-standard attributes are listed following the descriptions o
     > [!NOTE]
     > Although not required by the specification, Firefox will by default [persist the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of an `<input>` across page loads. Use the [`autocomplete`](#autocomplete) attribute to control this feature.
 
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its **form owner**). This string's value, if present, must match the [`id`](#id) of a `<form>` element in the same document. If this attribute isn't specified, the `<input>` element is associated with the nearest containing form, if any.
 
     The `form` attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.

files/en-us/web/html/reference/elements/object/index.md

@@ -36,7 +36,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
   - : The address of the resource as a valid URL. At least one of **data** and **type** must be defined.
 - `declare` {{deprecated_inline}}
   - : The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent `<object>` element. Repeat the `<object>` element completely each time the resource is reused.
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : The form element, if any, that the object element is associated with (its _form owner_). The value of the attribute must be an ID of a {{HTMLElement("form")}} element in the same document.
 - `height`
   - : The height of the displayed resource, as in {{cssxref("&lt;integer&gt;")}} in {{glossary("CSS pixel", "CSS pixels")}}.

files/en-us/web/html/reference/elements/output/index.md

@@ -14,7 +14,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
 
 - [`for`](/en-US/docs/Web/HTML/Reference/Attributes/for)
   - : A space-separated list of other elements' [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id)s, indicating that those elements contributed input values to (or otherwise affected) the calculation.
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : The {{HTMLElement("form")}} element to associate the output with (its _form owner_). The value of this attribute must be the [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) of a `<form>` in the same document. (If this attribute is not set, the `<output>` is associated with its ancestor `<form>` element, if any.)
 
     This attribute lets you associate `<output>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element. The `<output>` element's name and content are not submitted when the form is submitted.

files/en-us/web/html/reference/elements/select/index.md

@@ -59,7 +59,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
   - : This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the `autofocus` attribute.
 - [`disabled`](/en-US/docs/Web/HTML/Reference/Attributes/disabled)
   - : This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example {{htmlelement("fieldset")}}; if there is no containing element with the `disabled` attribute set, then the control is enabled.
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : The {{HTMLElement("form")}} element to associate the `<select>` with (its _form owner_). The value of this attribute must be the [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) of a `<form>` in the same document. (If this attribute is not set, the `<select>` is associated with its ancestor `<form>` element, if any.)
 
     This attribute lets you associate `<select>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.

files/en-us/web/html/reference/elements/textarea/index.md

@@ -83,7 +83,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
     For more information, see the [`dirname` attribute](/en-US/docs/Web/HTML/Reference/Attributes/dirname).
 - [`disabled`](/en-US/docs/Web/HTML/Reference/Attributes/disabled)
   - : This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example {{ HTMLElement("fieldset") }}; if there is no containing element when the `disabled` attribute is set, the control is enabled.
-- `form`
+- [`form`](/en-US/docs/Web/HTML/Reference/Attributes/form)
   - : The form element that the `<textarea>` element is associated with (its "form owner"). The value of the attribute must be the `id` of a form element in the same document. If this attribute is not specified, the `<textarea>` element must be a descendant of a form element. This attribute enables you to place `<textarea>` elements anywhere within a document, not just as descendants of form elements.
 - [`maxlength`](/en-US/docs/Web/HTML/Reference/Attributes/maxlength)
   - : The maximum string length (measured in {{glossary("UTF-16", "UTF-16 code units")}}) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.