208

我知道 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 是在 Form 标记中定义的，而不是在每个单独的提交按钮中，我们唯一的选择是发布到通用 URL，然后启动“if...then...else”来确定按钮的名称已提交。不是很优雅，但我们唯一的选择，因为我们不想依赖 JavaScript。

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

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

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

4

16 回答 16

184

我知道这是一个老问题，但 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。

于 2011-12-05T01:53:07.367 回答
55

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

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

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

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

于 2009-02-28T06:24:03.703 回答
16

您可以在页面上并排放置表单，但不能嵌套。然后使用 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>
于 2009-02-28T06:35:23.627 回答
14

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

于 2010-05-13T22:05:37.700 回答
11

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

正如上面提到的那样-您可以使用虚拟表格。前段时间我不得不克服这个问题。起初，我完全忘记了这个 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() 以保持布局不变，现在它就像一个魅力。

于 2012-12-06T08:29:08.883 回答
4

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

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

于 2009-02-28T22:44:29.820 回答
2

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

  • 更新
  • 删除
  • 任何

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

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

<form name="editform" action="the_action_url" method="post">
   <input type="hidden" name="task" value="update" />
   <input type="text" name="foo" />
   <input type="submit" name="save" value="Save" />
</form>

<form name="delform" action="the_action_url" method="post">
   <input type="hidden" name="task" value="delete" />
   <input type="hidden" name="post_id" value="5" />
   <input type="submit" name="delete" value="Delete" />
</form>

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

于 2009-02-28T06:16:53.627 回答
1

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

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

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

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

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

于 2014-03-20T11:09:07.327 回答
0

我的解决方案是让按钮调用 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>
于 2013-03-24T05:32:45.210 回答
-1

如果您真的不想使用多个表单（如 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，这将使一半页面无法工作。

于 2009-02-28T09:26:10.503 回答
-1

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

于 2011-03-05T00:21:35.380 回答
-1

作为对 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>
于 2011-09-09T07:46:50.223 回答
-1

我只是想出了一个用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>
于 2012-03-15T18:43:57.703 回答
-1

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

<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 之类的信息

于 2012-11-22T13:19:43.600 回答
-1

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

于 2013-11-23T05:58:46.067 回答
-2

或者，您可以动态分配表单 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>
于 2011-01-27T13:28:56.133 回答