你能嵌套html表格吗？

Question

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

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

这两种形式都有效吗？我的朋友遇到了这个问题,这是subForm作品的一部分,而另一部分却没有.

Answer 1

总之,没有.您可以在页面中包含多个表单,但不应嵌套它们.

从html5工作草案:

4.10.3 form要素

内容模型:

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

Answer 2

第二个表单将被忽略,例如,请参阅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;
}

Answer 3

我遇到了类似的问题,我知道这不是问题的答案,但它可以帮助有这种问题的人:
如果需要将两个或更多形式的元素放在给定的序列中,HTML5 <input> form属性可以是解决方案.

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

1. 表单属性是HTML5中的新增功能.
2. 指定元素属于哪个<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" />

在这里,您将找到浏览器的兼容性.

Answer 4

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

Answer 5

如果您正在使用AngularJS,那么您在运行时中的所有<form>标记ng-app都将ngForm被设计为嵌套的指令.

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

Answer 6

由于是2019年，我想为这个问题提供更新的答案。可以实现与嵌套表单相同的结果，但无需嵌套它们。HTML5引入了form属性。您可以将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浏览器因此停止使用它作为您的默认值/。现在该是我们停止关心使IE工作正常的时候了。

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

从html规范：

此功能使作者可以解决缺少对嵌套表单元素的支持的问题。

Answer 7

正如克雷格所说,没有.

但是,关于你对以下原因的评论:

使用<form>输入和"更新"按钮可能更容易,并使用复制隐藏输入和另一个"提交订单"按钮<form>.

Answer 8

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

希望这可以帮助!

Answer 9

请注意,您不能嵌套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规范中指定的:)

Answer 10

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

Answer 11

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

Answer 12

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

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

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