Can you nest html forms?

Question

Is it possible to nest html forms like this

so

Answer 1

Really not possible... I couldn't nest form tags... However I used this code:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

with {% csrf_token %} and stuff

and applied some JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

Answer 2

Plain html cannot allow you to do this. But with javascript you can be able to do that. If you are using javascript/jquery you could classify your form elements with a class and then use serialize() to serialize only those form elements for the subset of the items you want to submit.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

Then in your javascript you could do this to serialize class1 elements

$(".class1").serialize();

For class2 you could do

$(".class2").serialize();

For the whole form

$("#formid").serialize();

or simply

$("#formid").submit();

Answer 3

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.

Answer 4

I ran into a similar problem, and I know that is not an answer to the question, but it can be of help to someone with this kind of problem:
if there is need to put the elements of two or more forms in a given sequence, 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.

Answer 5

The second form will be ignored, see the snippet from WebKit for example:

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

Answer 6

Use empty form tag before your nested form

Tested and Worked on Firefox, Chrome

Not Tested on I.E.

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

EDIT by @adusza: As the commenters pointed out, the above code does not result in nested forms. However, if you add div elements like below, you will have subForm inside mainForm, and the first blank form will be removed.

<form name="mainForm" action="mainAction">
  <div>
      <form></form>
      <form name="subForm"  action="subAction">
      </form>
  </div>
</form>