以下是有效的html:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

当你提交b时,你只能得到内部表单中的字段。当你提交“a”时,你会得到所有字段减去“b”内的字段。

如果不可能,对于这种情况有什么可行的变通办法?


当前回答

不,这是无效的。但是一个“解决方案”可以是在窗体“a”之外创建一个包含窗体“b”的模态窗口。

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

如果你使用bootstrap或materialize css,这很容易做到。 我这样做是为了避免使用iframe。

其他回答

嵌套表单标签的非javascript解决方案:

因为你考虑到了

所有字段减去“b”以内的字段。

当提交"a"时,以下将工作,使用常规的web表单而没有花哨的JavaScript技巧:

步骤1。把每个表单放在自己的网页上。

步骤2。在您希望此子表单出现的任何位置插入iframe。

步骤3。利润。

我尝试使用一个代码游乐场网站来展示演示,但许多网站禁止在iframe中嵌入网站,即使是在他们自己的域内。

一种可能是在外部形式中有一个iframe。iframe包含内部表单。确保在iframe的head标记中使用<base target="_parent" />标记,使表单表现为主页的一部分。

快速的解决方案: 要获得不同表单的不同验证,并将它们的提交保存在独立的函数中,您可以这样做:

<form id="form1" onsubmit="alert('form1')"></form>
<form id="form2" onsubmit="alert('form2')"></form>

<div>
  <input form="form1" required />
  <input form="form1" required />

  <div>
      <input form="form2" required />
      <input form="form2" required />
      <button form="form2" type="submit">Send form2</button>
  </div>

  <input form="form1" required />
  <button form="form1" type="submit">Send form1</button>
</div>

通过将HTML代码输入W3 Validator,您可以非常容易地回答自己的问题。(它有一个文本输入域,你甚至不需要把你的代码放在服务器上…)

(不,它不会生效。)

不,这是无效的。但是一个“解决方案”可以是在窗体“a”之外创建一个包含窗体“b”的模态窗口。

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

如果你使用bootstrap或materialize css,这很容易做到。 我这样做是为了避免使用iframe。