Login script in HTML

By Shivam Pandya Blogs | JavaScript Nov 25, 2012
In this blog you will learn how to create Login script in HTML..
Download Files: html_login.rar

First of all download attached resource and unzip it.

Here is a code in script, which check validation and username and password.

<script type="text/javascript">
    var count = 2;
    function validate() {
        var un = document.myform.username.value;
        var pw = document.myform.pword.value;
        var valid = false;
        var unArray = ["admin", "George", "Sarah", "Michael"];
// as many as you like - no comma after final entry
        var pwArray = ["test1234", "Password2", "Password3", "Password4"]; // the corresponding passwords;
        for (var i = 0; i < unArray.length; i++) {
            if ((un == unArray[i]) && (pw == pwArray[i])) {
                valid = true;
                break;
            }
        }
        if (valid) {
            alert("Login was successful");
            window.location = "welcome.htm";
            return false;
        }
        var t = " tries";
        if (count == 1) { t = " try" }
        if (count >= 1) {
            alert("Invalid username and/or password. You have " + count + t + " left.");
            document.myform.username.value = "";
            document.myform.pword.value = "";
            setTimeout("document.myform.username.focus()", 25);
            setTimeout("document.myform.username.select()", 25);
            count--;
        }
        else {
            alert("Still incorrect! You have no more tries left!");
            document.myform.username.value = "No more tries allowed!";
            document.myform.pword.value = "";
            document.myform.username.disabled = true;
            document.myform.pword.disabled = true;
            return false;
        }
    }
</script>

Here "var count = 2;" counts that how many try remain for and if its goes to "0", you are not allow to try any more.

Here is a form for User name and password.

<form name="myform" style="padding-left: 50px">
<p>
    <input type="text" name="username" placeholder="User Name"><br>
    <input type="password" name="pword" placeholder="Password"><br>
    <input type="button" value="Login" name="Submit" onclick="validate()">
</p>
</
form>

COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs