html - 您如何克服 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

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