dragffy.com

// The following js code will take the standard login form and hide it's
// labels. It will then change the password input type to text
// (so that normal letters are
// displayed in it), set the value of the email input to 'email. Set the
// value of the password input to 'password. These values server as the
// new labels.

// Upon clicking or tabbing to the email input the code finde the value
// of the input.
// If it is still set to ‘email’ we assume the user hasn’t
// changed it, and remove it for convenience so the user may begin
// typing immediately.

// When the password field is clicked or tabbed to the type is changed
// back from text to password, making it ready to accept the user’s
// password without displaying the characters on the screen.
// Actually, the type can’t be changed on-the-fly
// because IE doesn’t like this, what really happens is that
// the entire password input is swapped out on page load, and then swapped
// back on focus.

// Hide the labels for the inputs
$( ‘form[@name="login"] > label’ ).hide();

// Place the word ‘email’ in the email input
$( ‘#sideBarEmail input’ ).attr( “value”, “email” );

// Create a new form input and store it in a variable
var newInput = $(’<input />’)
.attr( ‘name’, ‘password’ )
.attr( ’size’, 15 )
.val( ‘password’ );

// Make a copy of the password input we want to replace, and store it in
// a vavariable
var oldInput = $( ‘#sideBarPassword’ ).clone();

// So we replace the old input with the new one, this shows the word password
// by default and is of type text
$( ‘#sideBarPassword input’ ).replaceWith( newInput );

// When the user clicks or tabs to the password field we replace the text
// input with the old password field, this ensures characters are
// represented as asteriks, the cursor is placed in the input field
// for convenience
$( ‘#sideBarPassword’ ).bind( “click select”, function(){
$( this ).replaceWith( oldInput );
$( ‘#sideBarPassword input’ ).select();
})

// Clicking or tabbing to the email we check if the value is equal
// to ‘email’
// if it is we delete it automatically.
$( ‘#sideBarEmail input’ ).bind( “click select”, function(){
if( this.value == ‘email’) {
$( this ).val( “” );
}
})
})
</script>
And the HTML that it refers to:

<form name='login' method='POST'  action='/festival/Login/login_submit'>
	<label for="email">Email</label>
	<p id="sideBarEmail"><input type='text' name='email' value='' size=15 /></p>
	<label for="password">Password</label>
	<p id="sideBarPassword">
		<input type='password' name='password' value='' size=15 />
	</p>
	<p>
		<input type='hidden' name='login' value='1'>
		<input class="submit" type='image' name='Log In' value='submit'
		 src="/festival/img/08/button_signIn.gif" />
		<a href="#">
			<img src="/festival/img/08/button_signUp.gif" alt="Sign Up"/>
		</a>
	</p>
</form>