HTML: Risk of using nested <form>s?

Question

Are there any browser compatibility issues to using this layout

<form action="javascript:alert('error on submit outer')" onsubmit="submitOuterScriptedForm(this); return false">
  <input name="field1"/>
  <form action="javascript:alert('error on submit inner')" onsubmit="submitInnerScriptedForm(this); return false">
    <input name="field1"/>
    <button type="submit">Click here for JavaScript mini-form</button>
  </form>
  <input name="field2"/>
  <button type="submit">Click here to submit JavaScript main form</button>
</form>

Expected result

• Pressing enter in the second input or clicking the first button triggers the onsubmit of the inner form.
• Pressing enter in the first or third input or clicking the last button triggers the onsubmit of the outer form.

Answer 1

It is not valid HTML.

You are not allowed to nest form tags.

From the DTD and spec:

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

The -(FORM) specifically disallows a nested form.

Expected result: Validation Error in the W3 validation service.

Browser expected result: undefined behavior.