HTML: Risk of using nested <form>s?

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 fal开发者_如何学编程se">
    <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.

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.

I ran into this accidentally just yesterday. In Safari, the inner form tag's "method" attribute is ignored and the submit button for the inner form submits using the method of the outer form. In short, don't do it.