Melanie Shebel Melanie Shebel - 4 months ago 5x
HTML Question

How to create an HTML form with prefilled in "instructions" that clear when a user clicks in the box?

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

What I need to do to make it so 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?


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)

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.

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.

Try this one: