表单中包含表单，可以吗?

我们是否可以在另一种形式中有一种形式?有什么问题吗?

322251 次浏览
小开

是的，有。这是错误的。这行不通，因为这是错误的。大多数浏览器只能看到一个表单。

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

小开

不。HTML明确禁止嵌套表单。

从HTML 5草稿:

< p >内容模型:

.流内容，但没有表单元素后代

从HTML 4.01建议:

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

(注意-(FORM)部分)。

小开
最佳答案

虽然在一个HTML页面中可以有多个<form>元素，但不能嵌套它们。

小开

必须有嵌套表单的XHTML是无效的。但是，您可以使用多个提交按钮，并根据用户单击的按钮使用服务器端脚本运行不同的代码。

小开

不，我们不能像这样在另一个表单中嵌套表单

<form name='form1'>
<form name='form2'>
//some code here
</form>
</form>

它在某些情况下可以工作，但不建议用于通用平台。您可以在单个表单中使用大量SUBMIT按钮，但不能适当地管理嵌套表单。

小开

如果你有一个主表单，并且被迫有一个“带表单的表单”，下面是你可以做的…在我的情况下，我在globalHeader中有一个链接，我想在点击时执行一个帖子:

示例表单post链接按钮提交:

而不是一个表格…将你的输入包装在一个div中:

 <div id="gap_form"><input type="hidden" name="PostVar"/><a id="myLink" href="javascript:Form2.submit()">A Link</a></div>

js文件:

$(document).ready(function () {
(function () {
$('#gap_form').wrap('<form id="Form2" action="http://sitetopostto.com/postpage" method="post" target="_blank"></form>');
})();});

这将在动态中将div“gap_form”中的所有内容包装在表单中，并且链接将提交该表单。我有这个确切的例子工作在一个页面上现在…(在我的例子中……您可以通过重定向到一个新页面并在该页面上提交表单来完成同样的事情……但我更喜欢这个)

小开

嵌套表单不受支持，也不是w3c标准的一部分(正如许多人所述)。

然而，HTML5增加了对输入的支持，这些输入不必是任何表单的后代，但可以通过使用“form”属性以多种形式提交。这并不完全允许嵌套表单，但是通过使用此方法，您可以模拟嵌套表单。

"form"属性的值必须是表单的id，如果有多个表单，则用空格分隔表单id。

你可以阅读更多在这里

小开

另一种解决方法是启动一个包含自己表单的模态窗口

小开

表单嵌套可以通过新的HTML5输入元素的Form属性实现。虽然我们没有在结构上嵌套表单，但输入是按它们自己的形式计算的。在我的测试中，除了IE(IE11)，有3个主要浏览器支持这个功能。表单嵌套限制是HTML UI设计的一大障碍。

下面是一个示例代码，当你点击保存按钮时，你应该看到“2 3 success”(Original http://www.impressivewebs.com/html5-form-attribute/):

<form id="saveForm" action="/post/dispatch/save" method="post"></form>
<form id="deleteForm" action="/post/dispatch/delete" method="post"></form>


<div id="toolbar">
<input type="text" name="foo" form="saveForm" />
<input type="hidden" value="some_id" form="deleteForm" />
<input type="text" name="foo2" id="foo2" form="saveForm" value="success" />


<input type="submit" name="save" value="Save" form="saveForm" onclick="alert(document.getElementById('deleteForm').elements.length + ' ' + document.getElementById('saveForm').elements.length + ' ' + document.getElementById('saveForm').elements['foo2'].value);return false;" />
<input type="submit" name="delete" value="Delete" form="deleteForm" />
<a href="/home/index">Cancel</a>
</div>

提交答案