您如何克服 HTML 表单嵌套限制？

Question

我知道 XHTML 不支持嵌套表单标签，并且我已经在 Stack Overflow 上阅读了有关此主题的其他答案，但我仍然没有找到解决问题的优雅方法。

有些人说你不需要它，他们想不出一个场景是需要它的。好吧，就我个人而言，我想不出一个我不需要需要它的场景。

让我们看一个非常简单的例子：

您正在制作一个博客应用程序，并且您有一个包含一些用于创建新帖子的字段的表单和一个带有“保存”、“删除”、“取消”等“操作”的工具栏。

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

我们的目标是以一种不需要 JavaScript 的方式编写表单，只需简单的旧 HTML 表单和提交按钮。

由于操作 URL 是在表单标签中定义的，而不是在每个单独的提交按钮中，我们唯一的选择是发布到通用 URL，然后启动“if...then...else”来确定提交的按钮。不是很优雅，但我们唯一的选择，因为我们不想依赖 JavaScript。

唯一的问题是，按下“删除”，将提交服务器上的所有表单字段，即使此操作唯一需要的是带有 post-id 的隐藏输入。在这个小例子中没什么大不了的，但我的LOB 应用程序中有数百个（可以这么说）字段和选项卡的表单（由于要求）必须一次性提交所有内容，无论如何这似乎非常低效和浪费。如果支持表单嵌套，我至少可以将“删除”提交按钮包装在它自己的表单中，只有 post-id 字段。

您可能会说“只需将“删除”实现为链接而不是提交”。这在很多层面上都是错误的，但最重要的是，这里的“删除”等副作用操作绝不应该是 GET 请求。

所以我的问题（特别是对于那些说他们不需要表单嵌套的人）是你做什么？有没有我遗漏的优雅解决方案，或者底线真的是“要么需要 JavaScript，要么提交所有内容”？

Answer 1

在没有 javascript 的情况下我会这样做的一种方法是添加一组单选按钮来定义要采取的操作：

• 更新
• 删除
• 随便

然后动作脚本会根据单选按钮集的值采取不同的动作。

另一种方法是按照您的建议在页面上放置两个表单，而不是嵌套。布局可能难以控制：

使用处理脚本中隐藏的“任务”字段进行适当的分支。

Answer 2

我将完全按照您的描述实现：将所有内容提交到服务器并执行一个简单的 if/else 来检查单击了哪个按钮。

然后我将实现一个绑定到表单的 onsubmit 事件的 Javascript 调用，该事件将在表单提交之前进行检查，并且仅将相关数据提交到服务器（可能通过页面上的第二个表单，其 ID 需要处理将事物作为隐藏输入，或者使用您需要作为 GET 请求传递的数据刷新页面位置，或者将 Ajax 发布到服务器，或者...）。

这样，没有 Javascript 的人可以很好地使用表单，但是服务器负载被抵消了，因为有 Javascript 的人只提交了所需的单条数据。让自己专注于只支持一个或另一个确实会不必要地限制您的选择。

或者，如果您在公司防火墙或其他地方工作，并且每个人都禁用了 Javascript，您可能想要创建两个表单并使用一些 CSS 魔法，使其看起来像删除按钮是第一个表单的一部分。

Answer 3

您可以在页面上并排放置表单，但不能嵌套。然后用 CSS 把所有的按钮都排好？

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

Answer 4

如果您真的不想使用多个表单（如 Jason 建议的那样），请使用按钮和 onclick 处理程序。

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

然后在 javascript 中（我在这里使用 jQuery 是为了方便）（即使添加一些 onclick 处理程序有点过头了）

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

我也知道，如果没有 javascript，这将使一半的页面无法工作。

Answer 5

我认为杰森是对的。如果您的“删除”操作是一个最小的操作，请将其单独放在一个表单中，并将其与其他按钮对齐，以使界面看起来像一个统一的表单，即使不是。

或者，当然，重新设计你的界面，让人们完全删除其他地方，这根本不需要他们看到 enormo-form。

Answer 6

HTML5 有一个“表单所有者”的概念——输入元素的“表单”属性。它允许模拟嵌套表单并解决问题。

Answer 7

或者，您可以动态分配表单 action...可能不是最佳解决方案，但确实可以减轻服务器端逻辑...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>

Answer 8

对嵌套表单使用iframe。如果他们需要共享字段，那么......它并不是真正的嵌套。

Answer 9

