在另一个html表单中包含html表单是否有效？

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

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

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

如果不可能，这种情况下有哪些解决方法可用？

在我看来，这实际上是数据库接口所熟悉的一个非常普遍的需求-如果表单更新表A，并且该表具有链接到表B的字段，我们通常想要一种方法来为此更新或创建条目链接字段而不必离开当前表单。嵌套子表单将是一种非常直观的方式（这是由多个桌面数据库实现的ui）。

这是无效的。有解决方法，但是您应该使用另一种方法来获取此数据。考虑一种将所有数据发送到PHP邮件脚本的表单，然后该表单将一部分（来自a的部分）作为一封电子邮件提交，并将一部分（来自b的部分）作为另一封电子邮件提交。或进入数据库，或使用此数据执行的任何操作。可以嵌套表格，但不是答案！

可以嵌套html表单吗？

这个问题很好，但是谷歌快速搜索（甚至不用点击提供的链接）就可以发现表单内的表单是否有效。我个人很喜欢@Andreas的答案。

#1 楼

A.无效的HTML也不XHTML

在正式的W3C XHTML规范的B部分“元素禁止”中指出：

"form must not contain other form elements."

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

对于旧版HTML 3.2规范，
关于FORMS元素的部分指出：

“每个表单都必须包含在表单，但是
FORM元素不能嵌套。”

B。解决方法

有些使用JavaScript的解决方法不需要嵌套表单标签。

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

此StackOverflow问题的答案

注：尽管可以欺骗W3C验证程序来传递页面通过脚本操作DOM，它仍然不是合法的HTML。使用此类方法的问题在于，现在无法保证浏览器之间代码的行为。（因为它不是标准）

请在上方查看我的评论。...这是一个很棒的答案，很好的解决方法，但是很糟糕。您可以轻松进行完全相同的操作，而无需将所有数据提交到PHP脚本，然后从那里分割并发送到自己的目的地。尽管您确实回答了一个很棒的问题，但这只是一个糟糕而毫无意义的做法，因为您可以在更短的时间内正确地做到这一点。

–user1596138
13年5月16日在21:51

#2 楼

万一有人发现这篇文章，这是不需要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!";
?>

这是不一样的，在这种情况下，您想转到同一页面并执行不同的操作，使用两种表格可以转到不同的页面，并且/或者在每种情况下都发送不同的信息。

–路易斯·泰勒斯（Luis Tellez）
2014年10月10日20:35

您可以将php文件用作包装器，如果需要将代码包含在其他文件中，则可以包含任何所需的文件。因此，您可以编写（包括“ a.php”;）来代替（回显“ stored！”；）。

–安德烈亚斯（Andreas）
14年6月27日在13:55

我的表单中有多个删除按钮（考虑到嵌套表单的原因是我来到这里的原因），每个记录有1个，每个记录上都有一个列表复选框以进行批量删除。您的回应促使我重新思考我的计划，因为现在我应该为单个删除的按钮命名，并使用数字ID，然后对批量删除进行命名。 Il使php进行排序。

–克里斯
15年3月21日在18:01

@Andreas赚钱了。这是改变表格输入解释方式的自然解决方案。如果您使用发布/重定向/获取，则目的地也可能会有所不同。但是，如果您在服务器端没有足够的灵活性将操作组合到单个“ aORb”端点中，那么恐怕您会陷入困境。

–user81962
16-2-14在22:31

#3 楼

HTML 4.x和HTML5不允许使用嵌套表单，但是HTML5允许使用带有“ form”属性（“表单所有者”）的变通办法。

对于HTML 4.x，您可以：

使用仅包含隐藏字段和JavaScript的额外表单来设置其输入内容并提交表单。
使用CSS排列多个HTML表单看起来像一个实体-但是我觉得太难了。

不知道为什么这被否决了。这里是表单所有者的W3C部分的链接：w3.org/TR/html5/…

– SooDesuNe
2011年1月9日在16:11

@SooDesuNe您的链接已过期，这是新的链接w3.org/TR/html5/forms.html#form-owner

– chiliNUT
2014年5月12日19:33

#4 楼

正如其他人所说，这是无效的HTML。

听起来您正在这样做，目的是使表单在视觉上彼此定位。如果是这种情况，只需做两个单独的表格并使用CSS放置它们即可。

这就是我一直在想自己的网站所需要的，但是我想举一个如何做到这一点的例子。

–布赖恩·彼得森（Brian Peterson）
17年4月24日在20:26

#5 楼

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

#6 楼

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

（不，它不会验证。）

#7 楼

而不是在表单的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>

#8 楼

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

#9 楼

不，
请参阅w3c

#10 楼

不，这是无效的。但是，“解决方案”可以在包含形式“ 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。

#11 楼

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

因为您允许

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

提交“ a”时，可以使用没有花哨的JavaScript技巧的常规Web表单执行以下操作：

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

步骤2。在要显示此子表单的任何位置插入iframe。

步骤3。获利。

我尝试使用代码游乐场网站来演示示例，但其中许多人甚至禁止将网站嵌入iframe中，即使在自己的域中也是如此。

#12 楼

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

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

</form>
<input.../>

如果方法不同，该怎么办？如果我需要一种形式的POST方法，而另一种形式的GET方法则行不通。

–交货
10月1日15:40

#13 楼

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

#14 楼

不，这是无效的，但是您可以借助HTML和CSS的使用来欺骗您在jQuery上的内部表格位置。首先在父表单中创建一些容器div，然后在页面上的其他任何地方与孩子（内部）表单一起创建div：

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

给您的容器div一些稳定的重量

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

相对于容器div来感谢“ other_form”位置。

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS：您必须玩数字才能做到看起来不错。

编程黑洞网