是否可以像这样嵌套html表单

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

两种形式都适用吗?我的朋友有这个问题,subForm的一部分工作,而另一部分不工作。


当前回答

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

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

其他回答

真的不可能…… 我不能嵌套表单标签… 但是我使用了下面的代码:

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

{% csrf_token %}之类的

并应用了一些JS

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
      }
  }
});

虽然我没有给出嵌套表单的解决方案(它不可靠地工作),但我确实提出了一个适合我的解决方案:

使用场景:允许一次更改N个项的超表单。它底部有一个“提交全部”按钮。每个项目都有自己的嵌套表单,带有“提交项目# N”按钮。但是不能…

在这种情况下,实际上可以使用单个表单,然后将按钮的名称设为submit_1..submit_N和submitAll并在服务器端处理它,如果按钮的名称是submit_1,则只查看以_1结尾的参数。

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

好吧,这算不上什么发明,但确实管用。

如果你使用的是AngularJS,你的ng-app中的任何<form>标签都会在运行时被ngForm指令替换掉,这些指令被设计成嵌套的。

在Angular中表单是可以嵌套的。这意味着当所有子表单都有效时,外部表单也是有效的。然而,浏览器不允许嵌套<form>元素,所以Angular提供了ngForm指令,它的行为与<form>相同,但可以嵌套。这允许你拥有嵌套表单,这在用ngRepeat指令动态生成的表单中使用Angular验证指令时非常有用。(源)

关于嵌套表单:我花了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>

Form_2不断失败,表示无效的Form_2。

当我把产生form_2 < I >的ajaxContainer移到form_1的</ I >外时,我又回到了业务中。它回答了为什么会嵌套形式的问题。我的意思是,如果不定义要使用哪种表单,ID是什么?肯定有更好、更圆滑的办法。

一个简单的解决方法是使用iframe来保存“嵌套”表单。 从视觉上看,表单是嵌套的,但在代码方面,它在一个单独的html文件中。