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:

   

 Username: 
 Passwor         


        

Answer 1

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

Answer 2

As others have noted, there is an attribute in HTML5 that allows this called placeholder - read about it here:

• http://diveintohtml5.info/forms.html

• http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute

This does not require Javascript, but it is not supported by older browsers (see http://caniuse.com/#feat=input-placeholder).

It should be noted that placeholder is not meant to replace <label>s, which you are not using and probably should be.

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

Answer 3

These are commonly called watermarks and require javascript.

Look at the jQuery-watermark plugin.

Answer 4

I wrote a custom one because I wanted to have a specific behaviour.

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

Answer 5

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