javascript 为什么在通过 ajax 提交时使用表单标签？

Why use a form tag when you're submitting via ajax?

提问by sprugman

Philosophical question:

哲学问题：

Say I've got a web app that requiresjavascript and a modern browser, so progressive enhancement is not an issue. If my form is being built via javascript, and my data updates are all being done via ajax POSTs & PUTs, is there really any reason to wrap my controls in a form tag? If I'm still going to use the tag, say for semantic or structural reasons, is there any reason to have action and method params that I'm going to ignore? It kind of feels like a hold-over from an earlier era to me.

假设我有一个需要javascript 和现代浏览器的网络应用程序，所以渐进增强不是问题。如果我的表单是通过 javascript 构建的，并且我的数据更新都是通过 ajax POST 和 PUT 完成的，那么真的有任何理由将我的控件包装在表单标签中吗？如果我仍要使用标签，例如出于语义或结构原因，是否有任何理由要忽略我将忽略的操作和方法参数？对我来说，这有点像早期时代的延续。

采纳答案by Nicole

There is at least one important user-experience feature provided specifically by wrapping inputs inside a form tag:

通过将输入包装在表单标签中，至少提供了一个重要的用户体验功能：

The enter key will submit the form.In fact, in Mobile Safari, this is how you get the "Go"button to appear on the keyboard.

Enter 键将提交表单。事实上，在 Mobile Safari 中，这就是让“开始”按钮出现在键盘上的方式。

Without a form wrapping the inputs, there is nothing to submit.

如果没有包装输入的表单，则无需提交任何内容。

You can of course provide enter-key behavior through a keypress event, but I don't know about if this works for mobile devices. I don't know about you, but I'd rather work with the semantics provided by the browser than have to imitate them with events.

您当然可以通过按键事件提供回车键行为，但我不知道这是否适用于移动设备。我不了解你，但我宁愿使用浏览器提供的语义而不是用事件来模仿它们。

In your case, you would simply provide an onsubmitevent handler for the form, which would do your AJAX submit, then return false, canceling the actual submit.

在您的情况下，您只需为onsubmit表单提供一个事件处理程序，它将执行您的 AJAX 提交，然后return false取消实际提交。

You can simply provide action=""(which means "self"), and methodis not required — it defaults to GET.

您可以简单地提供action=""（这意味着“自我”），并且method不是必需的 - 它默认为GET.

回答by kapa

If you do not need progressive enhancement, you theoretically don't need them.

如果您不需要渐进增强，则理论上您不需要它们。

On the other hand, forms have some cool grouping and semanticeffects. Using them, you can group your form elements logically, and make it easier for your scripts to gather the values of certain elements.

另一方面，forms 有一些很酷的分组和语义效果。使用它们，您可以对表单元素进行逻辑分组，并使脚本更容易收集某些元素的值。

For example if you want to ajax-submit some user input, it is always easier to say: "let's take all elements in this form and submit them" than saying "let's take this input, these two selects and these three textareas and submit them". In my experience, it actually helps the developer if formtags are present.

例如，如果您想通过 ajax 提交一些用户输入，那么说：“让我们获取此表单中的所有元素并提交它们”总是比说“让我们获取此输入、这两个选择和这三个文本区域并提交它们”更容易”。根据我的经验，如果form存在标签，它实际上对开发人员有帮助。

回答by Endophage

AJAX is great but as JamWaffles (+1 to him) said, using formtags provides a fallback method.

AJAX 很棒，但正如 JamWaffles（对他 +1）所说，使用form标签提供了一种后备方法。

Personally I use form tags, even for things I submit with AJAX because it is syntactically clear and makes it easy to grab all inputs within a specific form. Yes you could do this with a divor whatever too but as I said, using a form is syntactically nice.

我个人使用表单标签，即使是我用 AJAX 提交的东西，因为它在语法上很清晰，并且可以轻松获取特定表单中的所有输入。是的，您也可以使用 adiv或其他任何东西来做到这一点，但正如我所说，使用表单在语法上很好。

Incidentally, screen readers treat the content inside a formdifferently so there are accessibility issues to be considered whichever way you choose to go. Note that anecdotal evidence suggests that Google considers accessibility in its rankings so if SEO is a concern for you, use a form and do it right.

顺便说一句，屏幕阅读器以form不同的方式对待内部内容，因此无论您选择哪种方式，都需要考虑可访问性问题。请注意，轶事证据表明谷歌在其排名中考虑了可访问性，因此如果您关心 SEO，请使用表格并正确执行。

