Adding hints

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.


Flattr this!

Article written by

3 Responses

Page 1 of 1
  1. SeanJA
    SeanJA at | | Reply

    Also I noticed yesterday that the tinyMCE acts funny when you tab to it, probably because you can’t add a tab index to it easily since it adds in a whole crazy iframe to do what it does… So tabbing to it means you have to tab through all of the buttons, not really what I want to do when filling out a form 😉

  2. SeanJA
    SeanJA at | | Reply

    Not everyone knows that you can tab through the form… also, what happens if the index order is missing on only some of the boxes (because of having to go back and change it), and then you have to click it… besides, its cool 😛

  3. zoe
    zoe at | | Reply

    am i the only one who tabs through a form?
    if you tab through, it selects the text for you, so you can type over easily 🙂

Leave a Reply