Blog

Login script in HTML

Posted by Shivam Pandya Blogs | JavaScript, CSS 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>

post comment
     
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts