Written by Anonymous
<!DOCTYPE html> <html> <head> <title>Login Here!!</title> <link rel="icon" type="image/ico" href="pics/down.jpg" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> </head> <style> form{ border: 2px solid grey; border-radius: 5%; padding: 20px 50px; margin-top: 5%; background-color:#f9f6fa; } #img{ text-align: center; } input[type="submit"]{ margin-left: 35%; border-radius: 75%; padding: 2% 10% ; } </style> <body class="jumbotron container-fluid"> <header style="text-align: center;"><h1 style="font-family:'Roboto Slab', serif;">Login Here!! </h1></header> <main class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"> <form id="login" action='' target="_blank" > <div id="img"> <img src="pics/image.png" width="100px" height="100px"> </div> <div class="form-group"> <label for="name">Username: </label> <input type="text" id="name" class="form-control" name="name" placeholder="Enter username here..."> </div> <div class="form-group"> <label for="paswd">Password :</label> <input type="password" id="paswd" name="paswd" class= "form-control"> </div> <div class="form-group"> <label for="repeat-paswd">Confirm Password :</label> <input type="password" id="confrm_paswd" name="confrm_paswd" class= "form-control"> </div> <div class="form-group"> <input type="checkbox" name="rembr_me" checked> Remember Me </div> <input type="submit" value="Submit" class="btn btn-primary"> </form> </div> <p id="thank_you" hidden>You are now signing in</p> </main> <script> let form = document.querySelector('#login'); let uname = document.getElementById('name').value; let passwd = document.getElementById('paswd').value; let conf_passwd = document.getElementById('confrm_paswd').value; form.onsubmit = checkForm; function checkForm() { if(uname == '' && (passwd == '' && conf_passwd == '' )) alert('One or more fields are empty'); let password = document.getElementById('paswd').value; let match = document.getElementById('confrm_paswd').value; if (password != match) { alert('Password does not match. Try again.'); } } </script> </body> </html>