Make Default Text in Form Field Disappear on Focus

It can be useful to prefill your input fields and textareas with little hints or reminders. For example if you have a general contact form and a textarea labeled “Message:”, you may want to prefill that textarea with something like “Your positive comments or constructive criticism here.”

You can do that just by including text within your tags:

<textarea name="message" rows="20" cols="20">Hint goes here.</textarea> <input type="text" name="name" size="20" default="your name" >

You can add a little Javascript to clear that hint away when the user clicks inside that box. This little code snippet also only allows that to happen once, so if the user clicks away and then back in, they won’t lose what they have entered.

<textarea name="message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Hint goes here.</textarea> <input type="text" name="name" size="20" default="your name" onfocus="this.value=''; this.onfocus=null;" >

This tip came from Chris Coyer at CSS-Tricks.