How to create a login page for a user that checks their password on the client side

How do I create a login page that checks for a correct password on the client side and goes to the next screen if the password is correct?

Here is my attempt:

<html>
<p> Enter Username and Password </p>
<FORM action="file:///android_asset/www/Browse.html" method="post">
    <P>
    <LABEL for="firstname">Username </LABEL>
              <INPUT type="text" id="Username"><BR>
    <LABEL for="lastname">Password </LABEL>
              <INPUT type="text" id="Password"><BR>
        <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>
</html>

Answer

<html>
    <head>
        <title>Login page</title>
    </head>
    <body>
        <h1>Simple Login Page</h1>
        <form name="login">
            Username<input type="text" name="userid"/>
            Password<input type="password" name="pswrd"/>
            <input type="button" onclick="check(this.form)" value="Login"/>
            <input type="reset" value="Cancel"/>
        </form>
        <script language="javascript">
            function check(form) { /*function to check userid & password*/
                /*the following code checkes whether the entered userid and password are matching*/
                if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
                    window.open('target.html')/*opens the target page while Id & password matches*/
                }
                else {
                    alert("Error Password or Username")/*displays error message*/
                }
            }
        </script>
    </body>
</html>

Advertisement

Answer