小编典典

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

html

我知道XHTML不支持嵌套的表单标记,但是我仍然没有找到解决该问题的优雅方法。

有人说您不需要它,并且他们无法想到是否需要这样做。嗯,我个人不认为一个场景,我的 没有 需要它。

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

您正在制作一个博客应用程序,您有一个表单,其中包含一些用于创建新帖子的字段以及一个带有“操作”(如“保存”,“删除”,“取消”)的工具栏。

<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的Hidden输入,按“Delete”将提交服务器上的所有表单字段。在这个小例子中不是什么大问题,但是我的LOB应用程序中有数百个(可以说)字段和选项卡的表单(由于要求),必须一次性提交所有内容,在任何情况下,这都非常低效和浪费。如果支持表单嵌套,那么我至少可以将“删除”提交按钮包装在它自己的表单中,仅包含post-id字段。

您可以说“仅将“删除”实现为链接而不是提交”。在许多级别中,这都是错误的,但是最重要的是,诸如“删除”之类的副作用操作绝不应该是GET请求。

所以我的问题(特别是那些说不需要表格嵌套的人)是您要做什么?是否有任何我缺少的优雅解决方案,或者底线确实是“要么需要JavaScript要么提交所有内容”?


阅读 270

收藏
2020-05-10

共1个答案

小编典典

我将按照您所描述的完全实现:将所有内容提交到服务器,然后执行简单的if / else检查单击的按钮。

然后,我将实现一个Java调用,将其绑定到表单的onsubmit事件中,该事件将在提交表单之前进行检查,并且仅将相关数据提交到服务器(可能通过页面上的第二个表单,并具有处理该内容所需的ID)隐藏的输入,或使用需要作为GET请求传递的数据刷新页面位置,或将Ajax发布到服务器,或…)。

这样,没有Javascript的人就可以使用表单,但是服务器负载却可以抵消,因为拥有Javascript的人只提交所需的单个数据。让您仅专注于支持一个或另一个上,确实会不必要地限制您的选择。

另外,如果您在公司防火墙或其他设备下工作,并且每个人都禁用了Javascript,则可能要执行两种形式并使用一些CSS魔术来使其看起来像删除按钮是第一种形式的一部分。

2020-05-10