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

331

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

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

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

如果不可能，那么针对这种情况有哪些解决方法可用？

html  web-standards  standards-compliance 
— alourourcode
source
28
在我看来，这实际上是数据库接口所熟悉的一个非常普遍的需求-如果表单更新表A，并且该表具有链接到表B的字段，我们通常希望有一种方法来为此更新或创建条目链接字段而不必离开当前表单。嵌套子表单将是一种非常直观的方式（UI是由多个桌面数据库实现的）。
— monotasker'2
3
这是无效的。有解决方法，但是您应该使用另一种方法来获取此数据。考虑一种将所有数据发送到PHP邮件脚本的表单，然后该表单将部分（来自a的部分）作为一封电子邮件提交，并将部分（来自b的部分）作为另一封电子邮件提交。或进入数据库，或使用此数据执行的任何操作。可以完成嵌套表格，但这不是答案！
2
— 用户
这个问题很好，但是谷歌快速搜索（甚至不点击提供的链接）就可以发现表单中的表单是否有效。我个人喜欢@Andreas的答案。
— 贾里特·劳埃德

Answers:

380

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元素内。单个文档中可以有多个表单，但是FORM元素不能嵌套。”

B. 解决方法

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

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

这个StackOverflow问题的答案

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

— 基因Q
source
4
请在上方查看我的评论。您可以轻松地将所有数据提交到PHP脚本，然后从那里分割并发送到自己的目标，而无需做任何麻烦。尽管您确实回答了一个很棒的问题，但这只是一个糟糕而毫无意义的做法，因为您可以在更短的时间内正确地做到这一点。
53

万一有人发现这篇文章，这是不需要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!";
?>
— 安德烈亚斯
source
这是不一样的，在这种情况下，您想转到同一页面并执行不同的操作，使用2种表格可以转到不同的页面，并且/或者在每种情况下都发送不同的信息。
— Luis Tellez 2014年
您可以将php文件用作包装器，如果需要将代码包含在其他文件中，则可以包含任何所需的文件。因此，您可以写（include“ a.php”;）代替（echo“ stored！”;）
— Andreas
我的表单中有多个删除按钮（考虑到嵌套表单的原因是我来这里的原因），每个记录有1个，每个记录上都有一个列表复选框以进行批量删除。您的回应促使我重新考虑自己的计划，因为现在我应该为单个删除的按钮命名，并使用数字ID，然后对批量删除进行命名。Il使php进行排序。
— 克里斯（Chris）
@Andreas赚钱了。这是改变表单输入解释方式的自然解决方案。如果您使用发布/重定向/获取，则目的地也可能会有所不同。但是，如果您在服务器端没有足够的灵活性将操作组合到单个“ aORb”端点中，那么恐怕您会陷入困境。
27

HTML 4.x和HTML5禁止使用嵌套表单，但HTML5允许使用“表单”属性（“表单所有者”）进行变通。

至于HTML 4.x，您可以：

  1. 使用仅包含隐藏字段和JavaScript的额外表单来设置其输入内容并提交表单。
  2. 使用CSS排列几种HTML表单，使其看起来像一个实体-但我认为这太难了。
— 西
source
1
不知道为什么这被否决了。这里的链接形式的业主W3C部分：w3.org/TR/html5/...
— SooDesuNe
5
@SooDesuNe您的链接已过期，这是新的链接w3.org/TR/html5/forms.html#form-owner
— chiliNUT 2014年
13

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

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

— 用户名
source
1
这就是我一直在想自己的网站所需要的，但是我想举一个如何做到这一点的例子。
— Brian Peterson
5

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

（不，它不会验证。）

— 克里斯汀·斯图德
source
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>
— 安德烈亚斯·尼德米尔（Andreas Niedermair）
source
5

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

— 罗宾·马诺利
source
1

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

— 乔纳萨斯·霍滕斯
source
0

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

因为你允许

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

提交“ a”时，可以使用常规的网络表单执行以下操作，而无需花哨的JavaScript技巧：

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

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

步骤3.获利。

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

— ADJenks
source
-1

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

— cbWrites
source
-2

不，这是无效的，但是您可以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：您必须玩数字才能使其看起来不错。

— 雅罗斯拉夫·瓦霍（Yaroslav Varkhol）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.