你能嵌套html表单吗?

oyxsuwqo  于 2021-09-13  发布在  Java
关注(0)|答案(20)|浏览(586)

可以这样嵌套html表单吗

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

这两种形式都有效吗?我的朋友在这方面有问题,这是问题的一部分 subForm 有效,但另一部分无效。

dnph8jn4

dnph8jn41#

总之,不可以。一个页面中可以有多个表单,但它们不应该嵌套。
从html5工作草案中:
4.10.3 form 要素
内容模型:
流动内容,但不包含表单元素子体。

ql3eal8s

ql3eal8s2#

我遇到了一个类似的问题,我知道这不是问题的答案,但它可以帮助有这种问题的人:
如果需要将两种或两种以上形式的元素放在一个给定的序列中,html5 <input> form 属性可以是解决方案。
从…起http://www.w3schools.com/tags/att_input_form.asp:
表单属性在html5中是新的。
指定哪个 <form> 元素an <input> 元素属于。此属性的值必须是 <form> 元素在同一文档中。
脚本:
输入表格1\u n1
输入表格2\u n1
输入表格1\u n2
输入表格2\u n2
实施:

<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" />

在这里您可以找到浏览器的兼容性。

ogq8wdun

ogq8wdun3#

第二个表单将被忽略,请参见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;
}
8wtpewkr

8wtpewkr4#

可以实现与嵌套表单相同的结果,但不嵌套它们。
html5引入了表单属性。可以将表单属性添加到表单外部的表单控件,以将它们链接到特定的表单元素(按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-属性
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae表格
从html规范:
此功能允许作者解决嵌套表单元素缺乏支持的问题。

xwmevbvl

xwmevbvl5#

普通html不允许您这样做。但是使用javascript您可以做到这一点。如果您使用的是javascript/jquery,则可以使用类对表单元素进行分类,然后使用serialize()仅序列化要提交的项目子集的表单元素。

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

然后在javascript中,您可以这样做来序列化class1元素

$(".class1").serialize();

对于2班,你可以这样做

$(".class2").serialize();

整个表格

$("#formid").serialize();

或者干脆

$("#formid").submit();
smdnsysy

smdnsysy6#

如果您使用angularjs,任何 <form> 标签在你的 ng-app 在运行时替换为 ngForm 设计为嵌套的指令。
在有Angular 的形状中可以嵌套。这意味着当所有子窗体都有效时,外部窗体也有效。但是,浏览器不允许嵌套 <form> 元素,因此Angular 提供了 ngForm 行为与相同的指令 <form> 但是可以嵌套。这允许您拥有嵌套的表单,这在使用动态生成的表单中使用Angular 验证指令时非常有用 ngRepeat 指令((来源)

iecba09b

iecba09b7#

正如克雷格所说,没有。
但是,关于您对原因的评论:
使用1可能更容易 <form> 使用输入和“更新”按钮,并在另一个窗口中使用“提交订单”按钮复制隐藏输入 <form> .

w8ntj3qf

w8ntj3qf8#

另一种解决此问题的方法是,如果您使用的是允许您操作发布数据的服务器端脚本语言,则如下所示声明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']);

您的$\u帖子现在只有“主窗体”数据,而子窗体数据存储在另一个变量中,您可以随意操作。
希望这有帮助!

vwkv1x7d

vwkv1x7d9#

注意:不允许嵌套表单元素!
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-控件和表单注解中的“此功能允许作者解决嵌套表单元素缺乏支持的问题”。但没有引用指定的位置,我认为他们假设我们应该假设它在html3规范中指定:)

nnt7mjpx

nnt7mjpx10#

您也可以在按钮标签内使用formaction=“”。

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

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

5kgi1eie

5kgi1eie11#

一个简单的解决方法是使用iframe保存“嵌套”表单。从视觉上看,表单是嵌套的,但在代码端,它完全位于一个单独的html文件中。

dsf9zpds

dsf9zpds12#

在嵌套表单之前使用空表单标记
在firefox和chrome上测试和工作
没有测试,即。

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

@adusza编辑:正如评论员指出的,上面的代码不会产生嵌套形式。但是,如果像下面这样添加div元素,mainform中会有子表单,第一个空白表单将被删除。

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

sqxo8psd13#

即使你能让它在一个浏览器中工作,也不能保证它在所有浏览器中都能工作。所以,虽然你可以让它在某些时候发挥作用,但你肯定不能让它一直发挥作用。

gojuced7

gojuced714#

虽然我没有为嵌套表单提供解决方案(它不能可靠地工作),但我提供了一个适合我的解决方案:
使用场景:允许一次更改n个项目的超级表单。它在底部有一个“全部提交”按钮。每个项目都希望有自己的嵌套表单,并带有“SubmitItem#n”按钮。但是不能。。。
在这种情况下,实际上可以使用单个表单,然后使用按钮的名称 submit_1 .. submit_NsubmitAll 只需查看以 _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>

好吧,这算不上什么发明,但它确实起到了作用。

pcrecxhr

pcrecxhr15#

关于嵌套表单:有一天下午,我花了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>

表单2不断失败,表示表单2无效。
当我移动生成表单2的ajaxcontainer时 <i>outside</i> 在1年级的时候,我又开始做生意了。它回答了为什么人们会嵌套表单的问题。我的意思是,真的,如果不定义要使用的表单,id是什么?一定有更好、更圆滑的工作。

相关问题