针对 Yar 在对他自己的回答的评论中发布的问题，我展示了一些 JavaScript，它将调整 iframe 的大小。对于表单按钮的情况，可以安全地假设 iframe 将位于同一域中。这是我使用的代码。您必须更改自己网站的数学/常量：

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

然后这样称呼它：

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

Answer 10

我知道这是一个老问题，但 HTML5 提供了几个新选项。

首先是在标记中将表单与工具栏分开，为删除操作添加另一个表单，并使用form属性将工具栏中的按钮与各自的表单相关联。

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

这个选项相当灵活，但原帖也提到可能需要用一个表单执行不同的操作。 HTML5 再次来拯救。您可以在提交按钮上使用formaction 属性，因此同一表单中的不同按钮可以提交到不同的 URL。这个例子只是在表单外的工具栏上添加了一个克隆方法，但它在表单中的嵌套也是一样的。

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission

这些新功能的优势在于它们以声明方式完成所有这些操作，而无需 JavaScript。缺点是旧版浏览器不支持它们，因此您必须为旧版浏览器做一些 polyfill。

Answer 11

我刚刚想出了一个使用 jquery 的好方法。

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

Answer 12

好吧，如果你提交一个表单，浏览器也会发送一个输入提交名称和值。 所以你能做的是

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

所以在服务器端你只需寻找以宽度字符串“action:”开头的参数，其余部分告诉你要采取什么行动

所以当你点击按钮 Save 时，浏览器会向你发送 foo=asd&action:save=Save 之类的信息

Answer 13

有点老话题了，但这个话题可能对某人有用：

正如上面提到的那样 - 您可以使用虚拟表单。 前段时间我不得不克服这个问题。起初，我完全忘记了这个 HTML 限制，只是添加了嵌套表单。结果很有趣——我从嵌套中丢失了我的第一个表单。然后它被证明是某种“技巧”，在实际嵌套表单之前简单地添加一个虚拟表单（将从浏览器中删除）。

在我的例子中是这样的：

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

适用于 Chrome、Firefox 和 Safari。 IE 最多 9 个（不确定大约 10 个）并且 Opera 不检测主窗体中的参数。 $_REQUEST 全局为空，无论输入如何。内部形式似乎在任何地方都可以正常工作。

尚未测试此处描述的另一个建议 - 嵌套表单周围的字段集。

编辑：框架集不起作用！ 我只是在其他表单之后添加了主表单（不再有嵌套表单），并使用 jQuery 的“克隆”在按钮单击时复制表单中的输入。为每个克隆的输入添加 .hide() 以保持布局不变，现在它就像一个魅力。

Answer 14

我的解决方案是让按钮调用 JS 函数，这些函数在主表单之外编写然后提交表单

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

Answer 15

我通过包含一个复选框来解决这个问题，具体取决于该人想要做什么。 然后使用 1 个按钮提交整个表单。

Answer 16

我仍然对这个讨论感兴趣。原始帖子的背后是 OP 似乎共享的“要求”——即具有向后兼容性的形式。作为在撰写本文时工作有时必须支持回 IE6（以及未来几年）的人，我深有体会。

在不推动框架的情况下（所有组织都希望在兼容性/健壮性方面让自己放心，而且我没有将此讨论作为框架的理由），Drupal 对此问题的解决方案很有趣。 Drupal 也直接相关，因为该框架长期以来的政策是“它应该在没有 Javascript 的情况下工作（仅当你想要时）”，即 OP 的问题。

Drupal 使用它相当广泛的form.inc 函数来查找triggering_element（是的，这就是代码中的名称）。请参阅form_builder 的 API 页面上列出的代码底部（如果您想深入了解详细信息，建议使用源代码 - drupal-x.xx/includes/form.inc） .构建器使用自动 HTML 属性生成，通过它，可以在返回时检测哪个按钮被按下，并采取相应的行动（这些也可以设置为运行单独的进程）。

除了表单构建器之外，Drupal 将数据“删除”操作拆分为单独的 URL/表单，这可能是由于原始帖子中提到的原因。这需要某种搜索/列出步骤（groan 另一种形式！但对用户友好）作为初步。但这具有消除“提交所有内容”问题的优势。包含数据的大表单用于其预期目的、数据创建/更新（甚至是“合并”操作）。

换句话说，解决问题的一种方法是将表单一分为二，然后问题就消失了（HTML 方法也可以通过 POST 更正）。