你能嵌套html表单吗?

Posted

技术标签:

【中文标题】你能嵌套html表单吗?【英文标题】:Can you nest html forms? 【发布时间】:2010-09-27 15:13:39 【问题描述】:

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

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

这样两种形式都可以工作吗?我的朋友遇到了这个问题,subForm 的一部分有效,而另一部分无效。

【问题讨论】:

他正在设置一个购物车,其中更新数量位于跟踪总数的表单内。我个人不会那样做,但他在让它发挥作用时遇到了问题。 似乎他最好使用javascript将值从一种形式复制到另一种形式,而不是尝试嵌套它们。我不认为嵌套会起作用。 您甚至会遇到问题,使其在同一浏览器的不同版本中工作。所以避免使用它。 老问题,但要回答评论,可能需要嵌套表单以避免 JavaScript。我遇到这个是因为我想为子表单“重置”按钮嵌套表单,这不需要启用 JavaScript。 是的,我遇到了和你一样的问题。我使用 ajax 提交表单来解决这个问题。 【参考方案1】:

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

来自html5 working draft:

4.10.3 form 元素

内容模型:

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

【讨论】:

我同意这个答案,但要问另一个,为什么不呢?为什么 HTML 不允许嵌套表单?对我来说,这似乎是一个限制,没有它我们会更好。有许多使用嵌套表单更易于编程的示例(即使用上传照片表单和个人资料编辑表单)。 @Nilzor 他不是在问它是否不能完成,而是在问为什么不。我同意;嵌套表单实际上非常有用。因此,如果您有一个带有标签的单页应用程序,每个标签都是其自己的表单(因此您可以提交它以保存进度),并且它们都包装在一个表单中,您可以提交该表单以保存所有内容。对我来说很有意义。 我同意其他人的说法。这种限制似乎是武断和有害的。 所以我们需要带有嵌套表单的 HTML 5.1。 嵌套表单的问题在于 HTML 中的表单架构,该表单中的操作会导致提交事件。这个问题引起了关于需要提交什么的问题。一个表单中可能有多个字段,或者一个 div 中有多个表单,但在一个表单中包含表单实际上没有意义。如果内容结合在一起,那就是一种形式;如果内容是单独提交的,那真的是单独的表单,不需要外部表单。【参考方案2】:

HTML5 &lt;input&gt; form 属性可以作为解决方案。 来自http://www.w3schools.com/tags/att_input_form.asp:

    attribute 形式是 HTML5 中的新形式。 指定&lt;input&gt; 元素属于哪个&lt;form&gt; 元素。此属性的值必须是同一文档中 &lt;form&gt; 元素的 id 属性。

场景

input_Form1_n1 input_Form2_n1 input_Form1_n2 input_Form2_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" />

Here你会发现浏览器的兼容性。

【讨论】:

只是指出浏览器支持表:caniuse.com/#feat=form-attribute Resuming - 它适用于任何地方(Chrome、Firefox、Opera、Egde、Safari、android 浏览器...),除了 IE(包括现在最新的 v11 )。 @cliff-burton,这里有什么区别?我只能看到表单之外的输入。它仍然需要 JS 同时提交两个表单。不会吗? 呃,自从我上次使用这个已经很久了,但我认为提交表单不需要JS。如果 &lt;input type="submit" 链接到其指定 action&lt;form&gt;,则链接到同一 &lt;form&gt;&lt;input /&gt;(s) 将在该请求中使用【参考方案3】:

第二种形式将被忽略,例如 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;

【讨论】:

【参考方案4】:

可以获得与嵌套表单相同的结果,但无需嵌套。

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 不再是浏览器,而是一种兼容性工具,正如 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-attributehttps://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

来自 html 规范:

此功能允许作者解决缺乏支持的问题 嵌套表单元素。

【讨论】:

这里有什么区别?我只能看到表单之外的输入。它仍然需要 JS 同时提交两个表单。不会吗? @sdlins 不,我们的想法是将主组件和子组件设置为您希望它们看起来的样式,嵌套。实际的 2 个表单标签将不可见。每个提交按钮都会触发它各自的表单提交。不需要 javascript。 如果您只想触发一个其他表单,可以。但是当你需要触发“父母”时它会如何解决?表单 with 它的子表单,因为它是一个并且没有 js? @sdlins 这不是这个问题的意义所在。问题是关于 2 种不同的形式,但让它们嵌套。我想知道为什么你想要 2 个表单但仍然有 1 个提交功能?那你不能只有1个表格吗?你确实不得不求助于javascript来做一些奇怪的事情:P 是的,你是对的,这不是 OP 的问题。我会发布我自己的。谢谢!【参考方案5】:

普通的 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();

【讨论】:

【参考方案6】:

如果您使用的是 AngularJS,则 ng-app 中的任何 &lt;form&gt; 标签在运行时都会被设计为嵌套的 ngForm 指令替换。

在 Angular 中可以嵌套表单。这意味着当所有子表单都有效时,外部表单也有效。但是,浏览器不允许嵌套 &lt;form&gt; 元素,因此 Angular 提供了 ngForm 指令,其行为与 &lt;form&gt; 相同,但可以嵌套。这允许您拥有嵌套的表单,这在使用 ngRepeat 指令动态生成的表单中使用 Angular 验证指令时非常有用。 (source)

【讨论】:

这是我一直在寻找的答案 :) 是的,嵌套表单确实有意义,因为如果您有多个选项卡但您只想在一个选项卡上执行验证,那么您可以使用嵌套表单这样做。 webcomponents也一样吗?【参考方案7】:

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

希望这会有所帮助!

【讨论】:

【参考方案8】:

正如克雷格所说,不。

但是,关于您对为什么的评论:

将 1 &lt;form&gt; 与输入和“更新”按钮一起使用可能更容易,并在另一个 &lt;form&gt; 中使用“提交订单”按钮复制隐藏的输入。

【讨论】:

我的购物车页面是这样的,他只是采取了不同的方式,不想改变它。如果他的方法也那么有效,我也不肯定。【参考方案9】:

请注意,您不能嵌套 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 cmets 改为“此功能允许作者解决缺少对嵌套表单元素的支持的问题。”,但没有指出这是在哪里指定的,我认为他们假设我们应该假设它在html3 规范:)

【讨论】:

我不知道你为什么要发布一个已经回答了 3 年半的问题,但更多的问题是链接到 HTML3,这很长时间没有被推荐。 这是对基本问题的回答时间的参考,我认为这是建设性的。我还发现了“注意你不能嵌套 FORM 元素!”这句话很简单。在规范内要幽默。 这是一个问题,因为我必须插入一个作为表单的 API,并且因为 .net 应用程序(在所有内容周围都包含一个
标签)。你如何克服这个问题。
在 HTML5 规范 html.spec.whatwg.org/multipage/forms.html#the-form-element 中,关于表单元素:“内容模型:流式内容,但没有表单元素后代。”【参考方案10】:

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

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

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

【讨论】:

这并不能回答问题,但这只是帮助我解决了另一个问题,我因此放弃投票 忽略以上内容(5 分钟后不允许我编辑...嗯)。这里有巨大的帮助 - 完全映射到我今天早上试图做的事情。这就是为什么我们都喜欢 SO【参考方案11】:

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

【讨论】:

iframe 时间到了【参考方案12】:

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

在 Firefox、Chrome 上测试并运行

未在 I.E. 上测试

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

【讨论】:

当我在 chrome 上尝试这个时它输出这个
您是否尝试过使用提交按钮。这种方法我用过很多次,而且一直有效。 这违反了规范,使用它是在乞求未来的问题。 这似乎只在 mainForminnerHTML 是通过 JavaScript(即 ajax)设置时才有效。仅在 HTML 文件中使用此 sn-p 不会导致嵌套表单:空表单标记将终止外部表单标记,subForm 将紧随mainForm 之后(在 Chrome 86 和 Firefox 80 上测试)。奇怪的是,在设置innerHTML的时候,只去掉了第一个嵌套的表单,其余的保持嵌套。 更新,如果有另一个元素,你不需要ajax,比如外部和内部形式之间的div。很奇怪。【参考方案13】:

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

【讨论】:

【参考方案14】:

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

使用场景:允许一次更改 N 个项目的超形式。它的底部有一个“全部提交”按钮。每个项目都希望有自己的嵌套表单,并带有“提交项目#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>

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

【讨论】:

【参考方案15】:

关于嵌套表单:我花了 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 &lt;i&gt;outside&lt;/i&gt; 的 ajaxContainer 时,我又恢复了业务。它回答了为什么人们可以嵌套表格的问题。我的意思是,真的,如果不定义要使用哪种形式,ID 是什么?必须有一个更好、更巧妙的解决方法。

【讨论】:

【参考方案16】:

虽然这个问题已经很老了,但我同意@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 小提琴链接

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

【讨论】:

【参考方案17】:

不,您不能有嵌套表单。相反,您可以打开一个包含表单的 Modal 并执行 Ajax 表单提交。

【讨论】:

【参考方案18】:

真的不可能... 我无法嵌套表单标签... 但是我使用了这段代码:

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

【讨论】:

【参考方案19】:

今天我也遇到了同样的问题,解决了我添加了用户控件和 在这个控件上我使用这个代码

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

我相信这会有所帮助。

【讨论】:

【参考方案20】:

在我知道我不应该这样做之前,我已经嵌套了表单,以便拥有多个提交按钮。就这样跑了 18 个月,有数千笔注册交易,没有人打电话告诉我们任何困难。

嵌套表单给了我一个 ID 来解析以采取正确的操作。直到我尝试将一个字段附加到其中一个按钮并 Validate 抱怨才中断。解开它并没有什么大不了的——我在外部表单上使用了一个明确的字符串化,所以提交和表单不匹配并不重要。是的,是的,应该将按钮从提交变为点击。

重点是在某些情况下它并未完全损坏。但“未完全打破”的标准可能太低了:-)

【讨论】:

【参考方案21】:

[见下面code..代码格式]2simple技巧 只是不要在另一个表单标签中使用其他,请使用相同的元素而不使用表单标签。

见下面的例子 "" 不使用其他形式 // 只需调用其中的 enter image description here 元素""

【讨论】:

正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于你能嵌套html表单吗?的主要内容,如果未能解决你的问题,请参考以下文章

html语言中表格标记能嵌套吗?

你能在 Symfony 表单中创建类似“预标签”的东西吗?

iview 自定义验证表单多层嵌套如何实现

html中的表单中怎么嵌套表格

如何让一个html表单启动一个函数

selenium——表单嵌套