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

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

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


当前回答

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

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

其他回答

另一种解决这个问题的方法是,如果你使用一些服务器端脚本语言,允许你操纵发布的数据,就是这样声明你的html表单:

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

如果你打印发布的数据(我将在这里使用PHP),你会得到一个这样的数组:

//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']);

你的$_POST现在只有你的“主表单”数据,你的子表单数据存储在你可以随意操作的另一个变量中。

希望这能有所帮助!

在我知道我不应该这样做之前,我已经为拥有多个提交按钮而嵌套了表单。这样运行了18个月,数千个注册交易,没有人打电话给我们任何困难。

嵌套表单为我提供了一个ID来解析要采取的正确操作。直到我试图将一个字段附加到其中一个按钮和验证抱怨,才打破。不是一个大问题来解决它-我使用了一个显式的stringify在外部的形式,所以它没有关系提交和形式不匹配。是的,是的,应该把按钮从submit变成onclick。

关键是在某些情况下,它并没有完全被破坏。但“没有完全崩溃”可能是一个太低的标准:-)

正如克雷格所说,不。

但是,关于你所说的原因:

使用1 <form>的输入和“Update”按钮,并在另一个<form>的“Submit Order”按钮中使用复制隐藏输入可能会更容易。

即使您可以让它在一个浏览器中工作,也不能保证它在所有浏览器中都能正常工作。所以虽然你可能能让它在某些时候工作,但你肯定不能让它在所有时候都工作。

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

来自html5工作草案:

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