你能嵌套html表单吗？

Posted 2023-02-21

技术标签:

【中文标题】你能嵌套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 <input> form 属性可以作为解决方案。来自http://www.w3schools.com/tags/att_input_form.asp：

attribute 形式是 HTML5 中的新形式。指定<input> 元素属于哪个<form> 元素。此属性的值必须是同一文档中 <form> 元素的 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。如果 <input type="submit" 链接到其指定 action 的 <form>，则链接到同一 <form> 的 <input />(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 中的任何 <form> 标签在运行时都会被设计为嵌套的 ngForm 指令替换。

在 Angular 中可以嵌套表单。这意味着当所有子表单都有效时，外部表单也有效。但是，浏览器不允许嵌套 <form> 元素，因此 Angular 提供了 ngForm 指令，其行为与 <form> 相同，但可以嵌套。这允许您拥有嵌套的表单，这在使用 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 <form> 与输入和“更新”按钮一起使用可能更容易，并在另一个 <form> 中使用“提交订单”按钮复制隐藏的输入。

【讨论】：

我的购物车页面是这样的，他只是采取了不同的方式，不想改变它。如果他的方法也那么有效，我也不肯定。【参考方案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 上尝试这个时它输出这个您是否尝试过使用提交按钮。这种方法我用过很多次，而且一直有效。这违反了规范，使用它是在乞求未来的问题。这似乎只在 mainForm 的 innerHTML 是通过 JavaScript（即 ajax）设置时才有效。仅在 HTML 文件中使用此 sn-p 不会导致嵌套表单：空表单标记将终止外部表单标记，subForm 将紧随mainForm 之后（在 Chrome 86 和 Firefox 80 上测试）。奇怪的是，在设置innerHTML的时候，只去掉了第一个嵌套的表单，其余的保持嵌套。更新，如果有另一个元素，你不需要ajax，比如外部和内部形式之间的div。很奇怪。【参考方案13】：

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

【讨论】：

【参考方案14】：

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

使用场景：允许一次更改 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>

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

【讨论】：

【参考方案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 <i>outside</i> 的 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。