API tools faq
paste
ahmed0saber

Login Form with validation check in HTML CSS JavaScript

ahmed0saber
Jun 18th, 2021
168
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 1.96 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.   <style>
  4.   body{
  5.     margin: 0;
  6.     background-color: #111;
  7.   }
  8.   div {
  9.     margin: auto;
  10.     margin-top: 40px;
  11.     margin-bottom: 40px;
  12.     width: 220px;
  13.     text-align: center;
  14.     font-family: Times New Roman;
  15.     background-color: #333;
  16.     box-shadow: 0px 0px 5px 3px #0ff;
  17.     background: -webkit-linear-gradient(top, teal, teal 50px, #333 50px, #333);
  18.   }
  19.   p{
  20.     margin: 0;
  21.     color: #EEE;
  22.     padding: 5px;
  23.     text-align: left;
  24.   }
  25.   input{
  26.     width: 200px;
  27.     height: 40px;
  28.     padding: 10px;
  29.     margin: 5px;
  30.     font-size: 20px;
  31.     border-radius: 10px;
  32.     border: 2px solid #111;
  33.     color: #EEE;
  34.     background-color: #222;
  35.     font-family: Times New Roman;
  36.   }
  37.   h2{
  38.     color: #EEE;
  39.     padding-top: 10px;
  40.   }
  41.   button {
  42.     width: 200px;
  43.     height: 40px;
  44.     padding: 0px;
  45.     margin: 5px;
  46.     font-size: 20px;
  47.     border-radius: 10px;
  48.     border: 2px solid #EEE;
  49.     color: #EEE;
  50.     background-color: #111;
  51.     transition-duration: 0.8s;
  52.     font-family: Times New Roman;
  53.   }
  54.   button:hover{
  55.     border: 2px solid #111;
  56.     color: #111;
  57.     background-color: #EEE;
  58.     font-size: 25px;
  59.   }
  60.   </style>
  61.   <script>
  62.     function check()
  63.     {
  64.       if(document.getElementById('t1').value=="ahmed0saber"&&document.getElementById('t2').value=="0123")
  65.       {
  66.         document.getElementById('p1').textContent="Correct Data";
  67.       }
  68.       else if(document.getElementById('t1').value!=="ahmed0saber"||document.getElementById('t2').value!=="0123")
  69.       {
  70.         document.getElementById('p1').textContent="Wrong Data";
  71.       }
  72.     }
  73.   </script>
  74. </head>
  75. <body>
  76. <div>
  77.   <h2>Login Form</h2>
  78.   <p>A Login Form created by me to test web automation on it...</p>
  79.   <input type="text" id="t1" placeholder="username">
  80.   <input type="password" id="t2" placeholder="password">
  81.   <button onclick="check()">Log in</button>
  82.   <p id="p1">Click on the button to check validation</p>
  83. </div>
  84. </body>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!