29

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.

Improve this question
8
  • 1
    Apart from the question of "is it acceptable or not", why would you want nested forms in the first place? Commented Oct 23, 2014 at 20:31
  • 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. Commented Oct 23, 2014 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. Commented Oct 23, 2014 at 20:36
  • 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 w3.org/TR/html5/forms.html#form-owner Commented Oct 24, 2014 at 0:45
  • 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. Commented Oct 24, 2014 at 2:01

2 Answers 2

Reset to default
47

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you -- I completely missed that. Please include this link as part of your answer w3.org/TR/html5/forms.html#the-form-element, which shows where the content model is defined for the form element.
6

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.

Improve this answer

3 Comments

Nested forms are supported, in fact, the HTML5 spec goes into some detail as to how they work. But they are not valid.
In what way would I need to update my example to be supported?
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 <!DOCTYPE html><form><div></form><form> will result in a nested form, so you could easily add <div></form> after <form id='parent'> in your example to get a nested form. Again, I stress that all these techniques are invalid HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.