当前位置： 文江博客话题详情

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

发布于 2024-07-13 08:36:25 字数 352 浏览 8 评论 0原文

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

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

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

如果不可能，有哪些解决方法可以解决这种情况？

原文

Is it valid HTML to have the following:

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

So when you submit "b" you only get the fields within the inner form. When you submit "a" you get all fields minus those within "b".

If it isn't possible, what workarounds for this situation are available?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（15）

も让我眼熟你 2024-07-20 08:36:25

A. 它不是有效的 HTML 或 XHTML

在官方 W3C XHTML 规范中，B 节“元素禁止”中指出：

“表单不得包含其他表单元素。”

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

至于较旧的 HTML 3.2 规范，
FORMS 元素的部分指出：

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

B. 解决方法

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

“如何创建嵌套表单。”（尽管title 这不是嵌套表单标签，而是一个 JavaScript 解决方法

。 Larger-form">此 StackOverflow 问题的答案

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

A. It is not valid HTML nor XHTML

In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:

"form must not contain other form elements."

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

As for the older HTML 3.2 spec,
the section on the FORMS element states that:

"Every form must be enclosed within a
FORM element. There can be several
forms in a single document, but the
FORM element can't be nested."

B. The Workaround

There are workarounds using JavaScript without needing to nest form tags.

"How to create a nested form." (despite title this is not nested form tags, but a JavaScript workaround).

Answers to this StackOverflow question

Note: Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)

回复 原文
怪我鬧 2024-07-20 08:36:25

如果有人发现这篇文章是一个很好的解决方案，不需要 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!";
?>

In case someone find this post here is a great solution without the need of JS. Use two submit buttons with different name attributes check in your server language which submit button was pressed cause only one of them will be sent to the server.

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

The server side could look something like this if you use php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
回复 原文
两相知 2024-07-20 08:36:25

HTML 4.x 和 HTML5 不允许嵌套表单，但 HTML5 允许使用 解决方法“表单”属性（“表单所有者”）。

对于 HTML 4.x，您可以：

  1. 创建其他隐藏表单，然后使用 JavaScript 将数据复制到隐藏表单之一并提交。
  2. 使用 CSS 排列多个 HTML 表单，使其看起来像一个实体 - 但做起来可能很复杂。

HTML 4.x & HTML5 disallow nested forms, but HTML5 allows a workaround with the "form" attribute ("form owner").

As for HTML 4.x you can:

  1. Create additional hidden forms, then use JavaScript to copy data into one of hidden forms and submit it.
  2. Use CSS to line up several HTML form to look like a single entity - but it might be complicated to do.
回复 原文
浅唱々樱花落 2024-07-20 08:36:25

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

听起来您这样做是为了在视觉上将表单相互定位。 如果是这种情况，只需制作两个单独的表单并使用 CSS 来定位它们即可。

As others have said, it is not valid HTML.

It sounds like your are doing this to position the forms visually within each other. If that is the case, just do two separate forms and use CSS to position them.

回复 原文
风向决定发型 2024-07-20 08:36:25

不可以，HTML 规范规定 FORM 元素不应包含另一个 FORM 元素。

No, the HTML specification states that no FORM element should contain another FORM element.

回复 原文
_畞蕅 2024-07-20 08:36:25

一种可能性是在外部窗体内有一个 iframe。 iframe 包含内部表单。 确保在 iframe 的 head 标记内使用 标记以使表单充当主页的一部分。

A possibility is to have an iframe inside the outer form. The iframe contains the inner form. Make sure to use the <base target="_parent" /> tag inside the head tag of the iframe to make the form behave as part of the main page.

回复 原文
何时共饮酒 2024-07-20 08:36:25

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

rather use a custom javascript-method inside the action attribute of the form!

eg

<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>
回复 原文
当梦初醒 2024-07-20 08:36:25

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

（不，它不会验证。）

You can answer your own question very easily by inputting the HTML code into the W3 Validator. (It features a text input field, you won't even have to put your code on a server...)

(And no, it won't validate.)

回复 原文
初见 2024-07-20 08:36:25

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

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

</form>
<input.../>

As workaround you could use formaction attribute on submit button. And just use different names on your inputs.

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

</form>
<input.../>
回复 原文
念三年u 2024-07-20 08:36:25

不，
请参阅 w3c

no,
see w3c

回复 原文
浅蓝的眸勾画不出的柔情 2024-07-20 08:36:25

不，它无效。 但是“解决方案”可以在包含表单“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>

如果您使用 bootstrap 或 Materialize css，这可以轻松完成。
我这样做是为了避免使用 iframe。

No, it is not valid. But a "solution" can be creating a modal window outside of form "a" containing the form "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>

It can be easily done if you are using bootstrap or materialize css.
I'm doing this to avoid using iframe.

回复 原文
拥抱没勇气 2024-07-20 08:36:25

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

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

Fast Solution:
To obtain different validations to different forms and keep their submits in separated functions you can do this:

<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>
回复 原文
夢归不見 2024-07-20 08:36:25

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

因为您允许

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

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

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

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

步骤 3. 利润。

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

A non-JavaScript workaround for nesting form tags:

Because you allow for

all fields minus those within "b".

when submitting "a", the following would work, using regular web-forms without fancy JavaScript tricks:

Step 1. Put each form on its own web page.

Step 2. Insert an iframe wherever you want this sub-form to appear.

Step 3. Profit.

I tried to use a code-playground website to show a demo, but many of them prohibit embedding their websites in iframes, even within their own domain.

回复 原文
遇见了你 2024-07-20 08:36:25

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

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

解决方法

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

步骤
1. 使用 div 标签创建两个表单，如下所示（不要使用 form 标签）

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

You are trying to implement nested form which is not supported in HTML.

Every form must be enclosed within a FORM element. There can be
several forms in a single document, but the FORM element can't be
nested.

Workaround

You can implement this functionality with some change in HTML and JavaScript. (without using html forms)

Steps
1. Create both forms with div tag as follows (do not use form tag)

<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. Add JQuery and Ajax to submit each form data

    <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>
回复 原文
风情万种。 2024-07-20 08:36:25

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

If you need your form to submit/commit data to a 1:M relational database, I would recommend creating an "after insert" DB trigger on table A that will insert the necessary data for table B.

回复 原文
~没有更多了~

关于作者

世俗缘

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文