HOW TO CREATE THE SIMPLE LOGIN PAGE ?


CREATING LOGIN PAGE

Source Code: 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Login Page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <!-- Font Awesome CSS -->

    <script src="https://kit.fontawesome.com/bc1b1cb975.js" crossorigin="anonymous"></script>


</head>

<body class="bg-dark">

    <div class="container col-12 col-sm-6 col-md-3 mt-4">

        <div class="card bg-light">

            <div class="card-header bg-secondary text-white text-center">

                <h1 class="card-title">Login</h1>

            </div>

            <div class="card-body">

                <!-- login form registration -->

                <form action="login.php" method="post">

                    <div class="form-group">

                        <input type="text" class="form-control" id="name" aria-describedby="nameHelp"

                            placeholder="Enter username" name="name" required>

                    </div>

                    <div class="form-group">

                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"

                            name="password" required>

                    </div>

                    <div class="form-group">

                        <input type="checkbox" onclick="myFunction()">&nbsp;Show Password

                    </div>

                    <div class="form-group">

                        <button type="submit" class="btn btn-primary btn-block">Submit</button>

                    </div>

                    <div class="form-group">

                        <p class="mb-0 text-center">Not a User? <a href="register.php"><u>Register</u></a></p>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <script type="text/javascript">

        function myFunction() {

            var x = document.getElementById("exampleInputPassword1");

            if (x.type === "password") {

                x.type = "text";

            } else {

                x.type = "password";

            }

        }

    </script>

</body>

</html>


Output: 

 

If you like the post then please like the post and follow our site for same interesting post.

 

Comments

Popular Posts

Error Detection And Correction Codes (Digital Logic)

Operating System Notes for BCA 4th Semester

Contact Us

Name

Email *

Message *

Followers