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

Question

I have an HTML form as follow:

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

Answer 1

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: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 2

If you use HTML5 you can do this using the placeholder attribute:

<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 Username and Password text wrapped in <label> tags for accessibility, but you could always hide them with some CSS like this:

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