Sometimes it is not totally obvious what you are looking for the user to enter into a text box.

Take this one here:

It is not obvious what we are looking for in this form, By email might is probably an email address. In person is probably an address. Online? That could also be an email address, a skype name, a msn messenger account name, a website…. you get the idea. Other, well, that could be anything, but what is that second box for? To be fair, the form has values in it telling what should be done, I removed those for the sake of the example. That is indeed one way of doing it, but that means that someone has to select all of the text and delete it when they get to that box. I don’t know about you, but I find it a little annoying when I have to do that… So, I started looking for a solution, and I found one that uses jQuery (my javascript library of choice). I could have written it myself of course, its not that hard really:

if(form.input is empty) {
   form.intpu.value = form.input.text
}
if(form.input is clicked){
   form.input.value = ""
}
if(form is unclicked and value = ""){
   form.input.value = form.input.text
}
if(when form is submitted and form.input.value == form.input.text){
   form.input.value == ""
}

I decided to modify that slightly, so that if the form was filled with the value found in text it would be lighter than normal, so:

if(form.input is empty) {
   form.intput.value = form.input.text
   form.css("color", "#999")
}
if(form.input is clicked){
   form.input.value = ""
   form.css("color", "#000")
}
if(form is unclicked and value = ""){
   form.input.value = form.input.text
   form.css("color", "#999")
}
if(when form is submitted and form.input.value == form.input.text){
   form.input.value == ""
}

Here is the final result:

Oh ya, a bonus is that when they hover over it and have javascript turned off it will show the hint as well, and it is screen reader friendly! Accessability is good!

If anyone wants the code I can post it.

• @jcroft Its the shark skins (and the fact that some of them take in 12000 calories/day?) #
• I used to be in good shape, now I can barely even keep up with cars… #
• Shatner Raps ftw!
  http://tinyurl.com/6oehru #
• Why does it always rain when I go for a run? Does the FSM think I smell bad or something? #
• Poor laptop, you served me well, it is time to rest now… #
• Truck tire just exploded next to me,it was loud. #

• I didn’t realise until it was pointed out to me, but Boom Boom and Think Twice Before You Go have opening riffs that sound awful similar… #
• Boom Boom: http://tinyurl.com/3boj6z
  Think Twice: http://tinyurl.com/6c9rlr #
• People who follow thousands of twitterers and have posted less than 10 tweets worry me a bit… #
• I hate traffic! #

• @gavinblair Why is that so funny? #
• @gavinblair I think I am following too many people… your post got buried… #
• New post on look2linux.com - So you want to play DVDs http://tinyurl.com/5c3f5u #

• I get it… a c g t #
• Ran out of cities that I have been on the Facebook “Cities I have been” app… Europe is fairly covered… #
• I find it offensive that they do not have Truva on that list… #
• Its a vicious (read: nerdy) cycle, I can update on twitter, which updates facebook, which gets posted to my blog as a wrapup nightly… #
• At least it means I can avoid facebook more… so evil… #
• Also, my blog posts to twitter when I update it, which will then be posted to facebook… ya.. thats right, Wordpress is posting to Facebook #
• I should really go to be earlier… #
• My shower is trying to kill me… There is a new Death Race movie! http://movies.yahoo.com/movie/1809936373/trailer #
• Hopefully it is just an orgy of violence… that’s what it should be… #
• Watching Kentucky Fried Movie, and posting from my phone! #