form html5 attribute for nested forms

October 7, 2014


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 --> <div> <!-- binding the inputs to our fake form (form="inner")--> <input name="belongs-to-inner" form="inner" /> <input type="submit" value="inner" form="inner" /> </div> </form> <!-- 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>