是否可以像这样嵌套html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
两种形式都适用吗?我的朋友有这个问题,subForm的一部分工作,而另一部分不工作。
是否可以像这样嵌套html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
两种形式都适用吗?我的朋友有这个问题,subForm的一部分工作,而另一部分不工作。
当前回答
普通html不允许您这样做。但javascript可以做到。 如果你正在使用javascript/jquery,你可以用一个类来分类你的表单元素,然后使用serialize()来序列化那些你想要提交的项目子集的表单元素。
<form id="formid">
<input type="text" class="class1" />
<input type="text" class="class2">
</form>
然后在你的javascript中,你可以这样做来序列化class1元素
$(".class1").serialize();
对于class2你可以这样做
$(".class2").serialize();
对于整个形式
$("#formid").serialize();
或者简单地
$("#formid").submit();
其他回答
正如克雷格所说,不。
但是,关于你所说的原因:
使用1 <form>的输入和“Update”按钮,并在另一个<form>的“Submit Order”按钮中使用复制隐藏输入可能会更容易。
虽然这个问题已经很老了,而且我同意@everyone的观点,HTML中不允许嵌套表单
但这个东西大家可能都想看看
在那里你可以hack(我称之为黑客,因为我确定这不是合法的)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小提琴link
http://jsfiddle.net/nzkEw/10/
在我知道我不应该这样做之前,我已经为拥有多个提交按钮而嵌套了表单。这样运行了18个月,数千个注册交易,没有人打电话给我们任何困难。
嵌套表单为我提供了一个ID来解析要采取的正确操作。直到我试图将一个字段附加到其中一个按钮和验证抱怨,才打破。不是一个大问题来解决它-我使用了一个显式的stringify在外部的形式,所以它没有关系提交和形式不匹配。是的,是的,应该把按钮从submit变成onclick。
关键是在某些情况下,它并没有完全被破坏。但“没有完全崩溃”可能是一个太低的标准:-)
如果你使用的是AngularJS,你的ng-app中的任何<form>标签都会在运行时被ngForm指令替换掉,这些指令被设计成嵌套的。
在Angular中表单是可以嵌套的。这意味着当所有子表单都有效时,外部表单也是有效的。然而,浏览器不允许嵌套<form>元素,所以Angular提供了ngForm指令,它的行为与<form>相同,但可以嵌套。这允许你拥有嵌套表单,这在用ngRepeat指令动态生成的表单中使用Angular验证指令时非常有用。(源)
可以实现与嵌套表单相同的结果,但不需要嵌套它们。
HTML5引入了表单属性。可以将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不再是浏览器,而是一个兼容工具,微软自己也证实了这一点:https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/。是时候停止关心如何在IE中工作了。
https://caniuse.com/#feat=form-attribute https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
来自html规范:
该特性允许作者解决缺乏支持的问题 嵌套表单元素。