我知道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。

The only problem is that pressing "Delete", will submit ALL the form fields on the server even though the only thing needed for this action is a Hidden input with the post-id. Not very big deal in this small example, but I have forms with hundreds (so to speak) of fields and tabs in my LOB applications that (because of requirements) have to submit everything in one-go and in any case this seems very inefficient and a waste. If form nesting was supported, I would at least be able to wrap the "Delete" submit button inside it's own form with only the post-id field.

你可能会说“只是实现‘删除’链接,而不是提交”。这在很多层面上都是错误的,但最重要的是,像“Delete”这样的副作用操作永远不应该是GET请求。

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


当前回答

或者,你也可以在动态中分配表单actiob…可能不是最好的解决方案,但确实缓解了服务器端逻辑……

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

其他回答

或者,你也可以在动态中分配表单actiob…可能不是最好的解决方案,但确实缓解了服务器端逻辑……

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

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

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

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

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

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

我认为杰森是对的。如果你的“删除”操作是一个最小的操作,那就把它单独放在一个表单中,并把它与其他按钮对齐,这样界面看起来就像一个统一的表单,即使它不是。

或者,当然,重新设计你的界面,让人们完全删除其他地方,这根本不需要他们看到巨大的形式。

如果你真的不想使用多个表单(就像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,这将使一半的页面无法工作。