How to set labels inside textfields for username and password ?

Question

I have a login form for my website. This login form have two text fields, username and password. Currently I am placing labels(username, password) just before textfields. But now I want to removed these two labels and want to show text(username, password) inside textfield. When user focuses on these textfields then texts should be removed and user can enter his desired username and password.

I have also noticed that when user open a login form then font color of text(username, password) populated in textfield(username, password) is of diffent color and when user start typing in that field then previous text is removed and new font color is black.

How is it possible?

Answer 1

See http://dorward.me.uk/tmp/label-work/ for a accessible examples using YUI3 and jQuery (but not both together) that I will get around to properly documenting at some stage.

Essentially, use CSS to position the label under the input and use JS to flip classes on it.

(A more common approach is to change the value of the input with JS, but this has accessibility problems)

Answer 2

You can use a jQuery Plugin such as this one or this one

These do what you need and i think they both also support a separate style for the watermark.

Answer 3

You need set the 'value' for your user name and password field in you html/php/asp file. Set a default style in CSS where the colour is grey.

Then you need to set the onFocus code for the for element. You need set it to something like

this.value = ''; this.style.color = 'black'

You may also want to ass some code to the onBlur (when the box is left) that can check if the field is empty, then do something like this

if(this.value == ''){ this.value = 'User Name'; this.style.color = 'grey' }

Answer 4

Setting the value is fine for the username field, but you encounter all kinds of issues when you're trying to do the same with the password field; its not a method I would recommend.

As CeeJeeB suggests, this will be perfect for your needs