单页应用程序和 <form> 元素

Posted 2023-03-05

【中文标题】单页应用程序和 <form> 元素

【英文标题】：Single page applications and <form> elements

【发布时间】：2015-09-19 09:04:10

【问题描述】：

在单页应用程序的上下文中使用<form> 元素而不是<div> 元素还有什么好处吗？如果“表单”提交不是通过 ajax 调用进行的，<form> 元素的目的对我来说是有意义的（我说的是更传统的提交表单的方式，输入/按钮类型为“提交” " 以及描述要调用的 url 的表单元素的 action 属性），但除此之外我看不到它的实用性（也许对于搜索引擎？）。

【问题讨论】：

1.表单元素明确您的意图。 2. 某些方法只适用于serialize()

等形式

供我参考，您所说的“序列化”方法是来自 php 吗？

不，我的意思是来自 jquery。抱歉，应该说清楚

啊，没问题！令人惊讶的是，我从未使用或需要这种方法，但很高兴知道。

【参考方案1】：

我认为答案是，不，如果您不打算“提交”表单，则不需要

辅助功能，我什么都不知道。

【讨论】：

辅助功能是基于语义 html 标记和属性自动内置的。如果您不能使用正确的标记，您将损害您的应用程序的体验、搜索引擎优化和可访问性一致性。

【参考方案2】：

从语义上讲，使用<form> 比使用<div> 更清晰。 如果您仍然希望您的表单不使用 javascript，您最好选择<form>（因为您使用了应用程序这个词，虽然这可能不考虑)。 更重要的是，如果您确实关心可访问性，那么使用<div> 会非常痛苦。

【讨论】：

完美！如果有人对为什么表单元素比实际表单中的 div 更好的争论有更多的争论，在单页应用程序的上下文中，请不要犹豫在下面发表评论。

辅助功能不应该是可选的。使用语义 HTML 标记和相关属性轻松实现 SEO 和可访问性一致性。当框架在使用正确标记时出现故障时，很明显制造商一开始并不了解 HTML 的本质，这让我想知道那里还有哪些其他“宝石”在等着搞乱一致性和 SEO。

使用 Submit 代替 Submit。它就像一个魅力，当你真正想要发送数据时，你不需要任何额外的 JS 来重新启用提交表单。