-

                     HTML LOG IN FORM


CODING:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
    <html>
    <head>
        <title>Login Form</title>
        <style>
            body {
                background-color: #f2f2f2;
            }
            form {
                background-color: white;
                padding: 20px;
                border-radius: 5px;
                box-shadow: 0px 0px 10px grey;
                width: 300px;
                margin: auto;
            }
            input[type=text], input[type=password] {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                box-sizing: border-box;
            }
            button {
                background-color: #4CAF50;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                cursor: pointer;
                width: 100%;
            }
            button:hover {
                opacity: 0.8;
            }
        </style>
    </head>
    <body>
        <form>
            <h2>Login Form</h2>
            <label for="username">Username:</label><br>
              <input type="text" id="username" name="username"><br>
              <label for="password">Password:</label><br>
              <input type="password" id="password" name="password"><br><br>
              <button type="submit" onclick="login()">Login</button>
             
              <script type="text/javascript">
                  function login() {
                      var username = document.getElementById("username").value;
                      var password = document.getElementById("password").value;
   
                      if (username == "admin" && password == "admin") {
                          alert("Login successful!");
                      } else {
                          alert("Invalid username or password.");
                      }
                  }
              </script>
             
  </form>
    </body>
    </html>
   
     
</body>
</html>


output:









Comments

Post a Comment