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

具有以下内容的HTML是否有效:

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

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

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

乐米亚2020/03/24 09:36:45

不,这是无效的,但是您可以HTML借助CSSjQuery用法来欺骗自己的内部表格位置首先在您的父表单内创建一个容器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:您必须玩数字才能使它看起来不错。

宝儿2020/03/24 09:36:45

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

小小米亚前端2020/03/24 09:36:45

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

阿飞理查德2020/03/24 09:36:45

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

Stafan2020/03/24 09:36:45

不,请参见w3c

古一阿飞路易2020/03/24 09:36:45

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

(不,它不会验证。)

2020/03/24 09:36:45

而不是在表单的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>
猴子2020/03/24 09:36:45

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

蛋蛋阿飞2020/03/24 09:36:45

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

至于HTML 4.x,您可以:

  1. 使用仅包含隐藏字段和JavaScript的额外表单来设置其输入内容并提交表单。
  2. 使用CSS排列几种HTML表单,使其看起来像一个实体-但这太难了。
猴子Tom2020/03/24 09:36:45

正如其他人所说,这不是有效的HTML。

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

逆天ProNear2020/03/24 09:36:45

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。使用这种方法的问题在于,现在无法保证浏览器之间代码的行为。(因为它不是标准的)