Form Textboxes

I was wondering if anyone knew how to do those textboxes where it says something like "enter text here" and as soon as you click on the textbox this text disappears?

 

Try

<input type="text" value="Enter your text" onfocus="value=''" name="textfield" size="20">

HTML:

 

Will that be the same for <textarea> ?

yes it is

 

Never tried it but would assume so.

Its the

value="Text" onfocus="value=''"

HTML:

that makes it work so as long as you add that it should be fine.

 

Thanks Dave, that's great

 

Hi Weirfire

The onfocus event fires again if the user switches input fields and returns to amend their input (rather annoying for the user if they only wanted to correct a typo in a long input field). You need to turn off the onfocus event after the first firing. This would do the trick.

 
onfocus="this.value='';this.onfocus='';"

Code (markup):

Cheers

Mick

 

Thanks Arnica

These little tricks are great for usability

 

You could also do this if they clear out the textfield after putting stuff into it:

<input type="text" name="textfield" onfocus="if (this.value=='Enter text') { this.value = '';}" onblur="if (this.value=='') { this.value = 'Enter text'; }" value="Enter text">

Code (markup):

 

Thanks durango.

Seems everyone knows these tricks already except me.

 

If you're looking at quite a complicated HTML form, I would also encourage you to use Javascript form validation - much less annoying for the user in my opinion. There are plenty of prewritten examples around. I can't find the original I used but you can find some if you Google it.

You would also obviously have to implement server side validation for browsers that don't support Javascript.

- Jamie