Simple Login Form Using HTML and CSS with Source Code

Hello friends! Do you like coding? If yes then you must have learned HTML and CSS, using both of them we design web pages or elements of web pages. Have you ever created a web page using it? But if you want to create a login form using HTML and CSS then you are on the right website. Through this article I have taught you how to make a simple login form with HTML and CSS. Also I have provided you complete source code of login form.

login form using html css

Here is a very easy way to create a login form, by learning which you can also create a good looking HTML login form.

How to Create a Login Form Using HTML and CSS

1. Open your HTML editor / Download a HTML Editor

2. Download the code which we have given you below.

<!DOCTYPE html>
<html>

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

    <!-- CSS Starts here -->
    <style>
        body {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        
        h2 {
            text-align: center;
        }
        
        form {
            border: 1px solid #020202;
        }
        
        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 10px 0;
            display: inline-block;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
        
        button {
            background-color: #057386;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: .5px solid #057386;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 15px;
            font-weight: bold;
        }
        
        button:hover {
            background-color: black;
        }
        
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }
        
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
        }
        
        img.avatar {
            width: 20%;
            border-radius: 50%;
        }
        
        .container {
            padding: 16px;
        }
        
        span.psw {
            float: right;
            padding-top: 16px;
        }
        /* Media Query For Responsiveness */
        
        @media screen and (max-width: 400px) {
            span.psw {
                display: block;
                float: none;
            }
            .cancelbtn {
                width: 100%;
            }
        }
    </style>
    <!-- CSS Ends here -->
</head>

<body>

    <h2>Simple HTML/CSS Login Form</h2>

    <form action="/no_action.php">
        <div class="imgcontainer">
            <img src="images\login_avatar.png" alt="Avatar" class="avatar">
        </div>

        <div class="container">
            <label for="u_ID"><b>Username</b></label>
            <input type="text" name="u_ID" required>

            <label for="password_id"><b>Password</b></label>
            <input type="password" name="password_id" required>

            <button type="submit">LOGIN</button>
            <label>
    </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" class="cancelbtn">Cancel</button>
            <span class="psw"><a href="#">Change Password</a></span>
        </div>
    </form>
    <footer>
        <p style="text-align: center;">Code By
            <a href="http://neerajyadav.com/">neerajyadav.com</a> </p>
    </footer>
</body>

</html>

Download Code/download/button

3. Run project.

How to Remove Footer Credit?

When you download and use this source code, then you get a link to our website in the footer. It is installed for information only, you can easily remove it. And here you can add your name. Follow this steps:-

1. Open source code, and scroll at the end of code.

2. Remove entire <footer> </footer> tag from code.

<footer>
        <p style="text-align: center;">Code By
            <a href="http://neerajyadav.com/">neerajyadav.com</a> </p>
</footer>

Give us a feedback about our content...

Post a Comment

Give us a feedback about our content...

Post a Comment (0)

Previous Post Next Post