In my work with Place2Book, and many times before, I’ve had to make some sort of minimal login form with the labels inside the input fields.

This creates a challenge, as a default value in a password field will be displayed exactly as the password they type in; as dots, stars, or whatever.

<input type="password" value="password" />

The solution is to create two “password fields”. One fake, that displays the text you want them to see. When this is focused, it quickly replaces itself with the proper password field.

It looks something like this (html and jQuery mixed):

<input type="password" class="login_password" />
<input type="text" class="fake_password" value="Password" />

===

$(".login_password").hide();
$(".fake_password").show();

$("input.fake_password").focus(function(){
  $(this).hide().prev().show().focus();
});

That’s the gist of it, but of course there is more to it.

I created a repository on GitHub with all the code – fully commented.

It’s tested in: FF 3.0, FF 3.5, Opera 9.64, Chrome 2.0, and IE 7.0.

The README reads as follows:

“Created by Gorm Casper (gormcasper.com) – v.1.0

Use as you please.

This is a method for creating a minimal login form with the following abilities:

• Labels inside the input fields (as default value)
• Shows “password” in the password box and not stars, dots or whatever
• Label disappears on focus
• Labels are different from whatever is typed into the fields (in the example it’s grayed out)
• Still allows users without js to login without too much hazzle

Enjoy!