This is my first javascript snippet on here, there are no "errors" as such, but i'm fairly sure i've done it in the longest way possible !

// The JavaScript
<script type="text/Javascript">
function focususername() {
  if (document.login.username.value == "Enter Your Username ..") {
    document.login.username.value = "";
  }
}
function blurusername() {
  if (document.login.username.value == "") {
    document.login.username.value = "Enter Your Username ..";
    document.login.sub.value = "Login";
    document.login.sub.disabled = true;
  }
  else {
    var username = document.login.username.value;
    if (username.length >= 10) {
      document.login.sub.value = "Login as " + username.substring(0,10) + " ..";
    }
    else {
      document.login.sub.value = "Login as " + username + "";
    }
  }
}
function focuspassword() {
  if (document.login.password.value == "Password") {
    document.login.password.value = "";
    if (document.login.username.value != "Enter Your Username ..") {
      document.login.sub.disabled = false;
    }
  }
}
function blurpassword() {
  if (document.login.password.value == "") {
    document.login.password.value = "Password";
    document.login.sub.disabled = true;
  }
}
</script>

// The HTML 
// Edit webpage.ending to redirect to your login configs
<form action="webpage.ending" method="post" name="login">
<input type="text" value="Enter Your Username .." onfocus="focususername();" onblur="blurusername();" size="30" name="username" maxlength="100">
<br>
<input type="password" value="Password" onfocus="focuspassword();" onblur="blurpassword();" size="30" name="password"  maxlength="100">
<br><br>
<input type="submit" value="Login" name="sub" disabled="true">
</form>