Can you nest html forms?

Is it possible to nest html forms like this

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

so that both forms work? My friend is having problems with this, a part of the subForm works, while another part of it does not.

Solution 1:

In a word, no. You can have several forms in a page but they should not be nested.

From the html5 working draft:

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

Solution 2:

The HTML5 <input> form attribute can be the solution.

From http://www.w3schools.com/tags/att_input_form.asp:

1. The form attribute is new in HTML5.
2. Specifies which <form> element an <input> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.

Scenario:

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Implementation:

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

Here you'll find browser's compatibility.