For this example, I wanted to extend a script I wrote for a nice way to display forms that merged with another jQuery example I found. The method I use is to display the label for an input over the top of the input so it looks like the input has a default value, but because it doesn't you don't have to worry about validating against the default value, which will always be nothing. Then when you focus on the input the label fades out slightly so that you still know what is required, but here is an obvious selection state. At this point, when the user started typing the text would disappear, which is fine, they should be starting to type into the box.
However, I found that sometimes, even myself, if I switched windows in Explorer and then switched back later, that input would still be focussed and I wouldn't have a clue what needed to go in there.
Or, for another example, if that form had been submitted and something went wrong you'd naturally want what was currently there to still be there so the user doesn't have to type it again. If this is the case, they won't see the label at all so won't know what the fields are that have already been filled in. It may be obvious, but you never know and it has caught me out a few times.
So I decided to add a slightly different take on the way the form handles text being typed into the boxes. Now, instead of hiding the label it animates to sit next to the box, so at every state you know exactly what that input is meant to be used for.
Try it out below...