JS Login Form

By Jonesy44 on Apr 26, 2008

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;

// 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">
<input type="password" value="Password" onfocus="focuspassword();" onblur="blurpassword();" size="30" name="password"  maxlength="100">
<input type="submit" value="Login" name="sub" disabled="true">


Sign in to comment.
Jonesy44   -  Jun 16, 2008

It was one of my first ever JS scripts.. i was pretty proud of it, so i thought i\'d share it :p

pointless tasks?
I think having functions like this can really make a website nice. using modern techniques rather than a skanky looking webpage.

Take Hawkee for instance .. it\'s new ajax system is very impressive, and adds a great touch to it.

asaporito  -  Sep 19, 2013

I really enjoyed this login form...it's perfect. I hate to look a gift horse in the mouth but why is it that it only works once?

After I use it to login - I can't ever use it again?

Check out where I put it on my site: calllocal.com

Jonesy44  -  Sep 28, 2013

Likely because these elements are named login.username and login.password - you will need to change the form name, i.e. the login section to use it elsewhere else it will not work correctly.

Sign in to comment

markusPHP   -  Jun 16, 2008

Abit lengthy for such a pointless task. :)

Jonesy44   -  Apr 28, 2008

Yah, when i was coding my site, i noticed the Google search bar in firefox, it looks a lot more pro i thought :P

Hawkee   -  Apr 28, 2008

Cool, a similar concept is also useful for prompting for a search query or comment.

Jonesy44   -  Apr 27, 2008

does noone do JS? :P

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.