回答by Alex Jurado - Bitendian

Summary: forms OK for MVC, simple web apps, bad for component oriented, rich web apps.

总结：表单适合 MVC、简单的 Web 应用程序，但不适合面向组件的、丰富的 Web 应用程序。

Reason: forms cannot nest other forms: big limitation for a component-oriented architecture.

原因：表单不能嵌套其他表单：面向组件架构的巨大限制。

Details: For typical MVC applications, forms are great. In rich, complex web applications using a lot of javascript and AJAX and with a lot of components here and there, I don't like forms. Reason: forms cannot nest another forms. Then if each component renders a form, components cannot nest each other. Too bad. By changing all forms to divs, I can nest them, and whenever I want to grab all parameters in order to pass them to ajax, I just do (with jQuery):

详细信息：对于典型的 MVC 应用程序，表单很棒。在使用大量 javascript 和 AJAX 以及随处可见的大量组件的丰富、复杂的 Web 应用程序中，我不喜欢表单。原因：表单不能嵌套另一个表单。那么如果每个组件渲染一个表单，组件就不能相互嵌套。太糟糕了。通过将所有表单更改为 div，我可以嵌套它们，并且每当我想获取所有参数以将它们传递给 ajax 时，我就这样做（使用 jQuery）：

$("#id_of_my_div").find("[name]").serialize();

$("#id_of_my_div").find("[name]").serialize();

(or some other filtering)

（或其他一些过滤）

instead of:

代替：

$("#id_of_my_form").serialize();

$("#id_of_my_form").serialize();

Though, for sentimental and semantic reasons, I keep naming my divs something_form when they are acting as forms.

但是，出于情感和语义的原因，当我的 div 充当表单时，我一直将它们命名为 something_form。

回答by Bojangles

Not that I can see. I'm currently building a web application that uses <form>s, but I'm using them so I have a fallback method if the user has JavaScript disabled (an e.preventDefaultstops the form posting normally). For your situation, where you're saying the user MUST have JavaScript, a <form>tag isn't necessary, but it might be an idea to keep it anyway in case browser need to do anything with it, or to access it as a sort of class.

不是我能看到的。我目前正在构建一个使用<form>s的 Web 应用程序，但我正在使用它们，因此如果用户禁用了 JavaScript（e.preventDefault正常停止表单发布），我有一个回退方法。对于您的情况，您说用户必须拥有 JavaScript，<form>标签不是必需的，但无论如何保留它可能是一个想法，以防浏览器需要对它做任何事情，或者作为某种方式访问​​它班级。

In short, no, you don't need to use <form>if you're doing pure AJAX, although leaving it in might an idea if you suddenly decide to create fallback code in the future.

简而言之，不，<form>如果您正在执行纯 AJAX，则不需要使用，但如果您将来突然决定创建回退代码，则保留它可能是一个想法。

回答by aorcsik

In my opinion: If you use it for semantic reasons, then use it as intended. The action attribute is required (also can be left empty) to be well-formed, also you can separate your URI-s from your js logic, by setting the action attribute, and reading it before the ajax call.

在我看来：如果您出于语义原因使用它，则按预期使用它。action 属性需要（也可以留空）格式正确，您也可以通过设置 action 属性将 URI-s 与 js 逻辑分开，并在 ajax 调用之前读取它。

回答by Brian Patterson

I don't see why you would need to use the form tag here. The only reason to use a form tag (other than to get your markup to validate) is if you are going to have the user "submit" the data using a sumbit input or button tag. If you don't need to do that, then there is no need for the form. However, not sure if it will be considered "valid" markup. If you do use it you can just do <form action="">as action is the only required attribute of the form tag. However, you do bring up a good point, the future of web applications probably will no longer need the form and traditional submit methodology. Very interesting, and makes me happy. hehe :)

我不明白为什么你需要在这里使用表单标签。使用表单标签的唯一原因（除了让您的标记进行验证）是如果您要让用户使用 sumbit 输入或按钮标签“提交”数据。如果您不需要这样做，则不需要表格。但是，不确定它是否会被视为“有效”标记。如果您确实使用它，您就可以这样做，<form action="">因为 action 是表单标记的唯一必需属性。但是，您确实提出了一个很好的观点，未来的 Web 应用程序可能不再需要表单和传统的提交方法。非常有趣，让我很开心。呵呵 ：）