你能嵌套html表单吗？

可以这样嵌套html表单吗

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

---

这两种形式都有效吗？我的朋友对此有问题，

子表单

的一部分工作，而另一部分不工作。

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

从：

4.10.3

表单

元素

内容模型：

流动内容，但不包含表单元素子体

正如克雷格所说，没有

但是，关于您对原因的评论：

---

将1

与输入和“更新”按钮一起使用可能更容易，在另一个

浏览器中使用复制隐藏输入和“提交顺序”按钮可能更容易，即使您可以让它在一个浏览器中工作，也不能保证它在所有浏览器中都能工作。因此，虽然您可能可以让它在某些时间工作，但您肯定不能让它一直工作。

第二个表单将被忽略，请参阅来自WebKit的示例：

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

bool HTMLParser:：formCreateErrorCheck（令牌*t、RefPtr和结果）
{
//只有当我们还没有在表单中时，才创建一个新表单。
//这与其他浏览器的行为一致。
if（！m_currentFormElement）{
m_currentFormElement=新的HTMLFormElement（formTag，m_文档）；
结果=m_currentFormElement；
pCloserCreateErrorCheck（t，结果）；
}
返回false；
}

注意：不允许嵌套表单元素

（html4规范注意到嵌套形式从3.2到4没有变化）

（html4规范注意到嵌套表单从4.0到4.1没有变化）

（html5规范注意到嵌套形式从4到5没有变化）

---

对“此功能允许作者解决对嵌套表单元素缺乏支持的问题”的评论，但没有提到这是在哪里指定的，我认为他们假设我们应该假设它是在html3规范中指定的：）

关于嵌套表单：我花了10年的时间调试ajax脚本

对不起，我之前的回答/示例没有说明html标记

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

普通html不允许您这样做。但是使用javascript您可以做到这一点。
如果您使用的是javascript/jquery，则可以使用类对表单元素进行分类，然后使用serialize（）仅序列化要提交的项目子集的表单元素

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

对于2班，你可以这样做

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

整个表格

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

或者干脆

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

一个简单的解决方法是使用iframe保存“嵌套”表单。
从视觉上看，表单是嵌套的，但在代码方面，它完全在一个单独的html文件中。
今天，我也遇到了同样的问题，并解决了这个问题，我添加了一个用户控件和

在这个控件上，我使用这个代码

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

我相信这会有所帮助。
另一种解决此问题的方法是，如果您使用允许您操作发布数据的服务器端脚本语言，则如下所示声明html表单：

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

然后你可以做一些类似的事情：

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

您的$\u帖子现在只有“主窗体”数据，而子窗体数据存储在另一个变量中，您可以随意操作

希望这有帮助
 尽管这个问题已经很老了，而且我同意@everyone的说法，HTML中不允许嵌套表单

但这可能是所有人都想看到的

在这里，您可以破解（我称之为破解，因为我确信这是不合法的）html以允许浏览器具有嵌套表单

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>









JS小提琴链接

如果您使用的是AngularJS，则在运行时，
ng应用程序中的任何
标记都会被设计为嵌套的
ngForm
指令替换

在有角度的形状中可以嵌套。这意味着当所有子窗体都有效时，外部窗体也有效。但是，浏览器不允许嵌套
元素，因此Angular提供了
ngForm
指令，其行为与
相同，但可以嵌套。这允许您拥有嵌套表单，这在使用
ngRepeat
指令动态生成的表单中使用角度验证指令时非常有用。（）

我遇到了一个类似的问题，我知道这不是问题的答案，但它可以帮助有这种问题的人：

如果需要将两个或多个表单的元素放在给定的序列中，那么HTML5
form
属性可以是解决方案。


发件人：

表单属性在HTML5中是新的

指定
元素所属的
元素。此属性的值必须是同一文档中
元素的id属性
场景：


输入表格1\u n1
输入表格2\u n1
输入表格1\u n2
输入表格2\u 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" />



您将发现浏览器的兼容性。
在嵌套表单之前使用空表单标记

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

在Firefox和Chrome上测试和工作

没有测试，即

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



@adusza编辑：正如评论员指出的，上面的代码不会产生嵌套形式。但是，如果像下面这样添加div元素，mainForm中会有子表单，第一个空白表单将被删除

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

虽然我没有为嵌套表单提供解决方案（它不能可靠地工作），但我确实提供了一个适合我的解决方案：

使用场景：允许一次更改N个项目的超级表单。它有一个“全部提交”bu
<form name="mainForm" action="mainAction">
  <div>
      <form></form>
      <form name="subForm"  action="subAction">
      </form>
  </div>
</form>

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

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