【问题标题】：Is it valid to have a html form inside another html form?在另一个 html 表单中包含一个 html 表单是否有效？
【发布时间】：2016-12-05 03:28:24
【问题描述】：

具有以下内容的html是否有效：

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

因此，当您提交“b”时，您只会获得内部表单中的字段。当您提交“a”时，您会得到所有字段减去“b”中的字段。

如果不可能，有什么解决方法可以解决这种情况？

【问题讨论】：

在我看来，这实际上是一个从 db 接口熟悉的非常常见的需求——如果一个表单更新了表 A，并且该表有一个链接到表 B 的字段，我们通常想要一个无需离开当前表单即可为该链接字段更新或创建条目的方法。嵌套子表单将是一种非常直观的方式（并且是由多个桌面数据库实现的 ui）。
无效。有一些解决方法，但您应该使用另一种方法来获取此数据。考虑一个表单将所有数据发送到 PHP 邮件脚本，然后将部分（来自 a 的部分）作为一封电子邮件提交，将部分（来自 b 的部分）作为另一封电子邮件提交。或者进入数据库，或者你对这些数据所做的任何事情。可以嵌套表单，但这不是答案！
Can you nest html forms?的可能重复
这个问题很好，但是快速的谷歌搜索（甚至不点击提供的链接）可以揭示表单中的表单是否有效。我个人喜欢@Andreas 的回答。

标签： html web-standards standards-compliance

【解决方案1】：

不，HTML 规范规定任何FORM 元素都不应包含另一个FORM 元素。

【讨论】：

【解决方案2】：

不，见w3c

【讨论】：

【解决方案3】：

而是在表单的 action 属性中使用自定义的 javascript 方法！

例如

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>

【讨论】：

【解决方案4】：

您可以通过将 HTML 代码输入到W3 Validator 来非常轻松地回答您自己的问题。（它具有文本输入字段，您甚至不必将代码放在服务器上......）

（不，它不会验证。）

【讨论】：

【解决方案5】：

A. 它不是有效的 HTML 或 XHTML

在官方 W3C XHTML 规范中，第 B 节“元素禁止”规定：

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

至于老的HTML 3.2 spec，关于 FORMS 元素的部分指出：

"每个表格都必须包含在一个表格元素。可以有几个表格在一个文档中，但 FORM 元素不能嵌套。”

B. 解决方法

有一些使用 JavaScript 而无需嵌套表单标签的解决方法。

“如何创建嵌套表单。”（尽管标题不是嵌套表单标签，而是一种 JavaScript 解决方法）。

Answers to this StackOverflow question

注意： 虽然可以通过脚本操作 DOM 来欺骗 W3C 验证器来传递页面，但它仍然不是合法的 HTML。使用这种方法的问题在于，现在无法保证跨浏览器的代码行为。（因为它不是标准的）

【讨论】：

在上面看到我的评论......这是一个很好的答案，很好的解决方法，但是一个糟糕的做法。您可以做同样的事情，更轻松地将所有数据提交到 PHP 脚本，然后从那里分割并发送到他们自己的目的地。尽管您确实回答了很好的问题，但这只是一种糟糕且毫无意义的做法，因为您可以在更短的时间内以正确的方式做到这一点。

【解决方案6】：

正如其他人所说，它不是有效的 HTML。

听起来您这样做是为了在视觉上定位表单。如果是这种情况，只需做两个单独的表单并使用 CSS 来定位它们。

【讨论】：

这是我认为我的网站所需要的，但我希望有一个如何做到这一点的例子。

【解决方案7】：

HTML 4.x 和 HTML5 不允许嵌套表单，但 HTML5 将允许使用“表单”属性（“表单所有者”）的解决方法。

对于 HTML 4.x，您可以：

使用仅包含隐藏字段和 JavaScript 的额外表单来设置其输入并提交表单。
使用 CSS 将多个 HTML 表单排列成一个实体 - 但我认为这太难了。

【讨论】：

不知道为什么这被否决了。这里是表单所有者的 W3C 部分的链接：w3.org/TR/html5/…
@SooDesuNe 您的链接已过期，这是新链接w3.org/TR/html5/forms.html#form-owner

