TABINDEX and a Couple of Other Form Tricks

By Joe Burns

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="text text text 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. Dig this. Click on the text box below...the one with all of the text in it.

Ta da! No text. 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.


That's That

So, there you go. You've got a few new form tricks to add to your bag. These are solid tricks that actually add usability to your pages. How often can you say that?

 Enjoy!




Page 2 of 2

Previous Page
1 2
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date