Update: This post is ancient, with CSS3 and HTML5 there are much nicer ways to achieve similar things.
When you use HTML forms it is often desirable to pre-fill some input fields. Your idea could be that you want to give your visitors some clue to what they're supposed to fill in.
This looks nice, for example:
When the user clicks into the field you'll want to remove the clue. The obvious way to do this is to add an onclick JavaScript command:<form> <input onclick="this.value=''" type="text" value="Your email"> </form>
The user can still access the input field through other means than clicking. He can use the tab key for example. That's why usually the onfocus event is more useful:
<form> <input onfocus="this.value=''" type="text" value="Your email"> </form>
This seems to work nicely. However there's still a problem. When a user fills in his email address, reads a little more on your site and clicks the input field again, his address will be removed again! So to make sure this doesn't happen we add a little check for the content of the field:
<form> <input type="text" value="Your email" onfocus="if (this.value == 'Your email') {this.value=''}"> </form>
And here it is:
Restore default value if nothing is entered
Ok, now this is working. However, when your visitor decides not to input any data, the field stays empty. If you have no label for the input he or she might forget what the field was for. We fix this by restoring the default value when the input field is left:
<form> <input type="text" value="Your email" onblur="if(this.value == '') { this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.value=''}"> </form>
Thanks to Ray for his example linked in the comments.
Select onclick
But sometimes this isn't the best solution. It could be more desirable to highlight the content of the input field if you're offering some kind of search. The user may not want to start a new search but to modify the existing one. By highlighting the input field the user can choose to either empy it by starting to type or to modify it by using the arrow keys.
<form> <input onclick="this.select()" type="text" value="Your previous searcj"> </form>
Using onclick here makes sense as the content is selected anyway if you use the tab key to access it. Webkit-based browsers also don't handle onfocus nicely.
Dynamic input color
This is a little advanced. Let's assume you want the default value to be in a different color and change it onclick. This is one working solution:
<form> <input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''}"> </form>
Keep in mind that this might create problems when you reload the page. Some browsers will remember the value of the input field, and the color will be different even though the field does not contain the default value. Fixing that is beyond the scope of this post. See onload and domready events.
I am Nicolas Kuttler, a web developer, system administrator and IT consultant from France, currently living in Germany.
heres the code im using
<input style="color: #C0C0C0" onclick="this.value=''" type="text" name="fname" value="First Name" onblur="if(this.value == '') { this.value='First Name'}" onfocus="this.style.color='#000'; if (this.value == 'First Name') {this.value=''}"">
thank you on post but i have problem in IE.
How to get "Restore default value if nothing is entered" in in IE without "Allow blocked content" when IE restrict script running? Do i need some more script?
Thank you...
Top job,
Alan
Venkat
<li>Home</li>
<li>Contact</li>
<li class="navbar_right">
<input id="search_box" type="text" value="Search" onblur="if(this.value == '')
{ this.value='Search'}" onfocus="if (this.value == 'Search') {this.value=''}, ">
</li>
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-placeholder