单页应用和<form>元素

Question

仍然有使用<form>元素的好处，尤其是在单页应用程序的情况下。如果“表单”提交不是使用ajax调用完成的（我谈论的是更传统的表单提交方式，使用一个type为“submit”的输入/按钮和表单元素的action属性描述要调用的url），那么<form>元素的目的很容易理解，但除此之外，它在一些方面也是有用的（例如搜索引擎）。相较之下，<div>元素是没有这些功能的。

- user1834464

---

1. 表单元素可以清晰表达您的意图。
2. 有些方法只适用于表单，比如 serialize()。

- AmmarCSE

就我所知，你所说的“serialize”方法是来自于PHP吗？ - user1834464

不好意思，我的意思是从jQuery。抱歉，我应该表述清楚的。 - AmmarCSE

啊，没问题！令人惊讶的是，我从未使用或需要过这种方法，但知道这个方法还是很好的。 - user1834464

Answer 1

1. 从语义上讲，使用<form>比<div>更清晰。
2. 如果你仍然希望你的表单在没有JavaScript的情况下工作，最好选择<form>（因为你使用了“应用程序”这个词，尽管可能不考虑这一点）。
3. 更重要的是，如果你关心可访问性，使用<div>会非常痛苦。

- Leo

---

太好了！如果有人对于在单页应用程序的上下文中，表单元素比div更适合实际表单有更多的论据，请不要犹豫，在下面评论区留言。 - user1834464

无障碍应该是必须的。使用语义化的HTML标记和相关属性可以轻松实现SEO和无障碍符合性。当框架因为使用正确的标记而出现故障时，很明显制造商一开始就没有理解HTML的本质，这让我想知道还有哪些“宝石”在里面等着破坏符合性和SEO。 - Roralee

不要使用 <button type="submit">提交</button>，而是使用 <button type="button">提交</button>。这样做会非常顺畅，而且当您想要发送数据时，您不需要任何额外的 JS 来重新启用表单提交。 - Roralee

一个单页应用程序如果没有JavaScript会如何运作？ - Chris Weber

Answer 2

我认为答案是否定的，如果你不打算“提交”表单，那么就没有必要使用<form>标签。很多时候，我们的交互控件所在的位置并不被视为一个“表单” - 复选框在这里，选择菜单在那里。我认为大部分控件在没有<form>标签的情况下也能正常工作。

至于无障碍性，我对此一无所知。

- OsamaBinLogin

---

无障碍功能是基于语义化的HTML标记和属性自动构建的。如果您不能使用正确的标记，将会损害您的应用程序体验、SEO和无障碍符合性。 - Roralee