With nested HTML forms, is it possible to target which one's content is transmitted upon submit?

Question

I have a form within another form:

<form id="a">
    <form id="b">
        <input type="submit">

When the submit button is clicked, it seems that the outer form is submitted.

Is there a way to target which form is submitted?

Answer 1

i think this is not allowed by the html standard.

Answer 2

No, nested forms aren't supported:

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

-- http://www.w3.org/MarkUp/html3/forms.html

Answer 3

The HTML DTD specifically forbids a form element from containing another form element:

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

http://www.w3.org/TR/html401/interact/forms.html#edef-FORM

Answer 4

Like others have said...nested forms aren't allowed.

However, that doesn't mean some browsers won't do something with such. In the example that you have presented, the browser appears to be ignoring the second <form> tag in a similar fashion to how an unknown tag (i.e. <notAValidTag>) is also ignored. Since JavaScript also doesn't allow for embedded form collections, the best way to ensure that FormB's information is submitted is to make it no longer a nested form. This will break up your markup and UI into more distinct sections which may be beneficial from a UX perspective as well.

Answer 5

In HTML 5, as currently drafted, yes. Each input element can have a "form" attribute signalling which form it belongs to. However, it is still invalid to nest forms in HTML and HTML parsers won't allow this to happen.

However, it is possible to construct nested forms via JavaScript. In the absence of the form attribute, the rules for determining which form an input belongs to are quite complex, but they are described in full with an example at http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#association-of-controls-and-forms