Question

我有一个HTML格式：

   <form method="POST" action="http://">
 Username: <input type="text" name="username" size="15" />
 Password: <input type="password" name="password" size="15" />
<input type="submit" value="Login" />
 </div>
 </form>

我想要的是这样的功能，即文本字段中包含的说明在用户单击框中时会清除，这样我就可以节省空间并从表单外部删除用户名和密码。我怎样才能做到这一点？

Answer 1

您正在寻找的功能称为“占位符”。（如果没有别的，只知道这个术语将帮助您在Google中搜索更多信息）

在支持HTML5的现代浏览器中，这是一个内置功能，您可以非常轻松地使用，如下所示：

<input type='text' name='username' size='15' placeholder='User name' />

但是，此方法仅适用于支持此功能的最新浏览器。

较旧的浏览器需要有一些Javascript代码才能执行此操作。幸运的是，您可以使用许多脚本，包括一些编写为JQuery插件的脚本。我推荐的那些是与输入字段上的placeholder属性相关联的那些，因此您可以在具有此功能的浏览器中原生支持它，而对于那些不具有此功能的浏览器则可以回退到Javascript。

试试这个：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 2

如果您使用HTML5，则可以使用placeholder属性执行此操作：

<form method="POST" action="http://">
    <label for="username">Username:</label> 
    <input placeholder="Username" id="username" name="username" size="15">
    <label for="password">Password:</label> 
    <input placeholder="Password" type="password" id="password" name="password" size="15">
    <input type="submit" value="Login">
</form>

我仍然会在<label>标记中包含用户名和密码文本以便访问，但您可以随时使用以下某些CSS隐藏它们：

form {
    position:relative;
}
label {
    position:absolute;
    top:-9999px;
}

Answer 3

这些通常称为水印，需要javascript。

查看jQuery-watermark插件。

Answer 4

我写了一个自定义的，因为我想要一个特定的行为。

https://90dayjobmatch.com/js/jquery.wf.formvaluelabel.js

用法：

$('#signup_job_title').formvaluelabel({text:'eg. Graphic Artist'});

如果您对此有任何疑问，请与我们联系。

HTH

Answer 5

正如其他人所指出的那样，HTML5中有一个允许这个名为placeholder的属性 - 请在此处阅读：

这不需要Javascript，但旧浏览器不支持它（请参阅http://caniuse.com/#feat=input-placeholder）。

应该注意的是，占位符不意味着要替换<label> s，您没有使用它们，而且可能应该这样。{/ p>

<label for="username">Username:<label>
<input type="text" id="username" name="username" placeholder="Enter your username" size="15" />

由于各种原因，标签很重要，不使用它们是不好的做法。

如何使用预先填写的“说明”创建一个HTML表单，该表单在用户点击框中时会清除？

5 个答案: