以下是有效的html:

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

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

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


当前回答

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

其他回答

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

HTML 4。x & HTML5不允许嵌套表单,但HTML5允许使用“form”属性(“form owner”)。

至于HTML 4。X你可以:

使用一个只有隐藏字段和JavaScript的额外表单来设置其输入并提交表单。 使用CSS来排列几个HTML表单,使其看起来像一个单一的实体-但这可能很复杂。

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

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

听起来你这样做是为了在视觉上定位彼此之间的形式。如果是这种情况,只需做两个单独的表单,并使用CSS来定位它们。

您正在尝试实现HTML中不支持的嵌套表单。

每个表单都必须包含在form元素中。有可能 在一个文档中包含多个表单,但是FORM元素不能 嵌套。

解决方案

您可以通过对HTML和JavaScript进行一些更改来实现此功能。(不使用HTML表单)

步骤 1. 用div标签创建两个表单,如下所示(不使用表单标签)

<div id="form_a">
 <input.../>
     <div id="form_b">
        <input.../>
        <input.../>
        <button id="submit_b">Submit B</button>
     </div>
 <input.../>
 <button id="submit_a">Submit A</button>
</div >

2. 添加JQuery和Ajax来提交每个表单数据

    <script>
    // Submit form A data
    $('#submit_a').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_a input').not( "#form_b input" ).serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });

   // Submit form B data
    $('#submit_b').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_b input').serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });
    </script>