在嵌套表单之前使用空表单标签

在Firefox, Chrome上测试和工作

未测试I.E.

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

EDIT by @adusza:正如评论者指出的那样，上面的代码不会产生嵌套表单。然而，如果你像下面这样添加div元素，你将在mainForm中有subForm，并且第一个空白表单将被删除。

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

可以实现与嵌套表单相同的结果，但不需要嵌套它们。

HTML5引入了表单属性。可以将form属性添加到窗体外部的窗体控件，以便将它们链接到特定的窗体元素(通过id)。

https://www.impressivewebs.com/html5-form-attribute/

这样你可以像这样构造你的html:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

所有现代浏览器都支持form属性。虽然IE不支持这个功能，但IE不再是浏览器，而是一个兼容工具，微软自己也证实了这一点:https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/。是时候停止关心如何在IE中工作了。

https://caniuse.com/#feat=form-attribute https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

来自html规范:

该特性允许作者解决缺乏支持的问题 嵌套表单元素。

HTML5 <input>表单属性可以是解决方案。 从http://www.w3schools.com/tags/att_input_form.asp:

表单属性是HTML5中的新属性。 指定<input>元素属于哪个<form>元素。此属性的值必须是同一文档中<form>元素的id属性。

场景:

input_Form1_n1 input_Form2_n1 input_Form1_n2 input_Form2_n2

实现:

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

在这里你可以找到浏览器的兼容性。

普通html不允许您这样做。但javascript可以做到。 如果你正在使用javascript/jquery，你可以用一个类来分类你的表单元素，然后使用serialize()来序列化那些你想要提交的项目子集的表单元素。

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

然后在你的javascript中，你可以这样做来序列化class1元素

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

对于class2你可以这样做

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

对于整个形式

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

或者简单地

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

总之，没有。一个页面中可以有多个表单，但它们不应该嵌套。

来自html5工作草案:

4.10.3 form元素 内容模型: 流内容，但没有表单元素后代。

不，你不能有嵌套的表单。相反，您可以打开一个包含表单的Modal并执行Ajax表单提交。