I recently found an excellent plugin written by Doug Neiner for applying a label over an input field that appears as a default value. Implementing it as a label instead of defaulting the value of the input element is a better approach, IMO, because it allow you flexibility for animating the text and it will also work on password fields without showing ****. It isn't too difficult to use. All you need to do is have a container that is relatively positioned and contains a label and input field. The label should be absolutely positioned and you need to, in your css, make it hover correctly over the input. This also required you to calculate the margin, border, and padding of the input and apply the same to the label otherwise the text wouldn't line up. When I started rolling it out on a site I was working on, however, I quickly found that the special requirements for the label and its container proved challenging to mix with my existing designs. I thought it would be much better if the usage of the plugin was flipped around and instead of calling it on the label, you called it on the input itself and everything else just happened automagically. So, I forked the project and made the changes to support this approach. I won't go into too much detail here, as I explained it in the README of the project itself, but now all you need to do is have any input on the screen and call it like this: [js] $(":input").inFieldLabels("label text"); [/js] Doing that will insert an absolutely positioned label into the base of the body, calculate the position of your input and apply those values to the label, and calculate the margin, border, and padding of the input and set the padding of the label to match. This way, all you need to do is include the plugin and start using it. No special DOM structure or CSS required. The only thing to be aware of is that it does use a label tag and so you need to make sure that you set up "label.infieldlabel" in your css to match the text of your input elements. GitHub Project