它是有效的有一个html表单在另一个html表单?

以下是有效的html:

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

当你提交b时，你只能得到内部表单中的字段。当你提交“a”时，你会得到所有字段减去“b”内的字段。

如果不可能，对于这种情况有什么可行的变通办法?

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

2009-02-17 08:37:07

不, 看到w3c

2009-02-17 08:37:33

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

2009-02-17 08:39:43

通过将HTML代码输入W3 Validator，您可以非常容易地回答自己的问题。(它有一个文本输入域，你甚至不需要把你的代码放在服务器上…)

(不，它不会生效。)

2009-02-17 08:41:17

答:它不是有效的HTML或XHTML

在官方W3C XHTML规范的B节中。“元素禁令”规定:

"表单不能包含其他表单元素。"

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

对于旧的HTML 3.2规范，关于FORMS元素的部分声明:

"每一份表格都必须用表单元素。可以有几个表单放在单个文档中，但是 FORM元素不能嵌套。

B.解决方案

有一些使用JavaScript而不需要嵌套表单标记的变通方法。

“如何创建嵌套表单。”(尽管title不是嵌套的表单标签，而是JavaScript的解决方案)。

这是StackOverflow问题的答案

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

2009-02-17 08:44:01

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

听起来你这样做是为了在视觉上定位彼此之间的形式。如果是这种情况，只需做两个单独的表单，并使用CSS来定位它们。

2009-02-17 08:47:29

HTML 4。x & HTML5不允许嵌套表单，但HTML5允许使用“form”属性(“form owner”)。

至于HTML 4。X你可以:

使用一个只有隐藏字段和JavaScript的额外表单来设置其输入并提交表单。使用CSS来排列几个HTML表单，使其看起来像一个单一的实体-但这可能很复杂。

2010-05-13 21:59:15

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

2012-02-27 17:19:24

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

2012-05-31 12:42:42

如果你需要你的表单向1:M关系数据库提交/提交数据，我建议在表a上创建一个“插入后”DB触发器，它将为表B插入必要的数据。

2014-09-24 15:17:41

不，这是无效的。但是一个“解决方案”可以是在窗体“a”之外创建一个包含窗体“b”的模态窗口。

<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或materialize css，这很容易做到。我这样做是为了避免使用iframe。

2017-08-06 17:41:41

嵌套表单标签的非javascript解决方案:

因为你考虑到了

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

当提交"a"时，以下将工作，使用常规的web表单而没有花哨的JavaScript技巧:

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

步骤2。在您希望此子表单出现的任何位置插入iframe。

步骤3。利润。

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

2020-06-01 00:02:34

作为解决方案，你可以在提交按钮上使用formaction属性。输入时用不同的名字。

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

</form>
<input.../>

2020-07-31 09:50:04

您正在尝试实现HTML中不支持的嵌套表单。

每个表单都必须包含在form元素中。有可能在一个文档中包含多个表单，但是FORM元素不能嵌套。

解决方案

您可以通过对HTML和JavaScript进行一些更改来实现此功能。(不使用HTML表单)

步骤 1. 用div标签创建两个表单，如下所示(不使用表单标签)

<div id="form_a">
 <input.../>
     <div id="form_b">
        <input.../>
        <input.../>
        <button id="submit_b">Submit B</button>
     </div>
 <input.../>
 <button id="submit_a">Submit A</button>
</div >

2. 添加JQuery和Ajax来提交每个表单数据

    <script>
    // Submit form A data
    $('#submit_a').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_a input').not( "#form_b input" ).serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });

   // Submit form B data
    $('#submit_b').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_b input').serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });
    </script>

2021-11-30 15:31:28

快速的解决方案: 要获得不同表单的不同验证，并将它们的提交保存在独立的函数中，您可以这样做:

<form id="form1" onsubmit="alert('form1')"></form>
<form id="form2" onsubmit="alert('form2')"></form>

<div>
  <input form="form1" required />
  <input form="form1" required />

  <div>
      <input form="form2" required />
      <input form="form2" required />
      <button form="form2" type="submit">Send form2</button>
  </div>

  <input form="form1" required />
  <button form="form1" type="submit">Send form1</button>
</div>

2022-11-05 17:16:38

它是有效的有一个html表单在另一个html表单?

推荐文章

最新文章

标签