【解决方案8】：

一种可能性是在外部窗体内有一个 iframe。 iframe 包含内部表单。确保在 iframe 的 head 标记内使用 <base target="_parent" /> 标记，以使表单作为主页的一部分。

【讨论】：

【解决方案9】：

如果有人在这里发现这篇文章是一个很好的解决方案，而不需要 JS。使用两个具有不同名称属性的提交按钮检查您的服务器语言中按下了哪个提交按钮，因为只有其中一个会被发送到服务器。

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

如果你使用 php，服务器端可能看起来像这样：

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>

【讨论】：

这是不一样的，在这种情况下，您要转到同一个页面并执行不同的操作，使用 2 个表单您可以转到不同的页面和/或在每种情况下发送不同的信息。
您可以使用 php 文件作为包装器，如果您希望将代码放在不同的文件中，可以包含您想要的任何文件。所以代替 (echo "stored!";) 你可以写 (include "a.php";)
我的表单中有多个删除按钮（我来这里考虑嵌套表单的原因）每条记录有 1 个，每个记录上都有一个列表复选框以进行批量删除。您的回复促使我重新考虑我的计划，我现在想我应该用数字 id 命名单个删除的按钮，然后批量删除。我让 php 进行排序。
@Andreas 很有钱。这是改变表单输入的解释方式的自然解决方案。如果您使用 Post/Redirect/Get，那么目的地也会有所不同。但是，如果您在服务器端没有将您的操作组合到单个“aORb”端点的灵活性，那么我认为您恐怕会遇到黑客攻击。

【解决方案10】：

如果您需要表单将数据提交/提交到 1:M 关系数据库，我建议在表 A 上创建一个“插入后”数据库触发器，该触发器将为表 B 插入必要的数据。

【讨论】：

【解决方案11】：

不，它无效。但是一个“解决方案”可以是在表单“a”之外创建一个包含表单“b”的模式窗口。

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

如果您使用 bootstrap 或 materialize css，则可以轻松完成。我这样做是为了避免使用 iframe。

【讨论】：

【解决方案12】：

嵌套表单标签的非 JavaScript 解决方法：

因为你允许

所有字段减去“b”中的字段。

当提交“a”时，以下内容会起作用，使用常规的网络表单，没有花哨的 JavaScript 技巧：

第 1 步。将每个表单放在自己的网页上。

第 2 步。在您希望此子表单出现的任何位置插入 iframe。

第 3 步。利润。

我尝试使用 code-playground 网站展示演示，但他们中的许多人禁止将网站嵌入 iframe，即使在他们自己的域中也是如此。

【讨论】：

【解决方案13】：

作为解决方法，您可以在提交按钮上使用formaction 属性。并且只需在您的输入中使用不同的名称。

<form action="a">
<input.../>
    <!-- Form 2 inputs -->
    <input.../>
    <input.../>
    <input.../>
    <input type="submit" formaction="b">

</form>
<input.../>

【讨论】：

如果方法不同怎么办？如果我需要一个表单的 POST 方法和另一个表单的 GET 方法，它将不起作用。
@delivey 对您来说可能有点晚了，但@Szel 链接的文档也显示了formmethod 属性，请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…

【解决方案14】：

您正在尝试实现 HTML 不支持的嵌套表单。

每个表单都必须包含在一个 FORM 元素中。可以有单个文档中有多个表单，但 FORM 元素不能嵌套。

解决方法

您可以通过对 HTML 和 JavaScript 进行一些更改来实现此功能。（不使用 html 表单）

步骤
1.使用 div 标签创建两个表单，如下所示（不要使用 form 标签）

<div id="form_a">
 <input.../>
     <div id="form_b">
        <input.../>
        <input.../>
        <button id="submit_b">Submit B</button>
     </div>
 <input.../>
 <button id="submit_a">Submit A</button>
</div >

2.添加JQuery和Ajax提交各个表单数据

    <script>
    // Submit form A data
    $('#submit_a').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_a input').not( "#form_b input" ).serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });

   // Submit form B data
    $('#submit_b').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_b input').serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });
    </script>

【讨论】：