当使用Ajax提交表单时，为什么需要使用表单标签？

Question

哲学问题：

假设我有一个需要使用JavaScript和现代浏览器的Web应用程序，因此渐进增强不是问题。如果我的表单是通过JavaScript构建的，并且我的数据更新都是通过ajax POST和PUT完成的，那么真的有必要在控件周围包装form标签吗？如果我仍然要使用标签，例如出于语义或结构原因，是否有必要有我将要忽略的action和method参数？对我来说，这感觉像是早期时代的一种遗留问题。

- sprugman

---

我猜不是这样的...没有理由需要它们，虽然它们很有用，但为控件而拥有它们相当愚蠢... 你总是可以放一个空白的有效表单，像这样：<form action="#" method="post" onsubmit="return false;"> </form> - Omer Tuchfeld

你可以让操作跳转到一个页面，上面写着“该网站需要JavaScript支持，但您的浏览器未执行JavaScript。请升级您的浏览器或启用JavaScript。” - user684934

无法确定特定表单元素对可访问性/屏幕阅读器软件产生影响的情况。 - Alex K.

我相信你只需要使用 disabled="disabled" 来禁用提交按钮。 - Brian Patterson

Answer 1

将输入框包含在

标签内，至少能够提供一个重要的用户体验特性：

回车键可以提交表单。实际上，在Mobile Safari中，这也是您如何获得"Go"按钮在键盘上出现的方法。.

如果没有表单包装输入框，就没有东西可以提交。

您当然可以通过keypress事件提供回车键行为，但我不知道这是否适用于移动设备。我不知道您怎么看，但我宁愿使用浏览器提供的语义而不是必须使用事件来模拟它们。

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

您可以简单地提供action = ""（表示"self"），并且method不是必需的-它默认为GET。

- Nicole

---

+1 -- 当我看到这个问题时，这正是我所想的。 - Reid

@Brian - 发帖者说“数据更新是通过ajax POSTS和PUTS完成的”。这很明显意味着提交，只是不需要页面刷新。仅仅因为你不想要页面刷新并不意味着你不想要相同的用户体验。 - Nicole

但是，如果您考虑到垃圾邮件机器人可能会访问您的表单...那么您可能不会添加操作或方法属性。其中70％不使用JavaScript。 - Abdalla Arbab

return false 并不能取消实际的提交。只有使用 e.preventDefault()（其中 e 是提交事件）才能真正取消提交。请参见 https://dev59.com/nFkS5IYBdhLWcg3wdmrC#39841238。 - João Fé

Answer 2

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

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

例如，如果您想要ajax提交某些用户输入，总是比较容易说：“让我们把这个表单中的所有元素提交”而不是“让我们把这个输入、这两个选择和这三个文本区域提交”。根据我的经验，form标签实际上对开发人员有所帮助。

- kapa

---

没错，在某些情况下，您不需要在客户端提交表单之前进行串行化，然后在服务器上进行反序列化。有时，您只需要提交一些值，而服务器上没有相应的模型。在这种情况下，我选择不使用表单。 - Matthew Pitts

您的表单可能存在重叠值。一个表单可能有多个名为“选项”的字段，其中每个选项的值都是自动递增的ID。如果没有将<form>设置为包装器，当尝试从表单的输入选项中获取特定值时，您可能会在操作时互相干扰，因为很容易出现值为1、2、3等的情况。 - pspahn

Answer 3

AJAX很棒，但正如JamWaffles所说，使用form标签可以提供备选方法。

个人而言，即使对于我用AJAX提交的东西，我也使用表单标签，因为它在语法上是清晰的，容易获取特定表单中的所有输入。是的，你也可以用div或其他标签来做到这一点，但正如我所说，使用表单在语法上更加优雅。

顺便说一下，屏幕阅读器会以不同的方式处理form内的内容，所以无论你采取哪种方式，都需要考虑可访问性问题。请注意，有传言称Google在其排名中考虑可访问性，因此如果SEO是您关心的问题，请使用表单并正确操作。

- Endophage

---

这是目前为止最好的答案，不是当前评论列表中排名第一的答案。 - Brian Patterson

Answer 4

摘要： 对于MVC、简单的Web应用程序而言，表单是可以使用的；但对于组件化、丰富的Web应用程序而言，表单就不太适合了。

原因： 表单不能嵌套其他表单：这对于面向组件的架构来说是一个很大的限制。

详情： 对于典型的MVC应用程序，表单非常适用。但在使用大量JavaScript和AJAX以及各种组件的复杂Web应用程序中，我不喜欢使用表单。原因是表单不能嵌套其他表单。如果每个组件都渲染一个表单，那么组件之间就无法嵌套。这太糟糕了。通过将所有表单更改为div，我可以嵌套它们，并且每当我想要获取所有参数以便将它们传递给ajax时，我只需执行以下操作（使用jQuery）：

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

（或一些其他过滤器）

而不是：

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

尽管出于情感和语义原因，当我的div充当表单时，我仍然会将它们命名为something_form。

- Alex Jurado - Bitendian

---

是的，在某些情况下，无法嵌套表单是一个巨大的限制。我几乎总是使用表单标签，但在我看来，如果它会让你的生活变得困难，你绝对应该考虑不使用它。 - Joel M

Answer 5

我目前没有发现需要使用<form>标签。我正在构建一个使用<form>的Web应用程序，但我使用它们是为了在用户禁用JavaScript时有一个备用方法（e.preventDefault可以阻止表单正常提交）。对于你的情况，你说用户必须启用JavaScript，所以不需要使用<form>标签，但是保留它可能是个好主意，以防浏览器需要做任何事情，或者作为一种类访问它。

简而言之，如果你只是进行纯AJAX操作，则不需要使用<form>，但是如果你突然决定创建回退代码，保留它可能是个好主意。

- Bojangles

---

我相信你可以使用 disabled="disabled" 来禁用提交按钮。 - Brian Patterson

Answer 6

个人认为：如果您出于语义原因使用它，那么请按照预期使用它。动作属性是必需的（也可以留空），以便格式正确，还可以通过设置操作属性并在ajax调用之前读取来将URI与js逻辑分开。

- aorcsik

Answer 7

我不明白为什么你需要在这里使用表单标签。除了让你的标记验证通过之外，唯一使用表单标签的原因是如果你将使用提交输入或按钮标签“提交”数据。如果你不需要这样做，那么就没有必要使用表单了。但是，不确定它是否被视为“有效”的标记。如果你确实需要使用它，你可以只写 <form action="">，因为action是表单标签的唯一必需属性。然而，你提出了一个很好的观点：未来的网络应用程序可能不再需要表单和传统的提交方法。非常有趣，让我感到高兴。呵呵:)

- Brian Patterson