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.