如何在文本字段中为用户名和密码设置标签？答案

【问题标题】：How to set labels inside textfields for username and password?如何在文本字段中为用户名和密码设置标签？
【发布时间】：2011-03-31 02:04:24
【问题描述】：

我的网站有一个登录表单。此登录表单有两个文本字段，用户名和密码。目前我将标签（用户名，密码）放在文本字段之前。但现在我想删除这两个标签，并想在文本字段中显示文本（用户名，密码）。当用户关注这些文本字段时，文本应该被删除，用户可以输入他想要的用户名和密码。

我还注意到，当用户打开登录表单时，文本字段（用户名，密码）中填充的文本（用户名，密码）的字体颜色是不同的颜色，当用户开始在该字段中输入时，之前的文本被删除，并且新字体颜色为黑色。

这怎么可能？

【问题讨论】：

【解决方案1】：

您可以使用 jQuery 插件，例如 one 或 one

这些可以满足您的需要，我认为它们都支持单独的水印样式。

【讨论】：

【解决方案2】：

您需要在 html/php/asp 文件中为您的用户名和密码字段设置“值”。在 CSS 中设置默认样式，颜色为灰色。

然后你需要为 for 元素设置 onFocus 代码。您需要将其设置为类似

this.value = ''; this.style.color = 'black'

您可能还想为 onBlur（当该框离开时）添加一些代码，以检查该字段是否为空，然后执行类似的操作

if(this.value == ''){ this.value = 'User Name'; this.style.color = 'grey' }

【讨论】：

【解决方案3】：

有关使用 YUI3 和 jQuery（但不能同时使用）的可访问示例，请参阅 http://dorward.me.uk/tmp/label-work/，我将在某个阶段适当地记录这些示例。

本质上，使用 CSS 将标签定位在输入下方，并使用 JS 在其上翻转类。

（比较常见的做法是用JS改变输入的value，但是这样有可访问性问题）

【讨论】：

【解决方案4】：

为用户名字段设置值是好的，但是当您尝试对密码字段执行相同操作时会遇到各种问题；这不是我推荐的方法。

正如 CeeJeeB 建议的那样，will 非常适合您的需求

【讨论】：