A form-associated element can have a relationship with a form element, which is called the element’s form owner. If a form-associated element is not associated with a form element, its form owner is said to be null.

A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but, if it is reassociateable, may have a form attribute specified to override this.


This is useful for example to circumvent HTML’s lack of support for nested forms.


Send the forms and check your network tab
to see which data gets sent when submitting each form

<form id="outer" action="/dev/null" method="POST" target="nowhere">
  <input name="belongs-to-outer" />
  <input type="submit" value="outer" />

  <!-- This imitates our nested form -->
    <!-- binding the inputs to our fake form (form="inner")-->
    <input name="belongs-to-inner" form="inner" />
    <input type="submit" value="inner" form="inner" />

<!-- The inner form actually placed outside to stay conform to the standards -->
<form id="inner" action="/dev/null" method="POST" target="nowhere"></form>

<!-- Just an iFrame where the forms get sent, because we do not want the page to change -->
<iframe name="nowhere" style="display:none"></iframe>