关于带占位符的输入字段的可用性答案

【问题标题】：Usability regarding input fields with place holders关于带占位符的输入字段的可用性
【发布时间】：2011-12-31 13:23:40
【问题描述】：

我有一个关于可用性的简单问题。

在文本输入中使用占位符（空文本）的首选方式是：

A) 在用户聚焦该字段之前让它们可见。

B) 在用户输入第一个字符之前让它们可见。

大多数网站都使用选项 A，可能是因为它更容易操作（只需监听焦点事件并清除之前的占位符文本并将文本颜色重置为黑色）。

但是，我看到选项 B 也用于一些随机的地方。在我看来，优点是：

一个

如果您使用制表键导航表单，用户通常会在阅读下一个字段之前按下制表符，在这种情况下，空文本已经消失，用户很难知道要输入什么。他们需要使用 shift-tab 键来取回空文本，然后阅读它，然后使用 tab 键。

另外一个问题：如果使用了选项B，空文本是否应该在用户删除文本后返回（并且仍然具有焦点）？

【问题讨论】：

【解决方案1】：

我肯定会制作像twitter 登录页面这样的输入字段。

它就像你的 B 方式，有一个非常漂亮的动画。

【讨论】：

【解决方案2】：

本着可用性和可访问性的精神，您应该有一个始终存在的<label>。在我看来，占位符文本在用作帮助器或格式指示等时最有效。

例如，您可以有一个请求用户名和密码的登录表单，其中用户名是电子邮件地址。然后，占位符可以是一个示例电子邮件地址，该地址被清除为焦点（但“用户名”标签仍然可见）。

示例（使用 HTML5 占位符属性）：

<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="myemail@email.com" />

【讨论】：