..."> ..."/> ..."> ...">

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

html HTML

卡卡西

2020-03-24

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

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

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

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

第3160篇《在另一个html表单中包含html表单是否有效？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答
乐米亚 2020.03.24

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

宝儿 2020.03.24

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

小小米亚前端 2020.03.24

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

阿飞理查德 2020.03.24

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

Stafan 2020.03.24

不，请参见w3c

古一阿飞路易 2020.03.24

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

（不，它不会验证。）

null 2020.03.24

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

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

蛋蛋阿飞 2020.03.24

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

至于HTML 4.x，您可以：

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

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

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

逆天ProNear 2020.03.24

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android