HTML: risk of using nested <form> s?

Question

Are there any browser compatibility issues with 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 the input in the second input or pressing the first button causes onsubmit of the internal form.
• Pressing the input of the first or third input or pressing the last button causes onsubmit of the external form.

Answer 1

I stumbled upon this yesterday. In Safari, the "method" attribute of the inner form tag is ignored, and the submit button for the inner form is submitted using the outer form method. In short, do not do this.

Answer 2

Invalid HTML.

You are not allowed to insert form tags.

From DTD and specification :

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

-(FORM) specifically prohibits a nested form.

Expected Result: Validation error in W3 Validation Service.

Browser Expected Result: undefined behavior.