是否可以像这样嵌套html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
两种形式都适用吗?我的朋友有这个问题,subForm的一部分工作,而另一部分不工作。
是否可以像这样嵌套html表单
<form name="mainForm">
<form name="subForm">
</form>
</form>
两种形式都适用吗?我的朋友有这个问题,subForm的一部分工作,而另一部分不工作。
当前回答
可以实现与嵌套表单相同的结果,但不需要嵌套它们。
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中工作了。
https://caniuse.com/#feat=form-attribute https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
来自html规范:
该特性允许作者解决缺乏支持的问题 嵌套表单元素。
其他回答
总之,没有。一个页面中可以有多个表单,但它们不应该嵌套。
来自html5工作草案:
4.10.3 form元素 内容模型: 流内容,但没有表单元素后代。
你也可以在按钮标签内使用formaction=""。
<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>
这将作为一个单独的按钮嵌套在原始表单中。
即使您可以让它在一个浏览器中工作,也不能保证它在所有浏览器中都能正常工作。所以虽然你可能能让它在某些时候工作,但你肯定不能让它在所有时候都工作。
正如克雷格所说,不。
但是,关于你所说的原因:
使用1 <form>的输入和“Update”按钮,并在另一个<form>的“Submit Order”按钮中使用复制隐藏输入可能会更容易。
另一种解决这个问题的方法是,如果你使用一些服务器端脚本语言,允许你操纵发布的数据,就是这样声明你的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现在只有你的“主表单”数据,你的子表单数据存储在你可以随意操作的另一个变量中。
希望这能有所帮助!