你能嵌套html表单吗?
Posted
技术标签:
【中文标题】你能嵌套html表单吗?【英文标题】:Can you nest html forms? 【发布时间】:2010-09-27 15:13:39 【问题描述】:是否可以嵌套这样的html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
这样两种形式都可以工作吗?我的朋友遇到了这个问题,subForm
的一部分有效,而另一部分无效。
【问题讨论】:
他正在设置一个购物车,其中更新数量位于跟踪总数的表单内。我个人不会那样做,但他在让它发挥作用时遇到了问题。 似乎他最好使用javascript将值从一种形式复制到另一种形式,而不是尝试嵌套它们。我不认为嵌套会起作用。 您甚至会遇到问题,使其在同一浏览器的不同版本中工作。所以避免使用它。 老问题,但要回答评论,可能需要嵌套表单以避免 JavaScript。我遇到这个是因为我想为子表单“重置”按钮嵌套表单,这不需要启用 JavaScript。 是的,我遇到了和你一样的问题。我使用 ajax 提交表单来解决这个问题。 【参考方案1】:总之,没有。一个页面中可以有多个表单,但它们不应嵌套。
来自html5 working draft:
4.10.3
form
元素内容模型:
流式内容,但没有表单元素后代。
【讨论】:
我同意这个答案,但要问另一个,为什么不呢?为什么 HTML 不允许嵌套表单?对我来说,这似乎是一个限制,没有它我们会更好。有许多使用嵌套表单更易于编程的示例(即使用上传照片表单和个人资料编辑表单)。 @Nilzor 他不是在问它是否不能完成,而是在问为什么不。我同意;嵌套表单实际上非常有用。因此,如果您有一个带有标签的单页应用程序,每个标签都是其自己的表单(因此您可以提交它以保存进度),并且它们都包装在一个表单中,您可以提交该表单以保存所有内容。对我来说很有意义。 我同意其他人的说法。这种限制似乎是武断和有害的。 所以我们需要带有嵌套表单的 HTML 5.1。 嵌套表单的问题在于 HTML 中的表单架构,该表单中的操作会导致提交事件。这个问题引起了关于需要提交什么的问题。一个表单中可能有多个字段,或者一个 div 中有多个表单,但在一个表单中包含表单实际上没有意义。如果内容结合在一起,那就是一种形式;如果内容是单独提交的,那真的是单独的表单,不需要外部表单。【参考方案2】:HTML5 <input> form
属性可以作为解决方案。
来自http://www.w3schools.com/tags/att_input_form.asp:
attribute 形式是 HTML5 中的新形式。 指定
<input>
元素属于哪个<form>
元素。此属性的值必须是同一文档中<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" />
Here你会发现浏览器的兼容性。
【讨论】:
只是指出浏览器支持表:caniuse.com/#feat=form-attribute Resuming - 它适用于任何地方(Chrome、Firefox、Opera、Egde、Safari、android 浏览器...),除了 IE(包括现在最新的 v11 )。 @cliff-burton,这里有什么区别?我只能看到表单之外的输入。它仍然需要 JS 同时提交两个表单。不会吗? 呃,自从我上次使用这个已经很久了,但我认为提交表单不需要JS。如果<input type="submit"
链接到其指定 action
的 <form>
,则链接到同一 <form>
的 <input />
(s) 将在该请求中使用【参考方案3】:
第二种形式将被忽略,例如 WebKit 中的snippet:
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;
【讨论】:
【参考方案4】:可以获得与嵌套表单相同的结果,但无需嵌套。
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>
所有现代浏览器都支持表单属性。虽然 IE 不支持这一点,但 IE 不再是浏览器,而是一种兼容性工具,正如 Microsoft 本身所证实的那样: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-attributehttps://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
来自 html 规范:
此功能允许作者解决缺乏支持的问题 嵌套表单元素。
【讨论】:
这里有什么区别?我只能看到表单之外的输入。它仍然需要 JS 同时提交两个表单。不会吗? @sdlins 不,我们的想法是将主组件和子组件设置为您希望它们看起来的样式,嵌套。实际的 2 个表单标签将不可见。每个提交按钮都会触发它各自的表单提交。不需要 javascript。 如果您只想触发一个或其他表单,可以。但是当你需要触发“父母”时它会如何解决?表单 with 它的子表单,因为它是一个并且没有 js? @sdlins 这不是这个问题的意义所在。问题是关于 2 种不同的形式,但让它们嵌套。我想知道为什么你想要 2 个表单但仍然有 1 个提交功能?那你不能只有1个表格吗?你确实不得不求助于javascript来做一些奇怪的事情:P 是的,你是对的,这不是 OP 的问题。我会发布我自己的。谢谢!【参考方案5】:普通的 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();
【讨论】:
【参考方案6】:如果您使用的是 AngularJS,则 ng-app
中的任何 <form>
标签在运行时都会被设计为嵌套的 ngForm
指令替换。
在 Angular 中可以嵌套表单。这意味着当所有子表单都有效时,外部表单也有效。但是,浏览器不允许嵌套
<form>
元素,因此 Angular 提供了ngForm
指令,其行为与<form>
相同,但可以嵌套。这允许您拥有嵌套的表单,这在使用ngRepeat
指令动态生成的表单中使用 Angular 验证指令时非常有用。 (source)
【讨论】:
这是我一直在寻找的答案 :) 是的,嵌套表单确实有意义,因为如果您有多个选项卡但您只想在一个选项卡上执行验证,那么您可以使用嵌套表单这样做。 webcomponents也一样吗?【参考方案7】:解决此问题的另一种方法是,如果您使用一些允许您操作发布数据的服务器端脚本语言,请像这样声明您的 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 现在只有您的“主表单”数据,而您的子表单数据存储在另一个您可以随意操作的变量中。
希望这会有所帮助!
【讨论】:
【参考方案8】:正如克雷格所说,不。
但是,关于您对为什么的评论:
将 1 <form>
与输入和“更新”按钮一起使用可能更容易,并在另一个 <form>
中使用“提交订单”按钮复制隐藏的输入。
【讨论】:
我的购物车页面是这样的,他只是采取了不同的方式,不想改变它。如果他的方法也那么有效,我也不肯定。【参考方案9】:请注意,您不能嵌套 FORM 元素!
http://www.w3.org/MarkUp/html3/forms.html
https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9(html4 规范说明嵌套表单从 3.2 到 4 没有变化)
https://www.w3.org/TR/html4/appendix/changes.html#h-A.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 cmets 改为“此功能允许作者解决缺少对嵌套表单元素的支持的问题。”,但没有指出这是在哪里指定的,我认为他们假设我们应该假设它在html3 规范:)
【讨论】:
我不知道你为什么要发布一个已经回答了 3 年半的问题,但更多的问题是链接到 HTML3,这很长时间没有被推荐。 这是对基本问题的回答时间的参考,我认为这是建设性的。我还发现了“注意你不能嵌套 FORM 元素!”这句话很简单。在规范内要幽默。 这是一个问题,因为我必须插入一个作为表单的 API,并且因为 .net 应用程序(在所有内容周围都包含一个 在 HTML5 规范 html.spec.whatwg.org/multipage/forms.html#the-form-element 中,关于表单元素:“内容模型:流式内容,但没有表单元素后代。”【参考方案10】:您也可以在按钮标签内使用 formaction=""。
<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>
这将作为一个单独的按钮嵌套在原始表单中。
【讨论】:
这并不能回答问题,但这只是帮助我解决了另一个问题,我因此放弃投票 忽略以上内容(5 分钟后不允许我编辑...嗯)。这里有巨大的帮助 - 完全映射到我今天早上试图做的事情。这就是为什么我们都喜欢 SO【参考方案11】:一个简单的解决方法是使用 iframe 来保存“嵌套”表单。 从视觉上看,表单是嵌套的,但在代码方面,它完全位于一个单独的 html 文件中。
【讨论】:
iframe 时间到了【参考方案12】:在嵌套表单之前使用空表单标签
在 Firefox、Chrome 上测试并运行
未在 I.E. 上测试
<form name="mainForm" action="mainAction">
<form></form>
<form name="subForm" action="subAction">
</form>
</form>
@adusza 编辑:正如评论者指出的那样,上面的代码不会导致嵌套表单。但是,如果你像下面这样添加 div 元素,你将在 mainForm 中拥有 subForm,并且第一个空白表单将被删除。
<form name="mainForm" action="mainAction">
<div>
<form></form>
<form name="subForm" action="subAction">
</form>
</div>
</form>
【讨论】:
当我在 chrome 上尝试这个时它输出这个 您是否尝试过使用提交按钮。这种方法我用过很多次,而且一直有效。 这违反了规范,使用它是在乞求未来的问题。 这似乎只在mainForm
的 innerHTML
是通过 JavaScript(即 ajax)设置时才有效。仅在 HTML 文件中使用此 sn-p 不会导致嵌套表单:空表单标记将终止外部表单标记,subForm
将紧随mainForm
之后(在 Chrome 86 和 Firefox 80 上测试)。奇怪的是,在设置innerHTML
的时候,只去掉了第一个嵌套的表单,其余的保持嵌套。
更新,如果有另一个元素,你不需要ajax,比如外部和内部形式之间的div。很奇怪。【参考方案13】:
即使您可以让它在一个浏览器中工作,也不能保证它在所有浏览器中都能正常工作。因此,虽然您可能能够在某些时间让它工作,但你肯定无法让它在所有时间所有工作。
【讨论】:
【参考方案14】:虽然我没有提供嵌套表单的解决方案(它不能可靠地工作),但我确实提供了一个适合我的解决方法:
使用场景:允许一次更改 N 个项目的超形式。它的底部有一个“全部提交”按钮。每个项目都希望有自己的嵌套表单,并带有“提交项目#N”按钮。但是不能...
在这种情况下,实际上可以使用单个表单,然后将按钮的名称设置为 submit_1
..submit_N
和 submitAll
并在服务器端处理它,只查看以结尾的参数_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>
好吧,这算不上什么发明,但它确实起到了作用。
【讨论】:
【参考方案15】:关于嵌套表单:我花了 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_1 的 form_2 <i>outside</i>
的 ajaxContainer 时,我又恢复了业务。它回答了为什么人们可以嵌套表格的问题。我的意思是,真的,如果不定义要使用哪种形式,ID 是什么?必须有一个更好、更巧妙的解决方法。
【讨论】:
【参考方案16】:虽然这个问题已经很老了,但我同意@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 小提琴链接
http://jsfiddle.net/nzkEw/10/
【讨论】:
【参考方案17】:不,您不能有嵌套表单。相反,您可以打开一个包含表单的 Modal 并执行 Ajax 表单提交。
【讨论】:
【参考方案18】:真的不可能... 我无法嵌套表单标签... 但是我使用了这段代码:
<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
);
【讨论】:
【参考方案19】:今天我也遇到了同样的问题,解决了我添加了用户控件和 在这个控件上我使用这个代码
<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>
并在页面的 PreRenderComplete 事件上调用此方法
private void InitializeJavaScript()
var script = new StringBuilder();
script.Append("$(document).ready(function () ");
script.Append("$('.divformTagEx').append( ");
script.Append(litFormTag.Text);
script.Append(" )");
script.Append(" );");
ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
我相信这会有所帮助。
【讨论】:
【参考方案20】:在我知道我不应该这样做之前,我已经嵌套了表单,以便拥有多个提交按钮。就这样跑了 18 个月,有数千笔注册交易,没有人打电话告诉我们任何困难。
嵌套表单给了我一个 ID 来解析以采取正确的操作。直到我尝试将一个字段附加到其中一个按钮并 Validate 抱怨才中断。解开它并没有什么大不了的——我在外部表单上使用了一个明确的字符串化,所以提交和表单不匹配并不重要。是的,是的,应该将按钮从提交变为点击。
重点是在某些情况下它并未完全损坏。但“未完全打破”的标准可能太低了:-)
【讨论】:
【参考方案21】:[见下面code..代码格式]2simple技巧 只是不要在另一个表单标签中使用其他,请使用相同的元素而不使用表单标签。
见下面的例子 "" 不使用其他形式 // 只需调用其中的 enter image description here 元素""
【讨论】:
正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于你能嵌套html表单吗?的主要内容,如果未能解决你的问题,请参考以下文章