如果我不提交数据，我应该使用FORM元素吗？适当的（X）HTML标记

Question

在我的Web应用程序中，我有一个用户配置文件页面。该页面包含以下元素：

• 连接Twitter
• 连接Facebook
• 选择时区
• 选择语言

前两个元素会弹出OAuth窗口，允许用户进行连接。后两个元素将使用AJAX保存。

在制作页面时，我应该如何编写HTML？我认为所有项目都应该是'ul'元素中的<li>元素，而不是每个项目分别使用单独的'div'或'p'元素。 但是，我应该使用什么容器元素？我正在考虑使用'div'或没有操作的'form'。 我正在收集一些数据，这是使用'form'元素的理由，但实际上不会使用该表单-没有提交按钮。因此，这是反对使用它的理由。

做这个的最佳实践是什么？如果您可以提供一些支持文档的链接，那就更好了。

谢谢！

- cwd

Answer 1

最佳实践是让网站在没有Javascript的情况下工作，然后逐步添加Javascript / AJAX作为增强功能。

渐进增强（Progressive Enhancement）是一种网页设计策略，强调可访问性、语义化HTML标记和外部样式表和脚本技术。渐进增强使用分层的Web技术，允许每个人都可以使用任何浏览器或Internet连接访问网页的基本内容和功能，同时也为那些拥有更好带宽、更先进浏览器软件或更多经验的人提供了一个增强版页面。

因此，如果你关心渐进增强，你应该使用form。

** 如果你不关心渐进增强，在这个答案的评论中讨论过，对于你的情况，无论你喜欢哪个元素都无所谓。

- Michael Robinson

---

是的，我知道渐进增强，我不是在问那个。有些Web应用程序需要JavaScript，比如Facebook。假设这是那种类型的Web应用程序。除了渐进增强之外，您是否有任何支持不使用提交数据的表单的论据？ - cwd

渐进增强仍然适用于时区和语言选择器，因此想法是将它们设置为表单内的输入选择器，以便没有JavaScript的用户仍然可以使用这些控件并提交表单。如果您坚持不使用这些的非JavaScript版本，则无需使用表单元素。在这种情况下，不需要任何特定的容器元素，但如果您想使用div，那也可以。 - joelhardi

谢谢。为了澄清，网络应用程序将需要JavaScript来实现所有功能 - 不仅仅是连接到Facebook。Facebook只是一个主流的Web应用程序示例，如果没有JavaScript，它根本无法运行。最后，我的问题正是您的最后一句话：由于不需要特定的容器元素，我应该使用哪个？我认为，在收集信息的情况下，使用FORM元素仍然比DIV（分区）更符合语义。 - cwd

我会建议使用表单，但如果您不打算使网站在没有JS的情况下正常工作，那么这就无关紧要了。 - Michael Robinson

很好。我会反对使用表单，除非你真的有一个提交表单。对我来说，这不是一个表单，从语义上和（我猜）视觉上都不应该使用表单标签。如果用户在表单子元素具有焦点时按下回车键或在替代浏览器中，可能还会产生副作用。每个可点击的元素都可以独立工作，但如果你想将它们作为页面的一部分进行语义分组，则使用 div。归根结底，这是一个微妙的问题，没有绝对的答案。 - joelhardi

Answer 2

从无障碍的角度来看，不知道您想如何实现，似乎语言选择和时区选择功能需要客户从列表中选择。对于这些，我设想两个小表单。每个表单都包含一个使用for属性的标签标记。这些表单还将具有列表输入标记。最后，它们将具有提交按钮。您将为输入标记提供名称属性。您将把名称属性的值粘贴到标签标记的for属性字符串中。

我设想另外两个项目可能是只有按钮的小表单，可以触发函数。它们也可以是超链接，但无障碍最佳实践可能要求它们不是超链接，以防某人使用不支持脚本的浏览器，或者由于某种原因，某人关闭了脚本。

- jimhomme