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

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

2011-01-27 13:28:56

其他回答

在没有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>

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

2009-02-28 06:16:53

我刚刚想出了一个很好的方法来做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-15 18:43:57

对嵌套表单使用iframe。如果他们需要共享场地，那么……它并不是真正的嵌套。

2011-03-05 00:21:35

我知道这是一个老问题，但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就可以声明性地完成所有这些工作。缺点是旧的浏览器不支持它们，所以您必须为旧的浏览器做一些填充。

2011-12-05 01:53:07

如果你真的不想使用多个表单(就像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-28 09:26:10

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

推荐文章

最新文章

标签