Question

使用此布局是否存在任何浏览器兼容性问题

<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>

预期结果

在第二个输入中按Enter键或单击第一个按钮会触发内部表单的onsubmit。
在第一个或第三个输入中按Enter键或单击最后一个按钮会触发外部表单的onsubmit。

Answer 1

它无效HTML。

您不能嵌套表单标记。

来自DTD and spec：

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

-(FORM)明确禁止使用嵌套表单。

预期结果：W3验证服务中的验证错误。

浏览器预期结果：未定义的行为。

Answer 2

昨天我偶然遇到了这个问题。在Safari中，内部表单标记的“方法”属性被忽略，内部表单的提交按钮使用外部表单的方法提交。简而言之，不要这样做。

HTML：使用嵌套<form> s？</form>的风险

2 个答案: