Facebook like login form

I've already asked question similar to this some time ago, I thought I solved my problem but now it appears I didn't. Dealing with this problem for some time now and I have absolutely no idea how to do it.

The answer I got from previous question works but when I resize the window the password label drifts away when you re-size the window. And it doesn't position all the same in the FF(3.0.5) but it does in FF(3.5.6) and IE7, but again all have the same problems when window is re-sized.

What I'm trying to do is to put label behind input and by doing so it appears that input has 'Password' value. Does anybody know how did the facebook solve that problem?

www.facebook.com look at the login form, the password field .. when you click on it t开发者_StackOverflowhe password disappears and you type your password in.

Another useful link I got for this is http://dorward.me.uk/tmp/label-work/example.html from David Dorward, but he uses jquery and I'm allowed to use either only prototype or pure javascript. Can I get any help/comments/hints/tricks I've been dealing with this for some time now I'm just out of ideas.

Thank you

---

That technique is called watermark and on the internet there are some plugins for the js frameworks and tutorials to do it with pure javascript.

I think that Facebook is using a little workaround to show a watermark with clear text on a password field: the real password field is hidden and you're showed a text field with the password hint. When you click on the field the placeholder element is removed from the dom and the real password field is showed.

---

The problem here is not the JavaScript (so the use of a library in the example doesn't matter).

It is basic CSS positioning.

You need to establish a containing block to position the label and the input inside. That way, all the positioning is with respect to that block, and it doesn't matter about the position of everything else on the page.

Set position: relative on an element to establish this. The example does there here:

body.js .slim-control {
    position: relative;
    height: 1em;
}   

---

Consider using CSS background images for this. Create two (transparent) background images with the desired text and define it in a class. Display it by default on empty fields. Use the JS focus event to remove the class associated with the image and use the JS blur event to check if there is no value and add the class associated with the image.