Form Trick: Disappearing Text

You should see "You@YourISP.com" in the form field below. If you click your cursor inside the text box, the sample text should disappear if your browser supports JavaScript, and most do. This allows you to set sample text inside a text box and have it disappear when your visitor clicks inside the text box to type their own input. This saves your visitor the trouble of having to clear your sample text before typing. It's as simple as adding an "on focus" command to your form field:

 onFocus="this.value=''"

So, for the above form field, the entire form element is coded like this:

<input type="text" name="email" 
 value="You@YourISP.com" size="24" 
 onFocus="this.value=''">

< The "value" is what will appear inside the text box when the page is loaded. The onfocus value is empty, so when focus is placed in the text box, which is merely the act of the user clicking inside of it, it empties the textbox.

Piece of cake, eh Rumplestiltskin?

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]