Responsive Login Form Design Using HTML and CSS

Do you want to design a good-looking login form? In this article, we will learn how to make a responsive login form design using HTML and CSS.

To design a login page, indicate if the caps lock is on or off, provide instant input validation for email and password, display password requirements clearly, and use related button labels only. Allow users to switch between the login and sign-up pages.

Introduction

The Login Form component is a simple username and password form that lets users with an existing account log in to the site. To create a beautiful login page, you must aim for simplicity. For example, skip the username and ask for an email. Make passwords safe and easy and provide help if they forget their passwords.

This article will teach you how to create a responsive login form design using HTML and CSS by following simple steps. You can further apply this knowledge to create different responsive designs.

Watch the full tutorial on YouTube

If you prefer watching video tutorials over reading articles, you can watch a full tutorial on Responsive Login Form Design Using HTML and CSS on my YouTube channel. If needed, you can access the complete source code here. While you are at it, do subscribe and like the content.

Creating the HTML Structure

The first step is to create a file named index.html with the default boilerplate code for the login form design using HTML and CSS. In the head section, include the Font Awesome CDN. Font Awesome is a font and icon toolkit based on CSS and Less.

Now, create a div with the class name ‘container’. Then, make a div with the class name ‘title’ and a form tag inside the container div. The form tag contains two divs, each with the class name ‘field’, for the email and password input.

It also contains a div with the class name ‘forgot’ for the forgot password option, a div with the class name ‘login’ for the login call-to-action, and a div with the class name ‘signup’ for the call-to-action that redirects to the signup page.

Refer to the following code and paste it into the file named index.html:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Responsive Login Form - Coding Power</title>
</head>
<body>

    <div class="container">
        <div class="title">
            <h2>Login</h2>
        </div>
        <form>
            <div class="field">
                <i class="fa fa-envelope"></i>
                <input type="email" placeholder="Email">
            </div>
            <div class="field">
                <i class="fa fa-lock"></i>
                <input type="password" placeholder="Password">
            </div>
            <div class="forgot">
                <a href="#">Forgot Password ?</a>
            </div>
            <div class="login">
                <button type="submit">Login</button>
            </div>
            <div class="signup">
                Don't have an account ? <a href="#">Signup Here</a>
            </div>
        </form>
    </div>

</body>
</html>

Styling with CSS

For styling, create a new file named style.css and add a style link to the HTML head to link to the CSS file. Remember to follow this step; otherwise, the CSS will not work for any HTML class or element, so make sure of that first.

Start by styling the body element to occupy the full height and width of the viewport. Set the display to flex with centered align-items and centered justify-content. Make the background #2c7da0.

Now, style the container div to have a hidden overflow with a border radius of 10 pixels and a white background color. The title div is styled to be white with a line height of 70 pixels, a center text alignment, and a background as #01497c.

The heading tag is styled to have a font size of 30 pixels. The form tag has appropriate padding for extra spacing, and the field div has relative positioning.

Then, the input tag is styled to have a border radius of 5 pixels, a font size of 16 pixels, a 1 pixel solid gray border, and no outline. I then style the i element with absolute positioning, background as #01497c, centered text alignment, and line height of 40 pixels.

Finally, style the call to action button to have a border radius of 5 pixels, no outline, a 1 pixel solid gray border, a pointer cursor, and a background as #01497c.

Copy and paste the following code into the file named style.css:

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: #2c7da0;
}

.container{
    width: 370px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
}

.container .title{
    text-align: center;
    line-height: 70px;
    margin-bottom:10px;
    color: white;
    background: #01497c;
}

.container .title h2{
    font-size: 30px;
}

.container form{
    padding: 25px;
}

.container form .field{
    height: 40px;
    margin-bottom: 15px;
    position: relative;
}

.container form .field input{
    height: 100%;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid gray;
    outline: none;
    padding-left: 60px;
}

.container form .field i{
    position: absolute;
    width: 50px;
    height: 100%;
    background: #01497c;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: white;
    border-radius: 5px 0 0 5px;
}

.container form .login button{
    margin-top: 15px;
    width: 100%;
    border-radius: 5px;
    outline: none;
    border: 1px solid gray;
    padding: 5px 0;
    cursor: pointer;
    color: white;
    font-size: 20px;
    background: #01497c;
}

.container form .signup{
    margin-top: 15px;
}

Following the above steps, you can easily create a Responsive Login Form Design Using HTML and CSS. You can access the full source code in the video tutorial by clicking the button below.

Download source code

Conclusion

Now that you have learned about responsive login form design using HTML and CSS, please leave your questions in the comment section if you still have any doubts. I will be happy to clarify them as soon as possible.

I encourage you to learn more about responsive web design and create a customized and unique login form. I would like to see what you can come up with.

Do Visit: Perfect Animated Skills Bar Using HTML and CSS

FAQ

How to design a login page?

To design a login page, indicate if the caps lock is on or off, provide instant input validation for email and password, display password requirements clearly, and use related button labels only.

Design the login page to allow users to switch between the login and sign-up pages.

How to create a login form using CSS and HTML?

To create a login form design using HTML and CSS, create a div with the class name ‘container’. Then, create a div with the class name ‘title’ and a form tag inside the container div. Apply appropriate styling as per your liking.

How to make a beautiful login page?

To create a beautiful login page, you must aim for simplicity. For example, skip the username and ask for an email. Make passwords safe and easy and provide help if they forget their passwords.

In the login form design using HTML and CSS, keep login and sign-up separate and make them accessible. Let users save their login information (For example, a Remember me option).

Table of Contents