html - 你能嵌套html表单吗？

Question

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

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

这样两种形式都有效吗？我的朋友对此有问题，部分subForm作品，而另一部分则没有。

score 511 · Accepted Answer

一句话，没有。一个页面中可以有多个表单，但它们不应嵌套。

来自html5 工作草案：

4.10.3form元素

内容模型：

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

score 152 · Accepted Answer

HTML5 <input> form属性可以是解决方案。

来自http://www.w3schools.com/tags/att_input_form.asp：

form属性是 HTML5 中的新属性。

指定元素属于哪个<form>元素。<input>此属性的值必须是<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" />

在这里你会发现浏览器的兼容性。

score 92 · Accepted Answer

第二种形式将被忽略，请参见 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;
}

score 75 · Accepted Answer

可以实现与嵌套表单相同的结果，但无需嵌套它们。

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

从 html 规范：

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

score 44 · Accepted Answer

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

score 32 · Accepted Answer

如果您使用的是 AngularJS，则<form>您内部的任何标签都会ng-app在运行时ngForm被设计为嵌套的指令替换。

在 Angular 表单中可以嵌套。这意味着当所有子表单都有效时，外部表单也有效。但是，浏览器不允许嵌套<form>元素，因此 Angular 提供了ngForm与行为相同<form>但可以嵌套的指令。这允许您拥有嵌套的表单，这在使用 Angular 验证指令动态生成的表单中非常有用ngRepeat。（来源）

score 13 · Accepted Answer

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

希望这可以帮助！

score 12 · Accepted Answer

正如克雷格所说，不。

但是，关于您对原因的评论：

将 1 与输入和“更新”按钮一起使用可能更容易<form>，并在另一个中使用复制隐藏输入与“提交订单”按钮<form>。

score 9 · Accepted Answer

请注意，您不允许嵌套 FORM 元素！

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9（html4 规范说明嵌套表单从 3.2 到 4 没有变化）

https://www.w3.org/TR/html4/appendix/changes.html#hA.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 规范中指定的:)

score 6 · Accepted Answer

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

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

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

在 Firefox、Chrome 上测试和工作

未在 IE 上测试

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

好吧，这算不上什么发明，但它确实有效。

score 2 · Accepted Answer

关于嵌套表单：我花了 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<i>outside</i>的 form_2 的 ajaxContainer 时，我又重新开始工作了。它回答了为什么人们可以嵌套表格的问题。我的意思是，真的，如果不定义要使用哪种形式，ID 是什么？必须有一个更好、更巧妙的解决方法。

score 2 · Accepted Answer

尽管这个问题已经很老了，而且我同意@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/

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

今天，我也陷入了同样的问题，并解决了我添加了用户控件并
在此控件上使用此代码的问题

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

我相信这会有所帮助。

score 0 · Accepted Answer

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

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

关键是在某些情况下它没有完全损坏。但是“不完全破坏”可能是一个太低的标准，无法拍摄:-)

score 0 · Accepted Answer

[见下面的代码..代码格式] 2个简单的技巧根本不使用其他在另一个表单标签内，请使用相同的元素而不使用表单标签。

请参见下面的示例“”不要使用其他形式//只需在其中回忆输入图像描述here元素“”

html - 你能嵌套html表单吗？

21 回答 21

Related

Reference