363

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

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

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

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

4

14 回答 14

414

A.它不是有效的 HTML 或 XHTML

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

“表单不得包含其他表单元素。”

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

至于较旧的HTML 3.2 规范，FORMS 元素部分指出：

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

B.解决方法

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

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

这个 StackOverflow 问题的答案

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

于 2009-02-17T08:44:01.427 回答
61

如果有人在这里发现这篇文章是一个很好的解决方案，而不需要 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!";
?>
于 2012-05-31T12:42:42.447 回答
30

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

对于 HTML 4.x，您可以：

  1. 使用仅包含隐藏字段和 JavaScript 的额外表单来设置其输入并提交表单。
  2. 使用 CSS 将几个 HTML 表单排列成一个单一的实体——但我认为这太难了。
于 2010-05-13T21:59:15.327 回答
15

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

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

于 2009-02-17T08:47:29.127 回答
8

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

于 2009-02-17T08:37:07.827 回答
6

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

于 2012-02-27T17:19:24.470 回答
5

而是在表单的 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>
于 2009-02-17T08:39:43.857 回答
5

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

（不，它不会验证。）

于 2009-02-17T08:41:17.877 回答
4

不，请参阅w3c

于 2009-02-17T08:37:33.270 回答
2

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

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

如果您使用引导程序或物化 css，则可以轻松完成。我这样做是为了避免使用 iframe。

于 2017-08-06T17:41:41.813 回答
2

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

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

</form>
<input.../>
于 2020-07-31T09:50:04.657 回答
0

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

因为你允许

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

提交“a”时，以下内容将起作用，使用常规 Web 表单，无需花哨的 JavaScript 技巧：

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

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

步骤 3. 利润。

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

于 2020-06-01T00:02:34.410 回答
0

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

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

解决方法

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

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

<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>
于 2021-11-30T15:31:28.730 回答
-1

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

于 2014-09-24T15:17:41.297 回答