你能嵌套 html 表单吗？

Can you nest html forms?

提问by Levi

Is it possible to nest html forms like this

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

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

so that both forms work? My friend is having problems with this, a part of the subFormworks, while another part of it does not.

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

回答by Craig

In a word, no. You can have several forms in a page but they should not be nested.

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

From the html5 working draft:

从html5 工作草案：

4.10.3 The formelement

Content model:

Flow content, but with no form element descendants.

4.10.3form元素

内容模型：

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

回答by Cliff Burton

I ran into a similar problem, and I know that is not an answer to the question, but it can be of help to someone with this kind of problem:
if there is need to put the elements of two or more forms in a given sequence, the HTML5<input> formattribute can be the solution.

From http://www.w3schools.com/tags/att_input_form.asp:

我遇到了类似的问题，我知道这不是问题的答案，但它可以帮助遇到此类问题的人：
如果需要将两个或多个表单的元素按给定的顺序排列，HTML5<input> form属性可以解决。

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

1. The form attributeis new in HTML5.
2. Specifies which <form>element an <input>element belongs to. The value of this attribute must be the id attribute of a <form>element in the same document.

1. form属性是 HTML5 中的新属性。
2. 指定元素属于哪个<form>元素<input>。此属性的值必须是<form>同一文档中某个元素的 id 属性。

Scenario:

场景：

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Implementation:

实施：

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

Hereyou'll find browser's compatibility.

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

回答by Vitalii Fedorenko

The second form will be ignored, see the snippetfrom WebKit for example:

第二种形式将被忽略，例如查看来自 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;
}

回答by user2420019

Plain html cannot allow you to do this. But with javascript you can be able to do that. If you are using javascript/jquery you could classify your form elements with a class and then use serialize() to serialize only those form elements for the subset of the items you want to submit.

纯 html 不能让你这样做。但是使用 javascript 你可以做到这一点。如果您使用的是 javascript/jquery，您可以使用类对表单元素进行分类，然后使用 serialize() 仅序列化您要提交的项目子集的那些表单元素。

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

Then in your javascript you could do this to serialize class1 elements

然后在您的 javascript 中，您可以执行此操作来序列化 class1 元素

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

For class2 you could do

对于 class2 你可以做

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

For the whole form

对于整个表格

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

or simply

或者干脆

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

回答by roufamatic

If you're using AngularJS, any <form>tags inside your ng-appare replaced at runtime with ngFormdirectives that are designed to be nested.

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

In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of <form>elements, so Angular provides the ngFormdirective which behaves identically to <form>but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeatdirective. (source)

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

回答by Creative

As it's 2019 I'd like to give an updated answer to this question. It is possible to achieve the same result as nested forms, but without nesting them. HTML5 introduced the form attribute. You can add the form attribute to form controls outside of a form to link them to a specific form element (by id).

由于是 2019 年，我想对这个问题给出更新的答案。可以实现与嵌套表单相同的结果，但不嵌套它们。HTML5 引入了 form 属性。您可以将 form 属性添加到表单外部的表单控件，以将它们链接到特定的表单元素（通过 id）。

https://www.impressivewebs.com/html5-form-attribute/

https://www.impressivewebs.com/html5-form-attribute/

This way you can structure your html like this:

这样你就可以像这样构建你的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>

The form attribute is supported by all modern browsers. IE does not support this though but IE is not a browser anymore, rather a compatibility tool, as confirmed by Microsoft itself: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/. It's about time we stop caring about making things work in IE.

所有现代浏览器都支持 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

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

From the html spec:

从 html 规范：

This feature allows authors to work around the lack of support for nested form elements.

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

回答by Pierre

Another way to get around this problem, if you are using some server side scripting language that allows you to manipulate the posted data, is to declare your html form like this :

解决此问题的另一种方法是，如果您使用某种服务器端脚本语言允许您操作已发布的数据，则可以像这样声明您的 html 表单：

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

If you print the posted data (I will use PHP here), you will get an array like this :

如果您打印发布的数据（我将在这里使用 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',
      ),
    );

Then you can just do something like :

然后你可以做这样的事情：

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

Your $_POST now has only your "main form" data, and your subform data is stored in another variable you can manipulate at will.

您的 $_POST 现在只有您的“主表单”数据，而您的子表单数据存储在另一个您可以随意操作的变量中。

Hope this helps!

希望这可以帮助！

回答by Jonathan Lonowski

As Craig said, no.

正如克雷格所说，不。

But, regarding your comment as to why:

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

It might be easier to use 1 <form>with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.

将 1<form>与输入和“更新”按钮一起使用可能更容易，并在另一个<form>.

回答by Mark Peterson

Note you are not allowed to nest FORM elements!

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

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

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

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9(html4 specification notes no changes regarding nesting forms from 3.2 to 4)

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#h-A.1.1.12(html4 specification notes no changes regarding nesting forms from 4.0 to 4.1)

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 specification notes no changes regarding nesting forms from 4 to 5)

https://www.w3.org/TR/html5-diff/（html5规范说明嵌套表单从 4 到 5 没有变化）

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-formscomments to "This feature allows authors to work around the lack of support for nested form elements.", but does not cite where this is specified, I think they are assuming that we should assume that it's specified in the html3 specification :)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms评论“此功能允许作者解决对嵌套表单元素缺乏支持的问题。”，但确实如此没有引用指定的地方，我认为他们假设我们应该假设它是在 html3 规范中指定的 :)

回答by Ezion

A simple workaround is to use a iframe to hold the "nested" form. Visually the form is nested but on the code side its in a separate html file altogether.

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