具有以下内容的 HTML 是否有效：
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
因此，当您提交“b”时，您只能获得内部表单中的字段。当您提交“a”时，您将获得所有字段减去“b”中的字段。
如果不可能，针对这种情况有哪些解决方法？
A. 它不是有效的 HTML 或 XHTML
在官方 W3C XHTML 规范中，B 节“元素禁止”指出：
“表单不得包含其他表单元素。”
http://www.w3.org/TR/xhtml1/#prohibitions
对于旧的 HTML 3.2 规范， 有关 FORMS 元素的部分指出：
“每份表格必须包含在 表单元素。可以有几个 表格在一个文档中，但是 FORM 元素不能嵌套。"
B. 解决方法
有一些使用 JavaScript 的解决方法，无需嵌套表单标签。
“如何创建嵌套表单。”（尽管标题是不是嵌套表单标签，而是 JavaScript 解决方法）。
注意： 虽然可以通过脚本操作 DOM 来欺骗 W3C 验证器来传递页面，但它仍然不是合法的 HTML。使用此类方法的问题在于，现在无法保证代码在浏览器之间的行为。 （因为它不是标准的）
如果有人发现这篇文章是一个很好的解决方案，不需要 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>
如果您使用 php，服务器端可能看起来像这样：
<?php
if(isset($_POST['save']))
echo "Stored!";
else if(isset($_POST['delete']))
echo "Deleted!";
else
echo "Action is missing!";
?>
HTML 4.x 和 HTML5 不允许嵌套表单，但 HTML5 允许使用 “form”属性（“表单所有者”）解决方法。
对于 HTML 4.x，您可以：
正如其他人所说，它不是有效的 HTML。
听起来您这样做是为了在视觉上将表单相互定位。如果是这种情况，只需制作两个单独的表单并使用 CSS 来定位它们即可。
不可以，HTML 规范规定任何
FORMFORM一种可能性是在外部窗体内有一个 iframe。 iframe 包含内部表单。确保在 iframe 的 head 标签内使用
<base target="_parent" />而是在表单的 action 属性中使用自定义的 javascript 方法！
例如
<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>
您可以通过将 HTML 代码输入到 W3 Validator 来非常轻松地回答您自己的问题。 （它具有一个文本输入字段，您甚至不必将代码放在服务器上......）
（不，它不会验证。）
formaction<form action="a">
<input.../>
<!-- Form 2 inputs -->
<input.../>
<input.../>
<input.../>
<input type="submit" formaction="b">
</form>
<input.../>
不， 参见w3c
不，它无效。但是“解决方案”可以在表单“a”之外创建一个包含表单“b”的模式窗口。
<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>
如果您使用 bootstrap 或 Materialize css，这可以轻松完成。 我这样做是为了避免使用 iframe。
快速解决方案： 要获得对不同表单的不同验证并将其提交保留在单独的函数中，您可以这样做：
<form id="form1" onsubmit="alert('form1')"></form>
<form id="form2" onsubmit="alert('form2')"></form>
<div>
<input form="form1" required />
<input form="form1" required />
<div>
<input form="form2" required />
<input form="form2" required />
<button form="form2" type="submit">Send form2</button>
</div>
<input form="form1" required />
<button form="form1" type="submit">Send form1</button>
</div>
因为你允许
所有字段减去“b”内的字段。
当提交“a”时，以下内容将起作用，使用常规的网络表单，无需花哨的 JavaScript 技巧：
步骤 1. 将每个表单放在自己的网页上。
步骤 2. 在您希望此子表单出现的任意位置插入 iframe。
第3步.利润。
我尝试使用代码游乐场网站来展示演示，但其中许多网站禁止将其网站嵌入 iframe，即使在他们自己的域内也是如此。
您正在尝试实现 HTML 不支持的嵌套表单。
每个表单都必须包含在 FORM 元素内。可以有 单个文档中包含多个表单，但 FORM 元素不能 嵌套。
解决方法
您可以通过对 HTML 和 JavaScript 进行一些更改来实现此功能。 （不使用 html 表单）步骤
1.使用 div 标签创建两个表单，如下所示（不要使用 form 标签）
<div id="form_a">
<input.../>
<div id="form_b">
<input.../>
<input.../>
<button id="submit_b">Submit B</button>
</div>
<input.../>
<button id="submit_a">Submit A</button>
</div >
2。添加JQuery和Ajax提交各个表单数据
<script>
// Submit form A data
$('#submit_a').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_a input').not( "#form_b input" ).serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
// Submit form B data
$('#submit_b').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_b input').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
</script>