您可以嵌套html表单吗?

html HTML

小卤蛋达蒙

2020-03-20

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

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

这样两种形式都起作用?我的朋友对此有问题,部分subForm作品没有问题。

第2441篇《您可以嵌套html表单吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
猴子达蒙A 2020.03.20

在我不知道要这样做之前,我已经嵌套了表格,目的是要有多个提交按钮。以这种方式运行了18个月,进行了数千笔注册交易,没有人给我们打电话带来任何困难。

嵌套表单给了我一个ID,以解析要采取的正确操作。直到我尝试将一个字段附加到其中一个按钮上,Validate都抱怨了,才打破。解开它没什么大不了的-我在外部表单上使用了显式字符串化,因此提交和表单不匹配无关紧要。是的,应该将按钮从提交提交到onclick。

关键是在某些情况下它没有被完全破坏。但是“不完全坏掉”可能太低了,无法拍摄:-)

飞云斯丁 2020.03.20

不,您不能拥有嵌套表格。相反,您可以打开一个包含表单的Modal并执行Ajax表单提交。

伽罗GO 2020.03.20

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

在Firefox,Chrome上测试和工作

未在IE上测试

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>
阳光十三 2020.03.20

您甚至可能无法在同一浏览器的不同版本中使用它。所以避免使用它。

斯丁番长 2020.03.20

虽然我没有提出嵌套表单的解决方案(它不能可靠地工作),但我还是提出了一种对我有用的解决方法:

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

在这种情况下,实际上可以使用一种形式,然后使按钮的名称为submit_1.. submit_NsubmitAll通过仅查看_1按钮名称为的结尾的参数来在服务器端进行处理submit_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>

好的,虽然发明不多,但是可以完成工作。

Tony伽罗 2020.03.20

即使您可以在一个浏览器中使用它,也无法保证它在所有浏览器中都可以使用。因此,尽管你也许能得到它的工作一定的时间,你肯定无法得到它的工作的所有的时间。

神无ProHarry 2020.03.20

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

JinJin伽罗 2020.03.20

请注意,您不允许嵌套FORM元素!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9(html4规范未说明从3.2到4的嵌套形式的变化)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12(html4规范并未说明从4.0到4.1的嵌套形式的变化)

https://www.w3.org/TR/html5-diff/(html5规范未说明从4到5的嵌套形式的变化)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms注释为“此功能使作者可以解决缺乏对嵌套表单元素的支持。”不引用它的指定位置,我认为他们假设我们应该假定它是在html3规范中指定的:)

斯丁理查德 2020.03.20

正如克雷格所说,不。

但是,关于您的评论原因

将1 <form>与输入和“更新”按钮一起使用可能更容易,而将复制隐藏的输入与另一个“提交订单”按钮一起使用,则更容易<form>

小哥L 2020.03.20

由于是2019年,我想为这个问题提供更新的答案。可以实现与嵌套表单相同的结果,但无需嵌套它们。HTML5引入了form属性。您可以将form属性添加到表单外部的表单控件,以将它们链接到特定的表单元素(按ID)。

https://www.impressivewebs.com/html5-form-attribute/

这样,您可以像这样构造HTML:

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

所有现代浏览器都支持form属性。IE虽然不支持此功能,但是IE不再是浏览器,而是一种兼容性工具,这已得到Microsoft本身的确认:https : //www.zdnet.com/article/microsoft-security-chief-ie-is-not-a浏览器因此停止使用它作为您的默认值/现在该是我们停止关心使IE工作正常的时候了。

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

从html规范:

此功能使作者可以解决缺少对嵌套表单元素的支持的问题。

猴子古一蛋蛋 2020.03.20

如果您使用的是AngularJS,则其中的任何<form>标签ng-app在运行时ngForm都会被设计为嵌套的指令替换

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

小胖Green梅 2020.03.20

纯HTML不允许您执行此操作。但是使用javascript,您可以做到这一点。如果您使用的是javascript / jquery,则可以使用一个类对表单元素进行分类,然后使用serialize()仅序列化要提交的项目子集的那些表单元素。

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

然后在您的JavaScript中,您可以执行此操作以序列化class1元素

$(".class1").serialize();

对于第2类,您可以

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

对于整个表格

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

或简单地

$("#formid").submit();
阳光小小 2020.03.20

我遇到了类似的问题,但我知道这不是问题的答案,但对于有这种问题的人可能会有所帮助:
是否需要将两种或多种形式的元素按给定顺序放置,HTML5 <input> form属性可以解决。

http://www.w3schools.com/tags/att_input_form.asp

  1. form 属性是HTML5中的新增功能。
  2. 指定元素所属<form><input>元素。此属性的值必须是<form>同一文档中元素的id属性

场景

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_Form2_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" />

在这里,您将找到浏览器的兼容性。

小哥Pro梅 2020.03.20

一言以蔽之。您可以在页面中具有多种形式,但不应嵌套它们。

html5工作草案中

4.10.3 form元素

内容模型:

流内容,但没有表单元素后代。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android