你能嵌套html表单吗？
是否可以嵌套这样的html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
这样两种形式都有效吗？我的朋友对此有疑问，subForm 的一部分有效，而另一部分无效。
一句话，没有。一个页面中可以有多个表单，但它们不应嵌套。
4.10.3 表单元素内容模型：流式内容，但没有表单元素后代。
HTML5 <input> form 属性可以作为解决方案。
来自 http://www.w3schools.com/tags/att_input_form.asp：
form 属性是 HTML5 中的新属性。指定 元素属于哪个
第二种形式将被忽略，例如，参见 WebKit 中的 snippet：
bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
// Only create a new form if we're not already inside one.
// This is consistent with other browsers' behavior.
if (!m_currentFormElement) {
m_currentFormElement = new HTMLFormElement(formTag, m_document);
result = m_currentFormElement;
pCloserCreateErrorCheck(t, result);
}
return false;
}
可以实现与嵌套表单相同的结果，但无需嵌套它们。
HTML5 引入了 form 属性。您可以将表单属性添加到表单外部的表单控件，以将它们链接到特定的表单元素（通过 id）。
https://www.impressivewebs.com/html5-form-attribute/
这样你就可以像这样构造你的html：
<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form" action="/sub-action" method="post"></form>
<div class="main-component">
<input type="text" name="main-property1" form="main-form" />
<input type="text" name="main-property2" form="main-form" />
<div class="sub-component">
<input type="text" name="sub-property1" form="sub-form" />
<input type="text" name="sub-property2" form="sub-form" />
<input type="submit" name="sub-save" value="Save" form="sub-form" />
</div>
<input type="submit" name="main-save" value="Save" form="main-form" />
</div>
所有现代浏览器都支持 form 属性。虽然 IE 不支持这一点，但 IE 不再是浏览器，而是一种兼容性工具，正如 Microsoft 本身所证实的那样：https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/。现在是我们停止关心在 IE 中运行的时候了。
https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
从 html 规范：
此功能允许作者解决对嵌套表单元素缺乏支持的问题。
纯 html 不能让你这样做。但是使用 javascript 你可以做到这一点。如果您使用的是 javascript/jquery，则可以使用类对表单元素进行分类，然后使用 serialize() 仅序列化您要提交的项目子集的那些表单元素。
<form id="formid">
<input type="text" class="class1" />
<input type="text" class="class2">
</form>
然后在你的javascript中你可以这样做来序列化class1元素
$(".class1").serialize();
对于 class2 你可以做
$(".class2").serialize();
对于整个表格
$("#formid").serialize();
或者干脆
$("#formid").submit();
如果您使用的是 AngularJS，则 ng-app 中的任何 <form> 标记都会在运行时替换为设计为嵌套的 ngForm 指令。
在 Angular 表单中可以嵌套。这意味着当所有子表单都有效时，外部表单也有效。但是，浏览器不允许嵌套
解决此问题的另一种方法是，如果您使用一些允许您操作发布的数据的服务器端脚本语言，请像这样声明您的 html 表单：
<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>
如果你打印发布的数据（我将在这里使用 PHP），你会得到一个这样的数组：
//print_r($_POST) will output :
array(
'a_name' => 'a_name_value',
'a_second_name' => 'a_second_name_value',
'subform' => array(
'another_name' => 'a_name_value',
'another_second_name' => 'another_second_name_value',
),
);
然后你可以做类似的事情：
$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);
您的 $_POST 现在只有您的“主表单”数据，而您的子表单数据存储在另一个您可以随意操作的变量中。
希望这可以帮助！
正如克雷格所说，不。
但是，关于您对原因的评论：
将 1 <form> 与输入和“更新”按钮一起使用可能更容易，并在另一个 <form> 中将复制隐藏的输入与“提交订单”按钮一起使用。
请注意，您不允许嵌套 FORM 元素！
http://www.w3.org/MarkUp/html3/forms.html
https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9（html4 规范指出嵌套表单从 3.2 到 4 没有变化）
https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12（html4 规范指出嵌套表单从 4.0 到 4.1 没有变化）
https://www.w3.org/TR/html5-diff/（html5 规范指出嵌套表单从 4 到 5 没有变化）
https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms 对“此功能允许作者解决缺乏对嵌套表单元素的支持的问题”的评论，但没有指出这是在哪里指定的，我认为他们假设我们应该假设它是在 html3 规范中指定的： )
您还可以在按钮标签内使用 formaction=""。
<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>
这将作为单独的按钮嵌套在原始表单中。
一个简单的解决方法是使用 iframe 来保存“嵌套”表单。从视觉上看，表单是嵌套的，但在代码方面，它完全位于一个单独的 html 文件中。
即使您可以让它在一个浏览器中工作，也不能保证它在所有浏览器中都能正常工作。因此，虽然您可能可以让它在某些时候工作，但您肯定无法让它一直工作。
虽然我没有提供嵌套表单的解决方案（它不能可靠地工作），但我确实提供了一个适合我的解决方法：
使用场景：允许一次更改 N 个项目的超形式。它的底部有一个“全部提交”按钮。每个项目都希望有自己的带有“提交项目#N”按钮的嵌套表单。但是不能...
在这种情况下，实际上可以使用单个表单，然后将按钮的名称设置为 submit_1..submit_N 和 submitAll 并在服务器端处理它，只查看以 _1 结尾的参数如果按钮的名称是 submit_1。
<form>
<div id="item1">
<input type="text" name="foo_1" value="23">
<input type="submit" name="submit_1" value="Submit Item #1">
</div>
<div id="item2">
<input type="text" name="foo_2" value="33">
<input type="submit" name="submit_2" value="Submit Item #2">
</div>
<input type="submit" name="submitAll" value="Submit All Items">
</form>
好吧，这算不上什么发明，但它确实有效。
在嵌套表单之前使用空表单标签
在 Firefox、Chrome 上测试和工作
未在 IE 上测试
<form name="mainForm" action="mainAction">
<form></form>
<form name="subForm" action="subAction">
</form>
</form>
@adusza 编辑：正如评论者指出的那样，上面的代码不会导致嵌套表单。但是，如果您添加如下所示的 div 元素，您将在 mainForm 中包含 subForm，并且第一个空白表单将被删除。
<form name="mainForm" action="mainAction">
<div>
<form></form>
<form name="subForm" action="subAction">
</form>
</div>
</form>
mainForm 的 innerHTML 时才有效。仅在 HTML 文件中包含此代码段不会导致嵌套表单：空表单标记将终止外部表单标记，而 subForm 将在 mainForm 之后（在 Chrome 86 和 Firefox 80 上测试）。奇怪的是，当设置 innerHTML 时，只有第一个嵌套形式被删除，其余的保持嵌套。
尽管这个问题已经很老了，而且我同意@everyone 的观点，即 HTML 中不允许嵌套表单
但这一切都可能希望看到
你可以在哪里破解（我称它为破解，因为我确定这不是合法的）html 以允许浏览器具有嵌套表单
<form id="form_one" action="http://apple.com">
<div>
<div>
<form id="form_two" action="/">
<!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
</form>
</div>
<br/>
<div>
<form id="form_three" action="http://www.linuxtopia.org/">
<input type='submit' value='LINUX TOPIA'/>
</form>
</div>
<br/>
<div>
<form id="form_four" action="http://bing.com">
<input type='submit' value='BING'/>
</form>
</div>
<br/>
<input type='submit' value='Apple'/>
</div>
</form>
JS 小提琴链接
关于嵌套表单：我花了 10 年的时间尝试调试一个 ajax 脚本。
抱歉，我之前的答案/示例没有考虑到 html 标记。
<form id='form_1' et al>
<input stuff>
<submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)'>
<td id='ajaxContainer'></td>
</form>
form_2 不断失败，说无效的 form_2。
当我移动生成 form_1 的 form_2 <i>outside</i> 的 ajaxContainer 时，我又重新开始工作了。它回答了为什么人们可以嵌套表格的问题。我的意思是，真的，如果不定义要使用哪种形式，ID 是什么？必须有一个更好、更巧妙的解决方法。
不，您不能有嵌套表单。相反，您可以打开一个包含表单的 Modal 并执行 Ajax 表单提交。
真的不可能......我无法嵌套表单标签......但是我使用了这段代码：
<form>
OTHER FORM STUFF
<div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
THIS FORM STUFF
</div>
</form>
用 {% csrf_token %} 和东西
并应用了一些 JS
var url = $(form_id).attr("data-url");
$.ajax({
url: url,
"type": "POST",
"data": {
'csrfmiddlewaretoken': '{{ csrf_token }}',
'custom-param-attachment': 'value'
},
success: function (e, data) {
if (e.is_valid) {
DO STUFF
}
}
});
今天，我也陷入了同样的问题，并解决了我添加了用户控件并在此控件上使用此代码的问题
<div class="divformTagEx">
</div>
<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>
并在页面的 PreRenderComplete 事件上调用此方法
private void InitializeJavaScript()
{
var script = new StringBuilder();
script.Append("$(document).ready(function () {");
script.Append("$('.divformTagEx').append( ");
script.Append(litFormTag.Text);
script.Append(" )");
script.Append(" });");
ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
}
我相信这会有所帮助。
在我知道我不应该这样做之前，我已经嵌套了表单，以便拥有多个提交按钮。就这样跑了 18 个月，成千上万的注册交易，没有人打电话给我们任何困难。
嵌套表单给了我一个 ID 来解析以采取正确的行动。直到我尝试将一个字段附加到其中一个按钮并 Validate 抱怨才中断。解开它并不是什么大问题——我在外部表单上使用了一个明确的字符串化，所以提交和表单不匹配并不重要。是的，是的，应该将按钮从提交变为点击。
关键是在某些情况下它没有完全损坏。但是“不完全破坏”可能是一个太低的标准，无法拍摄:-)
[参见下面的code..代码格式]2简单的技巧就是不要在另一个表单标签中使用其他 ，请使用相同的元素而不使用表单标签。
请参见下面的示例“”不要使用其他形式//只需在其中回忆输入图像描述here元素“”
