表格里面的表格,那好吗？

Question

我们是否可以在另一种形式内有表格？这有什么问题吗？

Answer 1

虽然您可以<form>在一个HTML页面中包含多个元素,但您无法嵌套它们.

Answer 2

使用新的HTML5输入元素的表单属性可以实现表单嵌套.虽然我们没有在结构上嵌套表单,但是输入会以它们自己的形式进行评估.在我的测试中,除了IE(IE11)之外,3个主流浏览器都支持此功能.表单嵌套限制是HTML UI设计的一大障碍.

下面是一个示例代码,当您单击"保存"按钮时,您应该看到"2 3成功"(原始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>

Answer 3

不,HTML明确禁止嵌套表单.

从HTML 5草案:

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

从HTML 4.01建议书:

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

(注意 - (FORM)部分).

Answer 4

嵌套表单不受支持,也不是w3c标准的一部分(正如你们许多人所说的那样).

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

"form"属性的值必须是表单的id,或者在多个表单的情况下,单独的表单id与空格.

你可以在这里阅读更多

Answer 5

如果你有一个主表格,并被迫拥有一个"带表格的表格"这是你可以做的......在我的情况下,我在globalHeader中有一个链接,我想在点击它时执行一个帖子:

带链接按钮提交的示例表单帖子:

而不是表单...将您的输入包装在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"内的所有内容包装在一起,链接将提交该表单.我现在在页面上运行这个确切的示例...(在我的示例中......您可以通过重定向到新页面并在该页面上提交表单来完成同样的事情......但我更喜欢这样)

Answer 6

就在这里。这是错误的。它不会工作，因为它是错误的。大多数浏览器只会看到一种形式。

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

Answer 7

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