Are nested forms valid in HTML5?

Question

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

Answer 1

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.

Answer 2

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.