在另一个 html 表单中包含一个 html 表单是否有效？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/555928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it valid to have a html form inside another html form?
提问by GeneQ
Is it valid html to have the following:
具有以下内容的 html 是否有效：
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
So when you submit "b" you only get the fields within the inner form. When you submit "a" you get all fields minus those within "b".
因此，当您提交“b”时，您只能获得内部表单中的字段。当您提交“a”时，您将获得所有字段减去“b”中的字段。
If it isn't possible, what workarounds for this situation are available?
如果不可能，对于这种情况有哪些可用的解决方法？
回答by GeneQ
A. It is not valid HTML nor XHTML
A.它不是有效的 HTML 或 XHTML
In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:
在官方 W3C XHTML 规范的 B 节“元素禁止”中，指出：
"form must not contain other form elements."
http://www.w3.org/TR/xhtml1/#prohibitions
http://www.w3.org/TR/xhtml1/#prohibitions
As for the older HTML 3.2 spec, the section on the FORMS element states that:
至于旧的HTML 3.2 规范，关于 FORMS 元素的部分指出：
"Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested."
“每个表单都必须包含在一个 FORM 元素中。一个文档中可以有多个表单，但 FORM 元素不能嵌套。”
B. The Workaround
B.解决方法
There are workarounds using JavaScript without needing to nest form tags.
有一些使用 JavaScript 的解决方法，无需嵌套表单标签。
"How to create a nested form."(despite title this is notnested form tags, but a JavaScript workaround).
“如何创建嵌套表单。” （尽管标题不是嵌套的表单标签，而是 JavaScript 解决方法）。
Answers to this StackOverflow question
Note:Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)
注意：虽然可以通过脚本操纵 DOM 来欺骗 W3C 验证器来传递页面，但它仍然不是合法的 HTML。使用这种方法的问题在于，现在不能保证跨浏览器的代码行为。（因为它不是标准的）
回答by Andreas
In case someone find this post here is a great solution without the need of JS. Use two submit buttons with different name attributes check in your server language which submit button was pressed cause only one of them will be sent to the server.
如果有人在这里找到这篇文章是一个很好的解决方案，不需要 JS。使用两个具有不同名称属性的提交按钮检查您的服务器语言，哪个提交按钮被按下，因为只有其中一个将被发送到服务器。
<form method="post" action="ServerFileToExecute.php">
<input type="submit" name="save" value="Click here to save" />
<input type="submit" name="delete" value="Click here to delete" />
</form>
The server side could look something like this if you use php:
如果您使用 php，服务器端可能看起来像这样：
<?php
if(isset($_POST['save']))
echo "Stored!";
else if(isset($_POST['delete']))
echo "Deleted!";
else
echo "Action is missing!";
?>
回答by Nishi
HTML 4.x & HTML5 disallow nested forms, but HTML5 will allow a workaround with "form" attribute ("form owner").
HTML 4.x 和 HTML5 不允许嵌套表单，但 HTML5 将允许使用“表单”属性（“表单所有者”）的解决方法。
As for HTML 4.x you can:
对于 HTML 4.x，您可以：
- Use an extra form(s) with only hidden fields & JavaScript to set its input's and submit the form.
- Use CSS to line up several HTML form to look like a single entity - but I think that's too hard.
- 使用仅包含隐藏字段和 JavaScript 的额外表单来设置其输入并提交表单。
- 使用 CSS 将多个 HTML 表单排列成一个实体——但我认为这太难了。
回答by user64075
As others have said, it is not valid HTML.
正如其他人所说，它不是有效的 HTML。
It sounds like your are doing this to position the forms visually within each other. If that is the case, just do two separate forms and use CSS to position them.
听起来您这样做是为了在视觉上将表单相互定位。如果是这种情况，只需做两个单独的表单并使用 CSS 来定位它们。
回答by David Grant
No, the HTML specification states that no FORMelement should contain another FORMelement.
不，HTML 规范规定任何FORM元素都不应包含另一个FORM元素。
回答by Andreas Niedermair
rather use a custom javascript-method inside the action attribute of the form!
而是在表单的 action 属性中使用自定义 javascript 方法！
eg
例如
<html>
<head>
<script language="javascript" type="text/javascript">
var input1 = null;
var input2 = null;
function InitInputs() {
if (input1 == null) {
input1 = document.getElementById("input1");
}
if (input2 == null) {
input2 = document.getElementById("input2");
}
if (input1 == null) {
alert("input1 missing");
}
if (input2 == null) {
alert("input2 missing");
}
}
function myMethod1() {
InitInputs();
alert(input1.value + " " + input2.value);
}
function myMethod2() {
InitInputs();
alert(input1.value);
}
</script>
</head>
<body>
<form action="javascript:myMethod1();">
<input id="input1" type="text" />
<input id="input2" type="text" />
<input type="button" onclick="myMethod2()" value="myMethod2"/>
<input type="submit" value="myMethod1" />
</form>
</body>
</html>
回答by Christian Studer
You can answer your own question very easily by inputting the HTML code into the W3 Validator. (It features a text input field, you won't even have to put your code on a server...)
您可以通过将 HTML 代码输入W3 Validator 来非常轻松地回答您自己的问题。（它具有文本输入字段，您甚至不必将代码放在服务器上...）
(And no, it won't validate.)
（不，它不会验证。）
回答by Robin Manoli
A possibility is to have an iframe inside the outer form. The iframe contains the inner form. Make sure to use the <base target="_parent" />tag inside the head tag of the iframe to make the form behave as part of the main page.
一种可能性是在外部窗体中有一个 iframe。iframe 包含内部表单。确保使用<base target="_parent" />iframe 的 head 标签内的标签，使表单作为主页的一部分运行。
回答by Jonathas Hortense
No, it is not valid. But a "solution" can be creating a modal window outside of form "a" containing the form "b".
不，它无效。但是“解决方案”可以在包含表单“b”的表单“a”之外创建一个模态窗口。
<div id="myModalFormB" class="modal">
<form action="b">
<input.../>
<input.../>
<input.../>
<button type="submit">Save</button>
</form>
</div>
<form action="a">
<input.../>
<a href="#myModalFormB">Open modal b </a>
<input.../>
</form>
It can be easily done if you are using bootstrap or materialize css. I'm doing this to avoid using iframe.
如果您使用引导程序或实现 css，则可以轻松完成。我这样做是为了避免使用 iframe。
