onclick text in form fields

[Smudly]

Hello,

I've created two form fields (username, password).
When a user comes to the page, the word "Username" is shown in the first form field. The word "Password" is shown in the second field. When a user clicks inside the field, the word inside the field erases automatically, allowing them to type in their username.

Everything above is working, except I'm running into some problems.

1st:
I need to figure out a way to include an if statement, that displays "Username" once again, if they did not type anything in the username field, and they clicked outside of the field. This will be the case for the Password field as well.

2nd:
If a user types in their username in the username field, then types in their password, but clicks on the Username field once again to fix a typo, it completely erases their username from the field, making them have to type it all again.

I've included my code below. Thanks!

Any help appreciated :) :banghead:

<script type="text/javascript">
function make_blank()
{
if(document.login.username.value ="Username"){
	document.login.username.value ="";
}
}
function make_blank1()
{
document.login.password.value ="";
}
</script>
<style>
.loginboxdiv
{
 margin:0;
 height:22px;
 width:102px;
 background:url(../img/loginbox.gif) no-repeat bottom;
}
.loginbox
{
 background:none;
 border:none;
 width:100px;
 height:20px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
}
</style>
<form name="login" action="template.html" method="POST">
			<div class="loginboxdiv" id="username">
			<input type="text" class="loginbox" name="username" value="Username" onclick="make_blank();">
			</div>
			<div class="loginboxdiv" id="password">
			<input class="loginbox" name="password" type="text" value="Password" onclick="make_blank1();">
			</div>
			</form>

[Taywin]

In onclick function, you need to change a bit. You have assignment '=' instead of comparison '==' in the if statement. Anyway, I also add to check if the username field is filled with only white spaces.

// original code
function make_blank() {
  if(document.login.username.value ="Username"){
    document.login.username.value ="";
  }
}

// ===========
// suggested code
function make_blank() {
  if((document.login.username.value.toLowerCase()=="username") {  // if 'username', empty it
    document.login.username.value = "";
  }
  else if (document.login.username.value.replace(/\s+/g, "")=="") {  // if empty or white spaces, filled with 'username'
    document.login.username.value = "Username";
  }
}

The function for password will always delete the existing password, do you intend it to be that way?