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

Question

哲学问题：

假设我有一个需要 javascript和现代浏览器的网络应用程序，因此渐进式增强不是问题。如果我的表单是通过javascript构建的，我的数据更新都是通过ajax POSTs＆amp; PUT，是否有任何理由将我的控件包装在表单标签中？如果我仍然要使用标签，比如说出于语义或结构原因，是否有任何理由要采取我将忽略的动作和方法参数？从我早期的时代开始，这种感觉就像是一种拖延。

Answer 1

至少有一个重要的用户体验功能是通过将输入包装在表单标记内来提供的：

回车键会提交表单。事实上，在Mobile Safari中，您可以通过以下方式获取“Go”按钮to appear on the keyboard。

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

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

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

您只需提供action=""（表示“自我”），并且不需要method - 默认为GET。

Answer 2

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

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

例如，如果你想ajax-提交一些用户输入，那么总是更容易说：“让我们采用这种形式的所有元素并提交它们”而不是说“让我们接受这个输入，这两个选择和这三个textareas并提交他们“。根据我的经验，如果form标签存在，它实际上有助于开发人员。

Answer 3

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

我个人使用表单标签，即使是我用AJAX提交的内容，因为它在语法上是清晰的，并且可以轻松获取特定表单中的所有输入。是的，您可以使用div或其他任何方式执行此操作，但正如我所说，使用表单在语法上很好。

顺便提一句，屏幕阅读器会以form内容对待内容，因此无论您选择哪种方式，都会考虑无障碍问题。请注意，轶事证据表明Google在其排名中考虑了可访问性，因此如果SEO是您的关注点，请使用表单并正确执行。

Answer 4

要点：   表单可以用于MVC，简单的Web应用程序，不适用于面向组件的丰富Web应用程序。

原因：   表单不能嵌套其他形式：面向组件的体系结构的大限制。

详细说明：   对于典型的MVC应用程序，表单很棒。在使用大量javascript和AJAX以及大量组件的丰富，复杂的Web应用程序中，我不喜欢表单。原因：表单无法嵌套其他表单。然后，如果每个组件呈现一个表单，组件就不能互相嵌套。太糟糕了。通过将所有表单更改为div，我可以嵌套它们，每当我想要获取所有参数以便将它们传递给ajax时，我就这样做（使用jQuery）：

。

$（ “＃id_of_my_div”）找到（ “[名称]”）序列化（）;

（或其他一些过滤）

而不是：

$（ “＃id_of_my_form”）序列化（）;

尽管出于感性和语义原因，我仍然在将divs作为表单时将其命名为something_form。

Answer 5

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

简而言之，不，如果您正在使用纯AJAX，则不需要使用<form>，但如果您突然决定在将来创建回退代码，则可能会留下它。

Answer 6

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

Answer 7

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