你能嵌套html表单吗?

是否可以像这样嵌套html表单

<form name="mainForm">
<form name="subForm">
</form>
</form>

两种形式都适用吗?我的朋友对此有问题，subForm的一部分工作，而另一部分则不行。

318740 次浏览
小开
最佳答案

总之，没有。一个页面中可以有多个表单，但它们不应该嵌套。

Html5工作草案:

4.10.3 form元素

内容模型:

流内容，但没有表单元素后代。

小开

正如克雷格所说，不。

但是，关于你对为什么的评论:

它可能更容易使用1 <form>与输入和“更新”按钮，并使用复制隐藏输入与“提交订单”按钮在另一个<form>。

小开

即使您可以让它在一个浏览器中工作，也不能保证它在所有浏览器中都能正常工作。因此，虽然您可能能够让它在一些的时候工作，但您肯定不能让它在所有的时候工作。

小开

第二个表单将被忽略，例如WebKit中的片段:

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;
}
小开

注意，不允许嵌套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规范中指定的:)

小开

关于嵌套表单:我花了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是什么?肯定有更好、更圆滑的办法。

小开

普通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();
小开
一个简单的解决方法是使用iframe来保存“嵌套”表单。 从视觉上看，表单是嵌套的，但在代码方面，它完全在一个单独的html文件中
小开
今天，我也陷入了同样的问题，解决这个问题，我已经添加了一个用户控件和 在这个控件上，我使用这个代码

<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);
}

我相信这会有帮助。

小开

另一种解决这个问题的方法是，如果你使用一些服务器端脚本语言，允许你操纵发布的数据，就是这样声明你的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现在只有你的“主表单”数据，你的子表单数据存储在你可以随意操作的另一个变量中。

希望这能有所帮助!

小开

虽然这个问题已经很老了，而且我同意@everyone的观点，HTML中不允许嵌套表单

但这个东西大家可能都想看看

在那里你可以hack(我称之为黑客，因为我确定这不是合法的)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小提琴link

http://jsfiddle.net/nzkEw/10/

小开

如果你使用的是AngularJS， ng-app中的任何<form>标签都会在运行时被ngForm指令所取代，而这些指令被设计成嵌套的。

在Angular中表单是可以嵌套的。这意味着当所有子表单都有效时，外部表单也是有效的。然而，浏览器不允许嵌套<form>元素，所以Angular提供了ngForm指令，它的行为与<form>相同，但可以嵌套。这允许你拥有嵌套表单，当你在使用ngRepeat指令动态生成的表单中使用Angular验证指令时，这是非常有用的。(# EYZ4)

小开
HTML5 <input> form属性可以是解决方案。

从# EYZ0: < / p >
  1. 属性表单是HTML5中的新表单。
  2. 指定<input>元素属于哪个<form>元素。该属性的值必须是同一文档中<form>元素的id属性。

# EYZ0:

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_Form2_n2

# EYZ0:

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>


<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />


<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

在这里你会发现浏览器的兼容性。

小开

在嵌套表单之前使用空表单标签

在Firefox, Chrome上测试和工作

未测试I.E.

<form name="mainForm" action="mainAction">
<form></form>
<form name="subForm"  action="subAction">
</form>
</form>

EDIT by @adusza:正如评论者指出的那样，上面的代码不会产生嵌套表单。然而，如果你像下面这样添加div元素，你将在mainForm中有subForm，并且第一个空白表单将被删除。

<form name="mainForm" action="mainAction">
<div>
<form></form>
<form name="subForm"  action="subAction">
</form>
</div>
</form>
小开

虽然我没有给出嵌套表单的解决方案(它不可靠地工作)，但我确实提出了一个适合我的解决方案:

使用场景:允许一次更改N个项的超表单。它底部有一个“提交全部”按钮。每个项目都有自己的嵌套表单，带有“提交项目# N”按钮。但是不能…

在这种情况下，实际上可以使用单个表单，然后将按钮的名称设置为submit_1..submit_N和submitAll并在服务器端处理它，如果按钮的名称是submit_1，只查看以_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>

好吧，这算不上什么发明，但确实管用。

小开

你也可以在按钮标签内使用formaction=""。

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

这将作为一个单独的按钮嵌套在原始表单中。

小开

在我知道我不应该这样做之前，我已经为拥有多个提交按钮而嵌套了表单。这样运行了18个月，数千个注册交易，没有人打电话给我们任何困难。

嵌套表单为我提供了一个ID来解析要采取的正确操作。直到我试图将一个字段附加到其中一个按钮和验证抱怨，才打破。不是一个大问题来解决它-我使用了一个显式的stringify在外部的形式，所以它没有关系提交和形式不匹配。是的，是的，应该把按钮从submit变成onclick。

关键是在某些情况下，它并没有完全被破坏。但“没有完全崩溃”可能是一个太低的标准:-)

小开

不，你不能有嵌套的表单。相反，您可以打开一个包含表单的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
}
}
});
小开

这是可能的来实现与嵌套表单相同的结果，但是没有嵌套它们。

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已经不再是浏览器，而是一个兼容工具，正如微软自己所证实的:https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/。是时候停止关心如何在IE中工作了。

< p > # EYZ0
# EYZ0 < / p >

来自html规范:

这个特性允许作者绕过缺乏支持的问题 嵌套的表单元素
小开

[参见下面的代码. .代码格式]# eyz1简单的技巧 不要简单地在另一个表单标签内使用其他，请使用相同的元素而不使用表单标签

参见下面的例子 ““不要使用其他形式//只要回忆一下此处输入图像描述元素中的“;"


提交答案