Tutorial: FORM TRICKS

TABINDEX, Focus onLoad and Lose the VALUE Text
Article by Joe Burns

This article is online:
http://www.htmlgoodies.com/tutorials/forms/article.php/11895_3479201_2

Lose the VALUE Text

You'll note up above that I have placed text inside the text boxes in the example form. I see this done a lot. You get that text by adding the attribute VALUE="some text" to the input tag.

Have you ever been to a form that had text in a box you were supposed to write in? The problem is that you click on the text box and the text remains. You need to highlight and erase all that text before you can put in your own text.

Well, erase no more. Click in the text box below... 

Ta da! Text is gone! 

Here's what the code looks like:

<FORM> <INPUT TYPE="text" VALUE="This is text in a text box" SIZE="45" onFocus="this.value=''"> </FORM>

It's a little blip of JavaScript that does the trick. I have it in bold above. When focus is brought on the box (onFocus), the value of the box (this.value) is set to nothing. Note the empty quotes at the end of the code. Make a point of having the quotation marks right up next to one another like I do. If you have space between them, then that space will appear in the form element.

These great tricks will add usability to your pages. 

- TABINDEX - The Command in Action

- Focus onLoad

- Lose the VALUE Text

Get PLUMB - Blink - In My Arms 

  Listen to or visit PLUMB at MySpace.com/plumb

codepost
forms
blog
Plumb

<< code post