您如何克服 HTML 表单嵌套限制? [英] How do you overcome the HTML form nesting limitation?

问题描述

我知道 XHTML 不支持嵌套表单标签，并且我已经在 Stack Overflow 上阅读了有关此主题的其他答案，但我仍然没有找到解决该问题的优雅方法.

有些人说您不需要它，并且他们想不出需要这样做的场景.嗯，我个人想不出我不需要的场景.

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

您正在制作一个博客应用程序，并且您有一个表单，其中包含一些用于创建新帖子的字段和一个带有操作"的工具栏，例如保存"、删除"、取消".

<input type="text" name="foo"/><!-- 这里有几个--><div id="工具栏"><input type="submit" name="save" value="Save"/><input type="submit" name="delete" value="Delete"/><a href="/home/index">取消</a>

</表单>

我们的目标是以一种不需要 JavaScript 的方式编写表单，只需简单的旧 HTML 表单和提交按钮即可.

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

唯一的问题是按下删除"将提交服务器上的所有表单字段，即使此操作唯一需要的是带有 post-id 的隐藏输入.在这个小例子中没什么大不了的，但是我的 LOB 应用程序(由于要求)必须一次性提交所有内容，无论如何这似乎非常低效和浪费.如果支持表单嵌套，我至少可以将删除"提交按钮包装在它自己的表单中，只有 post-id 字段.

您可能会说只需将删除"作为链接实现而不是提交".这在很多层面上都是错误的，但最重要的是因为像这里的删除"这样的副作用操作永远不应该是一个 GET 请求.

所以我的问题(特别是那些说他们不需要表单嵌套的人)是你做什么?有没有我遗漏的优雅解决方案，或者底线真的是要么需要 JavaScript 要么提交所有内容"?

解决方案

我会完全按照你的描述来实现:将所有内容提交到服务器并执行一个简单的 if/else 来检查点击了哪个按钮.

然后我将实现一个与表单的 onsubmit 事件相关联的 Javascript 调用，该调用将在提交表单之前进行检查，并且只将相关数据提交到服务器(可能通过页面上的第二个表单以及需要处理的 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 on Stack Overflow 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屋！