是否可以嵌套像这样的html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
这两种形式都有效吗?我的朋友有这个问题,subForm
工作的一部分,而它的另一部分没有。
一个简单的解决方法是使用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>
好吧,所以没有太多的发明,但它完成了这项工作。
您还可以在按钮标记内使用formaction =“”。
<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>
这将作为单独的按钮嵌套在原始形式中。
关于嵌套表单:我花了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经常失败说无效的形式_2。
当我移动生成form_1的form_2 <i>outside</i>
的ajaxContainer时,我又回来了。它回答了为什么人们可以嵌套表格的问题。我的意思是,真的,如果不定义使用哪种形式,ID是什么?必须有一个更好,更光滑的工作。
在嵌套表单之前使用空表单标记
经过测试和使用Firefox,Chrome
没有在I.E.上测试过
<form name="mainForm" action="mainAction">
<form></form>
<form name="subForm" action="subAction">
</form>
</form>
虽然问题很老,但我同意@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 FIDDLE LINK
真的不可能......我无法嵌套表格标签......但是我使用了这段代码:
<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);
}
我相信这会有所帮助。
第二种形式将被忽略,例如,请参阅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;
}
在我知道我不应该这样做之前,我有嵌套表单,目的是有多个提交按钮。跑了18个月,成千上万的注册交易,没有人打电话给我们任何困难。
嵌套表单为我提供了一个ID来解析正确的操作。没有打破'直到我试图将一个字段附加到其中一个按钮并且Validate抱怨。解开它并不是什么大问题 - 我在外部表单上使用了明确的字符串化,因此提交和表单不匹配无关紧要。是的,是的,应该把按钮从提交到onclick。
关键是有些情况并没有完全打破。但“并非完全破碎”的标准可能太低了以下:-)
不,你不能有一个嵌套的表格。相反,您可以打开包含表单的Modal并执行Ajax表单提交。
我遇到了类似的问题,我知道这不是问题的答案,但对于遇到这类问题的人来说,这可能会有所帮助:
如果需要将两个或多个形式的元素放在给定的序列中,HTML5 <input> form
属性可以是解决方案。
来自http://www.w3schools.com/tags/att_input_form.asp:
- 表单属性是HTML5中的新增功能。
- 指定
<form>
元素属于哪个<input>
元素。此属性的值必须是同一文档中<form>
元素的id属性。
场景:
执行:
<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" />
Here你会发现浏览器的兼容性。
普通的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,你的<form>
中的任何ng-app
标签都会在运行时被替换为设计为嵌套的ngForm
指令。
在Angular形式中可以嵌套。这意味着当所有子表单都有效时,外部表单也是有效的。但是,浏览器不允许嵌套
<form>
元素,因此Angular提供了ngForm
指令,其行为与<form>
相同但可以嵌套。这允许您使用嵌套表单,这在使用ngRepeat
指令动态生成的表单中使用Angular验证指令时非常有用。 (source)
正如克雷格所说,没有。
但是,关于你对以下原因的评论:
使用输入和“更新”按钮可能更容易使用1 <form>
,并使用另一个<form>
中的“提交订单”按钮复制隐藏输入。
解决此问题的另一种方法是,如果您使用一些允许您操作发布数据的服务器端脚本语言,则声明您的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现在只有你的“主表单”数据,你的子表单数据存储在你可以随意操作的另一个变量中。
希望这可以帮助!
请注意,您不能嵌套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规范中指定的:)
在2019年,我想对这个问题给出一个更新的答案。可以获得与嵌套表单相同的结果,但不嵌套它们。 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>
所有现代浏览器都支持表单属性。虽然IE不支持这一点,但IE不再是浏览器,而是一种兼容性工具,正如微软本身所证实的那样: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规范:
此功能允许作者解决对嵌套表单元素缺乏支持的问题。