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

Question

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

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

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

如果无法实现，可以采用哪种解决方法？

Answer 1

一个。 它无效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元素。可能有几个单个文档中的表单，但是 FORM元素不能嵌套。“

B中。 解决方法

使用JavaScript的解决方法无需嵌套表单标记。

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

Answers to this StackOverflow question

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

Answer 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!";
?>

Answer 3

HTML 4.x＆amp; HTML5禁止使用嵌套表单，但HTML5将允许使用“表单”属性（“表单所有者”）进行解决方法。

对于HTML 4.x，你可以：

使用仅包含隐藏字段的额外表单＆amp;用于设置输入并提交表单的JavaScript。
使用CSS将多个HTML表单排成一行，看起来像一个实体 - 但我觉得这太难了。

Answer 4

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

听起来你正在这样做，以便在彼此之间可视地定位表格。如果是这种情况，只需做两个单独的表单并使用CSS来定位它们。

Answer 5

不，HTML规范声明没有FORM元素应该包含另一个FORM元素。

Answer 6

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

Answer 7

没有，见w3c

Answer 8

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

（不，它不会验证。）

Answer 9

可能是在外部表单中有一个iframe。 iframe包含内部表单。请务必使用iframe标题内的<base target="_parent" />标记，使表单成为主页的一部分。

Answer 10

不，它无效。但是＆＃34;解决方案＆＃34;可以在表单之外创建一个模态窗口＆＃34; a＆＃34;包含表格＆＃34; b＆＃34;。

<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或实现css，则可以轻松完成。我这样做是为了避免使用iframe。

Answer 11

如果您需要表单向1：M关系数据库提交/提交数据，我建议在插入＆＃34;之后创建＆＃34;表A上的DB触发器将插入表B的必要数据。

Answer 12

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

因为您允许

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

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

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

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

第3步。获利。

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

Answer 13

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

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

</form>
<input.../>

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

P.S .：您必须玩数字游戏才能使它看起来不错。

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

14 个答案:

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