26

Nested Forms Acceptable?

I can't find anything in the HTML5 doc that talks about nested forms. I'm sure it's listed on some page, somewhere (perhaps a changelog), but if not, should I assume that no-mention is the same as acceptable?

Additionally, the HTML4 doc doesn't mention it. Perhaps it's been permitted all along and I was adhering to old standards.

Previous Mentions

XHTML1.0

form must not contain other form elements.

HTML 3.0

There can be several forms in a single document, but the FORM element can't be nested.

unor
  • 92,415
  • 26
  • 211
  • 360
vol7ron
  • 40,809
  • 21
  • 119
  • 172
  • 1
    Apart from the question of "is it acceptable or not", why would you want nested forms in the first place? – mason Oct 23 '14 at 20:31
  • I imagine it would present the same challenges as nested `` elements, and thus lead to the question of "why?" – Jason Sperske Oct 23 '14 at 20:34
  • 1
    @mason: Consider AJAX. The question you ask is similar to, why would you want to only send/retrieve a part of a page. We are not loading/reloading full HTML pages anymore. Surely, this could be handled with JavaScript to disable unwanted elements, or redesign the page to have multiple forms. But when a form becomes massive, it may be that you only want some actions to be performed at times (e.g., updates). At other times, you may still want to pass along all the information. Again, there are alternatives, but a nested form may have it's place, especially from a rdb perspective. – vol7ron Oct 23 '14 at 20:35
  • 2
    So if a submit is trigger on an inner form then only it's children get posted, and when a submit is triggered on the outer form then everything inside gets posted? That could be interesting. – Jason Sperske Oct 23 '14 at 20:36
  • @JasonSperske yes. I suspect it would look for the closest ancestor. – vol7ron Oct 23 '14 at 20:37
  • 2
    @vol7ron - Yes, controls are submitted when their `form-owner` is submitted, which is by default their closest ancestor form element. But the form owner of the control can be overridden by setting the `form` attribute on the control. See http://www.w3.org/TR/html5/forms.html#form-owner – Alohci Oct 24 '14 at 00:45
  • @Alohci the issue is that nested forms are not valid HTML, which is what I was curious about and couldn't find. HTML5 has become laxed on so many things, so part of me wanted to see this happen. Turns out it was in the docs, I just was blind to it – vol7ron Oct 24 '14 at 01:58
  • 3
    @vol7ron - Sure, I understand that. I just thought you'd be interested to know that browsers do, in fact, submit on a closest ancestor basis. – Alohci Oct 24 '14 at 02:01

2 Answers2

45

The HTML5 document does mention it in the section you link above:

Content model

Flow content, but with no form element descendants.

"Content model" means "what this element may contain". So no, nested forms are not allowed.

Community
  • 1
  • 1
lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • 1
    Thank you -- I completely missed that. Please include this link as part of your answer http://www.w3.org/TR/html5/forms.html#the-form-element, which shows where the *content model* is defined for the `form` element. – vol7ron Oct 23 '14 at 20:46
5

If they were supported then something like this would work:

$('button').on('click', function(e) {
    var form = $(this).parents('form');
    e.preventDefault();
    if(!form) {
        form = $(this);
    }
    $('#output').val('from '+form.attr('id')+'\n'+form.serialize());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='parent'>
    <form id='childA'>
        <input type='text' placeholder='value of A'/>
    <button>Send part A</button>
</form>
    <form id='childB'>
        <input type='text' placeholder='value of B'/>
    <button>Send part B</button>
</form>
    <button>Send All</button>
</form>
<br/>
<textarea id='output'></textarea>

However because it is not officially supported you can look see the browser is preventing it (closing what it assumes are open-ended form elements). One alternative would be to have a single form but add data attributes to the individual inputs so JavaScript can collect the sub fields you want and manually build a POST from them.

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
  • 1
    Nested forms are *supported*, in fact, the HTML5 spec goes into some detail as to how they work. But they are not *valid*. – Alohci Oct 24 '14 at 00:20
  • In what way would I need to update my example to be supported? – Jason Sperske Oct 24 '14 at 03:08
  • 1
    There are three ways to get nested forms. 1) construct them in JS; 2) Serve your page using `application/xhtml+xml` media type; 3) Exploit the peculiarities of the HTML parser. For example [`
    `](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cform%3E%3Cdiv%3E%3C%2Fform%3E%3Cform%3E%0A) will result in a nested form, so you could easily add `
    ` after `` in your example to get a nested form. Again, I stress that all these techniques are invalid HTML.
     – Alohci Oct 26 '14 at 02:31