How To Set Labels Inside Textfields For Username And Password?

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

Solution 1:

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.

Solution 2:

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' }

Solution 3:

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)

Solution 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