小开

不，HTML规范规定任何FORM元素都不应该包含另一个FORM元素。

小开

没有, 看到w3c

小开

而是在表单的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验证器，您可以很容易地回答自己的问题。(它有一个文本输入域，你甚至不需要把你的代码放在服务器上…)

(不，它不会生效。)

小开

最佳答案

答:它不是有效的HTML或XHTML

在官方的W3C XHTML规范中，b节“元素禁忌”指出:

“表单不能包含其他表单元素”。

http://www.w3.org/TR/xhtml1/#prohibitions

对于老HTML 3.2规范， FORMS元素的部分声明:

"每个表格必须包含在一个表单元素。可以有几个表单放在单个文档中，但是
. FORM元素不能嵌套

b . 的解决方案

有一些使用JavaScript而不需要嵌套表单标记的变通方法。

如何创建嵌套表单(尽管标题这是不嵌套的表单标签，但JavaScript的工作)。

回答这个StackOverflow问题 .

注意: 尽管可以通过脚本操纵DOM来欺骗W3C验证器来传递页面，但它仍然不是合法的HTML。使用这种方法的问题是，现在无法保证跨浏览器的代码行为。(因为不是标准)

小开

正如其他人所说，它不是有效的HTML。

听起来你这样做是为了在视觉上定位彼此之间的形式。如果是这种情况，只需做两个单独的表单，并使用CSS来定位它们。

小开

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!";
?>

小开

如果你需要你的表单向1:M关系数据库提交/提交数据，我建议在表a上创建一个“插入后”DB触发器，它将为表B插入必要的数据。

小开

不，这是无效的。但是一个“解决方案”可以是在窗体“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>

它是有效的有一个html表单在另一个html表单?

嵌套表单标签的非javascript解决方案: