你如何克服html表格嵌套限制？ [英] How do you overcome the html form nesting limitation?

问题描述

我知道xhtml不支持嵌套窗体标签，并且我已经阅读了关于这个主题的其他答案 -
在这里，在stackoverflow关于这个问题，但我仍然没有想出一个优雅的解决方案的问题。

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

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

您正在制作一个博客应用程序，

 创建一个新帖子和一个带有操作的工具栏，比如Save，Delete，Cancel < 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 =textname =foo/> <！ - 其中的几个 - > 
< div id =toolbar> 
< input type =submitname =savevalue =Save/> 
< input type =submitname =deletevalue =Delete/> 
< a href =/ home / index>取消< / a> 
< / div> 
< / form> 
  

我们的目标是以不需要javascript

由于操作url是在Form标签中定义的，而不是在每个单独的提交按钮中定义的，我们唯一的选择是发布到通用网址，然后启动if ... then ... else来确定提交的按钮的名称。不是很优雅，但我们唯一的选择，因为我们不想依靠JavaScript。

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

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

所以我的问题（特别是对那些表示他们不需要表单嵌套的人）是什么？有没有优雅的解决方案，我失踪或底线是真的要么JavaScript或提交一切？

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

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

这样，没有Javascript的人就是能够很好地使用表单，但是服务器负载被抵消了，因为拥有Javascript的人只提交需要的单个数据。另外，如果你在公司防火墙的后面工作，或者每个人都禁用了Javascript，那么，你可能想要做两种形式并使用一些CSS魔法，使其看起来像删除按钮是第一种形式的一部分。

I know that xhtml doesn't support nested form tags and I have already read other answers
here in stackoverflow regarding this subject, but I still haven't figured out an elegant solution to the problem.

Some say you don't need it and that they can't think of a scenario were this would be needed. Well, personally I can't think of a scenario that I HAVEN'T needed it.

Let's see a very simple example:

You are making a blog app and you have a form with some fields for creating a new post and a toolbar with "actions" like "Save", "Delete", "Cancel".

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

Our objective is to write the form in a way that doesn't require javascript, just plain old html form and submit buttons.

Since the action url is defined in the Form tag and not in each individual submit button, our only option is to post to a generic url and then start "if...then...else" to determine the name of the button that was submitted. Not very elegant, but our only choice, since we don't want to rely on 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.

You may say "Just implement the "Delete" as a link instead of submit". This would be wrong in so many levels, but most importantly because Side-effect actions like "Delete" here, should never be a GET request.

So my question (particularly to those that say they haven't needed form nesting) is What do YOU do? Is there any elegant solution that I'm missing or the bottom line is really "Either require javascript or submit everything"?

解决方案

I would implement this exactly as you described: submit everything to the server and do a simple if/else to check what button was clicked.

And then I would implement a Javascript call tying into the form's onsubmit event which would check before the form was submitted, and only submit the relevant data to the server (possibly through a second form on the page with the ID needed to process the thing as a hidden input, or refresh the page location with the data you need passed as a GET request, or do an Ajax post to the server, or...).

This way the people without Javascript are able to use the form just fine, but the server load is offset because the people who do have Javascript are only submitting the single piece of data needed. Getting yourself focused on only supporting one or the other really limits your options unnecessarily.

Alternatively, if you're working behind a corporate firewall or something and everybody has Javascript disabled, you might want to do two forms and work some CSS magic to make it look like the delete button is part of the first form.

这篇关于你如何克服html表格嵌套限制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！