Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Creating a Login form with validations </title>
    <link href="css/formstyle.css" rel="stylesheet">
<style id="jsbin-css">
body{
background-color:#eee;
}
h1{
color:white;
text-align:center;
line-height:100px;
width:100%;
height:100px;
background-color:gray;
}
h5{
  text-align:center;
  font-size:1.3em;
  font-family:arial;
}
input[type=text],input[type=password]{
 width: 100%;
 height: 40px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: #4f4f4f;
 font-size: 16px;
 border-radius: 5px;
}

label{
 color: #464646;
 text-shadow: 0 1px 0 #fff;
 font-size: 16px;
 font-weight: bold;
}

input[type=button]{
 font-size: 16px;
 background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
 border: 1px solid #e5a900;
 color: #4E4D4B;
 font-weight: bold;
 cursor: pointer;
 width: 30%;
 border-radius: 5px;
 margin:10px 120px;
 padding: 10px 0;
 outline:none;
}
input[type=button]:hover{
 background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}


#box{
background-color:lightgray;
border:1px solid green;
width:350px;
height:500px;
padding:5px 20px;
margin:auto;
}
</style>
</head>
<body>
<div class="container-fluid">

        <div class="row bg-secondary">
          <div class="col-md-12"><h1>Login Page</h1></div>
        </div>
          <br><br><br>

        <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4" id="box">
           <h5>Please Log In Here !</h5>


         <form id="form" name="myform" autocomplete="on">
            <label>Email Id :</label></br>
            <input type="text" name="email" id="email"/></br>

            <label>Password :</label></br>
            <input type="password" name="password" id="password"/></br>

				<p align="center">Don't have an account,Please click on <a href="register.html">register</a></p>
            <input type="button" value="Log In" id="submit" onclick="validate()"/>
         </form>
            <span><b class="note">Note : </b>For this demo use following email id and password. <br/><b class="valid">Email Id : user@gmail.com<br/>Password : 123456</b></span>


    </div>
    <div class="col-md-4"></div>
   </div>
</div>

<script src="js/indexscript.js" type="text/javascript"></script>

<script id="jsbin-javascript">
var attempt = 3; //Variable to count number of attempts

//Below function Executes on click of login button
function validate(){
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  if ( email == "user@gmail.com" && password == "123456"){
    alert ("Login successfully");
    window.location = "curd.html"; //redirecting to other page
    return false;
  }
  else{
    attempt --;//Decrementing by one
    alert("You have left "+attempt+" attempt;");

    //Disabling fields after 3 attempts
    if( attempt == 0){
      document.getElementById("email").disabled = true;
      document.getElementById("password").disabled = true;
      document.getElementById("submit").disabled = true;
      return false;
    }
  }
}
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Creating a Login form with validations </title>
    <link href="css/formstyle.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">

        <div class="row bg-secondary">
          <div class="col-md-12"><h1>Login Page</h1></div>
        </div>
          <br><br><br>

        <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4" id="box">
           <h5>Please Log In Here !</h5>


         <form id="form" name="myform" autocomplete="on">
            <label>Email Id :</label></br>
            <input type="text" name="email" id="email"/></br>

            <label>Password :</label></br>
            <input type="password" name="password" id="password"/></br>

				<p align="center">Don't have an account,Please click on <a href="register.html">register</a></p>
            <input type="button" value="Log In" id="submit" onclick="validate()"/>
         </form>
            <span><b class="note">Note : </b>For this demo use following email id and password. <br/><b class="valid">Email Id : user@gmail.com<br/>Password : 123456</b></span>


    </div>
    <div class="col-md-4"></div>
   </div>
</div>

<script src="js/indexscript.js" type="text/javascript"><\/script>

</body>
</html>
</script>

<script id="jsbin-source-css" type="text/css">body{
background-color:#eee;
}
h1{
color:white;
text-align:center;
line-height:100px;
width:100%;
height:100px;
background-color:gray;
}
h5{
  text-align:center;
  font-size:1.3em;
  font-family:arial;
}
input[type=text],input[type=password]{
 width: 100%;
 height: 40px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: #4f4f4f;
 font-size: 16px;
 border-radius: 5px;
}

label{
 color: #464646;
 text-shadow: 0 1px 0 #fff;
 font-size: 16px;
 font-weight: bold;
}

input[type=button]{
 font-size: 16px;
 background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
 border: 1px solid #e5a900;
 color: #4E4D4B;
 font-weight: bold;
 cursor: pointer;
 width: 30%;
 border-radius: 5px;
 margin:10px 120px;
 padding: 10px 0;
 outline:none;
}
input[type=button]:hover{
 background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}


#box{
background-color:lightgray;
border:1px solid green;
width:350px;
height:500px;
padding:5px 20px;
margin:auto;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">  var attempt = 3; //Variable to count number of attempts

//Below function Executes on click of login button
function validate(){
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  if ( email == "user@gmail.com" && password == "123456"){
    alert ("Login successfully");
    window.location = "curd.html"; //redirecting to other page
    return false;
  }
  else{
    attempt --;//Decrementing by one
    alert("You have left "+attempt+" attempt;");

    //Disabling fields after 3 attempts
    if( attempt == 0){
      document.getElementById("email").disabled = true;
      document.getElementById("password").disabled = true;
      document.getElementById("submit").disabled = true;
      return false;
    }
  }
}
</script></body>
</html>