如何创建一个预填充“说明”的 HTML 表单，当用户单击该框时会清除这些“说明”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5802030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create an HTML form with pre-filled in "instructions" that clear when a user clicks in the box?
提问by Melanie
I have an HTML form as follow:
我有一个 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>
I would like functionality such that the text fields have instructions in them that clear when a user clicks in the box so that I can save space and remove the words Username and Password from outside the forms.
我想要这样的功能，即文本字段中有说明，当用户在框中单击时会清除这些说明，以便我可以节省空间并从表单外部删除用户名和密码这两个词。
How can this be achieved?
如何做到这一点？
回答by Spudley
The feature you're looking for is called a "placeholder". (if nothing else, just knowing this term will help you search for more info in Google)
您正在寻找的功能称为“占位符”。（如果不出意外，只要知道这个词就可以帮助您在 Google 中搜索更多信息）
In modern browsers which support HTML5, this is a built-in feature which you can use very easily, as follows:
在支持 HTML5 的现代浏览器中，这是一个您可以非常轻松地使用的内置功能，如下所示：
<input type='text' name='username' size='15' placeholder='User name' />
However, this method only works with up-to-date browsers which support this feature.
但是，此方法仅适用于支持此功能的最新浏览器。
Older browsers will need to have some Javascript code to do it. Fortunately, there are a number of scripts you can use, including some written as JQuery plug-ins. The ones I'd recommend are those which tie into the placeholderattribute on the input field, so that you can support it natively in the browsers which have this feature and fall-back to Javascript for those that don't.
较旧的浏览器需要一些 Javascript 代码才能做到这一点。幸运的是，您可以使用许多脚本，包括一些编写为 JQuery 插件的脚本。我推荐的是那些placeholder与输入字段上的属性相关联的那些，以便您可以在具有此功能的浏览器中本地支持它，并为那些没有的浏览器回退到 Javascript。
Try this one: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
试试这个：http: //www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
回答by Ian Oxley
If you use HTML5 you can do this using the placeholderattribute:
如果您使用 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>
I'd still include the Usernameand Passwordtext wrapped in <label>tags for accessibility, but you could always hide them with some CSS like this:
我仍然会将用户名和密码文本包含在<label>可访问性标签中，但您始终可以使用一些 CSS 来隐藏它们，如下所示：
form {
position:relative;
}
label {
position:absolute;
top:-9999px;
}
回答by Oded
These are commonly called watermarks and require javascript.
这些通常称为水印，需要 javascript。
Look at the jQuery-watermarkplugin.
查看jQuery-watermark插件。
回答by Homer6
I wrote a custom one because I wanted to have a specific behaviour.
我写了一个自定义的，因为我想有一个特定的行为。
https://90dayjobmatch.com/js/jquery.wf.formvaluelabel.js
https://90dayjobmatch.com/js/jquery.wf.formvaluelabel.js
Usage:
用法：
$('#signup_job_title').formvaluelabel({text:'eg. Graphic Artist'});
Let me know if you have any questions about it.
如果您对此有任何疑问，请告诉我。
HTH
HTH
回答by Wesley Murch
As others have noted, there is an attribute in HTML5 that allows this called placeholder- read about it here:
正如其他人所指出的，HTML5 中有一个属性允许调用placeholder- 请在此处阅读：
This does not require Javascript, but it is not supported by older browsers (see http://caniuse.com/#feat=input-placeholder).
这不需要 Javascript，但旧浏览器不支持它（请参阅http://caniuse.com/#feat=input-placeholder）。
It should be noted that placeholder is notmeant to replace <label>s, which you are not using and probably should be.
应该注意的是，占位符并不是要替换<label>s，您没有使用它，可能应该使用它。
<label for="username">Username:<label>
<input type="text" id="username" name="username" placeholder="Enter your username" size="15" />
Labels are important for a variety of reasons and it is bad practice to not use them.
标签很重要，原因有很多，不使用它们是不好的做法。
