以下是有效的html:
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
当你提交b时，你只能得到内部表单中的字段。当你提交“a”时，你会得到所有字段减去“b”内的字段。
如果不可能，对于这种情况有什么可行的变通办法?
而是在表单的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>
通过将HTML代码输入W3 Validator，您可以非常容易地回答自己的问题。(它有一个文本输入域，你甚至不需要把你的代码放在服务器上…)
(不，它不会生效。)
答:它不是有效的HTML或XHTML
在官方W3C XHTML规范的B节中。“元素禁令”规定:
"表单不能包含其他表单元素。"
http://www.w3.org/TR/xhtml1/#prohibitions
对于旧的HTML 3.2规范， 关于FORMS元素的部分声明:
"每一份表格都必须用 表单元素。可以有几个 表单放在单个文档中，但是 FORM元素不能嵌套。
B.解决方案
有一些使用JavaScript而不需要嵌套表单标记的变通方法。
“如何创建嵌套表单。”(尽管title不是嵌套的表单标签，而是JavaScript的解决方案)。
这是StackOverflow问题的答案
注意:尽管可以通过脚本操纵DOM来欺骗W3C验证器来传递页面，但它仍然不是合法的HTML。使用这种方法的问题是，现在无法保证跨浏览器的代码行为。(因为不是标准)
HTML 4。x & HTML5不允许嵌套表单，但HTML5允许使用“form”属性(“form owner”)。
至于HTML 4。X你可以:
使用一个只有隐藏字段和JavaScript的额外表单来设置其输入并提交表单。 使用CSS来排列几个HTML表单，使其看起来像一个单一的实体-但这可能很复杂。
一种可能是在外部形式中有一个iframe。iframe包含内部表单。确保在iframe的head标记中使用<base target="_parent" />标记，使表单表现为主页的一部分。
如果有人发现这篇文章是一个不需要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!";
?>
不，这是无效的。但是一个“解决方案”可以是在窗体“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。
嵌套表单标签的非javascript解决方案:
因为你考虑到了
所有字段减去“b”以内的字段。
当提交"a"时，以下将工作，使用常规的web表单而没有花哨的JavaScript技巧:
步骤1。把每个表单放在自己的网页上。
步骤2。在您希望此子表单出现的任何位置插入iframe。
步骤3。利润。
我尝试使用一个代码游乐场网站来展示演示，但许多网站禁止在iframe中嵌入网站，即使是在他们自己的域内。
作为解决方案，你可以在提交按钮上使用formaction属性。输入时用不同的名字。
<form action="a">
<input.../>
<!-- Form 2 inputs -->
<input.../>
<input.../>
<input.../>
<input type="submit" formaction="b">
</form>
<input.../>
您正在尝试实现HTML中不支持的嵌套表单。
每个表单都必须包含在form元素中。有可能 在一个文档中包含多个表单，但是FORM元素不能 嵌套。
解决方案
您可以通过对HTML和JavaScript进行一些更改来实现此功能。(不使用HTML表单)
步骤 1. 用div标签创建两个表单，如下所示(不使用表单标签)
<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>
快速的解决方案: 要获得不同表单的不同验证，并将它们的提交保存在独立的函数中，您可以这样做:
<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>
