你如何克服html表格嵌套限制?

我知道xhtml不支持嵌套窗体标签,我已经阅读了其他答案
这里在关于这个问题的stackoverflow,但我还没有找到一个优雅的解决方案的问题。

有人说你不需要它,并且他们无法想象这是需要的。 那么,我个人不能想到一个我不需要它的场景。

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

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

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

唯一的问题是,按下“删除”,将提交服务器上的所有表单字段,即使此操作所需的唯一东西是使用后ID的隐藏输入。 在这个小例子中不是很大,但是我的LOB应用程序中有数百个(可以这么说)字段和标签的表单(由于需求)必须一次性提交所有内容,并且无论如何,这看起来效率很低和浪费。 如果支持表单嵌套,我至少可以在自己的表单中包含“删除”提交按钮,只有后置ID字段。

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

所以我的问题(特别是那些说他们不需要表单嵌套的人)是你做什么的? 有没有优雅的解决方案,我错过了或底线是真的“要么JavaScript或提交一切”?


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

然后,我会实现一个绑定到表单的onsubmit事件的Javascript调用,该事件将在表单提交之前进行检查,并仅将相关数据提交给服务器(可能通过页面上的第二个表单提供处理事件所需的ID一个隐藏的输入,或者用你需要作为GET请求传递的数据刷新页面位置,或者向服务器做一个Ajax帖子,或者......)。

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

另外,如果你在公司的防火墙或某个东西的后面工作,并且每个人都禁用了Javascript,那么你可能想要做两种形式并使用一些CSS魔法来使它看起来像删除按钮是第一种形式的一部分。


我知道这是一个老问题,但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的情况下以声明方式执行所有这些操作。 缺点是它们在旧版浏览器中不支持,所以你必须为旧版浏览器做一些polyfilling。


你可以在页面上并排显示表格,但不能嵌套。 然后使用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>
链接地址: http://www.djcxy.com/p/64183.html

上一篇: How do you overcome the html form nesting limitation?

下一篇: Cannot reference element of existing svg