如何使用预先填写的“说明”创建HTML表单当用户点击该框时清楚了吗？ [英] How to create an HTML form with pre-filled in "instructions" that clear when a user clicks in the box?

问题描述

我有一个HTML表单：

I have an html form:

   <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>

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

What I would like is 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 I achieve this?

推荐答案

您要查找的功能称为占位符。 （如果没有别的，只要知道这个词会帮助你在Google中搜索更多信息）

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)

在支持HTML5的现代浏览器中，这是一个内置功能，如下所示：

In modern browsers which support HTML5, this is a built-in feature which you can use very easily, as follows:

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

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

However, this method only works with up-to-date browsers which support this feature.

旧版浏览器需要有一些Javascript代码才能完成。幸运的是，您可以使用许多脚本，包括一些以JQuery插件编写的脚本。我推荐的是那些绑定到输入字段中的占位符属性的属性，以便您可以在具有此功能的浏览器中进行本地支持并回退给那些不支持的人。

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 placeholder attribute 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.

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

这篇关于如何使用预先填写的“说明”创建HTML表单当用户点击该框时清楚了吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！