表单上的标签放置

在创建网页表单时，您必须做出的众多选择之一是您将如何对齐标签和输入。 这不是一个微不足道的决定，因为此放置会影响表单的可读性/可用性、完成率、完成速度，以及最终尝试完成表单的用户的满意度。 但是，对标签如何对齐存在一个最终答案吗？ 并非如此，它取决于您表单的具体需求以及页面的设计约束。

让我们看一下不同的选择，并看看每个选择的优势。

顶部对齐的标签

大多数信息表明，顶部对齐的标签将导致最快的完成时间、最少的用户混淆以及最少的无关眼球运动。 顶部对齐标签的另一个优点是它为标签提供了大量的水平空间。 如果您的表单将来会翻译或以其他语言提供，此额外的空间至关重要。 像法语这样的语言的标签长度可以是英语对应词的两倍。

顶部对齐的标签听起来确实是一个好方法，而且它们确实很好，除非垂直空间开始起作用。 如果您的表单长度中等，当您开始累加标签、输入以及它们之间的空间（需要更大一些以将字段彼此分开）时，您会很快变得很高。 如果您的表单需要大量向下滚动，那么快速完成时间将会减少。

左对齐的标签

左对齐的标签的优点是，最容易快速扫描标签值。 由于它们都在一个漂亮的垂直行中，并且没有被输入分割，因此用户可以快速扫描每个标签并了解表单。 当表单要求输入不常见的数据时，这可能非常理想，并且需要清楚地理解每个标签。 左对齐标签的优势在于它们所需的垂直空间少得多，因为每个标签和输入对都在一个细小的垂直行中。 但是，这些节省的垂直空间是以需要更多水平空间为代价的。 您网站的设计很可能会有最终决定权。

左对齐标签的最大缺点是研究表明它们具有最慢的完成时间。 这可能是因为标签和输入字段之间的视觉距离。 标签越短，它距离输入就越远。 我建议如果您选择左对齐标签，请整合当前字段突出显示 (文章/演示)。 还要记住，缓慢的完成率并不总是坏事，尤其是如果表单需要不熟悉的数据。 如果您询问诸如驾驶执照号码或序列号之类的东西，您可能希望隐式地让用户稍慢一些，并确保他们正确输入。

右对齐的标签

右对齐的标签具有与左对齐标签相同的空间优势/劣势：需要更多水平空间，但需要更少的垂直空间。 此外，语言问题再次出现，如果表单需要多语言支持，可能会出现间距问题。 右对齐标签的最大优点是标签和输入之间的强烈视觉联系。 对于较短的表单，右对齐标签可以有很高的完成时间。 有时速度是左对齐标签的两倍，左对齐标签存在固有的标签和输入之间视觉联系较少的问题。

右对齐标签的缺点来自可扫描性和舒适度。 您的表单将缺少那个硬的左边缘，这使得它看起来不太舒服，也更难阅读。 但是，对于具有熟悉数据的短表单来说，这可以最小化，因此可能不会造成问题。 不过，对于具有较长的问答式标签和不熟悉数据的表单来说，这肯定会是一个问题。

更多提示

• 无论您选择哪种方式，将标签设为 块级 元素而不是默认的 内联 都是有意义的。
• 对于单个网站上的所有表单，选择一种对齐方式并坚持使用它。 一致性比您选择的对齐方式更重要。
• 如果您需要打破一致性，您应该有一个充分的理由。

更多资源

• 想找一个简单的可下载表单来开始吗？ 从 CSS Karma 下载简单的联系表单。
• 这些想法很多都来自 Luke Wroblewski 的精彩著作 Web Form Design
• Luke 关于标签对齐的 文章。
• 关于标签对齐的 眼动追踪研究