How to Create Login Form in HTML and CSS

A good login form can surely enhance the user’s interaction with the website. In this tutorial, we're going to design a clean responsive login form using just HTML and CSS. This is the simple form: it has clear input fields, a bold sign-in button, and quick links for social logins like Google, GitHub, and Twitter.

Whether you’re new to coding or just looking to level up your UI skills, this step-by-step guide will help you build a form for any project or projects. So let’s get started.

Video Tutorial of Login Form

youtube.com

This YouTube tutorial is the best resource if you prefer video learning. It explains every line of code with helpful comments so the process is easy to follow.

Steps to Create Login Form

To make a Login form by using just simple HTML and CSS do it step-by-step as follows:

• Create a new folder by naming it whatever you like, eg: form.
• Inside it, you create the following files: index.html and style.css.

Source Code
Click here

HTML Structure

Our HTML structure includes a form with fields for username and password, a “Forgot password” link, and options to sign in with social media accounts.

<section>
    <div class="main-form">
        <h5 class="title">Login</h5>
        <form action="">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" name="username" id="username">
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" name="password" id="password">
            </div>
        </form>
        <p class="forget"><a href="#">Forgot password</a></p>
        <button class="sign-in">Sign in</button>

        <div class="socials">
            <div class="line"></div>
            <p>Login with social accounts</p>
            <div class="line"></div>
        </div>
        <div class="social-icon">
            <i class="fa-brands fa-google"></i>
            <i class="fa-brands fa-github"></i>
            <i class="fa-brands fa-x-twitter"></i>
        </div>
        <p class="message">Don't have an account? <a href="#">Sign up</a></p>
    </div>
</section>

CSS

Now, we style the form. To make this form visually appealing, we’ve applied a minimalist style. We’re using Google Fonts for typography and Font Awesome icons for social media links.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;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;
    height: 100vh;
    background-color: #f3f4f6;
}

.main-form {
    width: 320px;
    background-color: #111827;
    color: #9ca3af;
    padding: 36px;
    border-radius: 5px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.title {
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.input-group {
    margin-top: 8px;
    font-size: 15px;
}

.input-group label {
    color: #9ca3af;
}

.input-group input {
    width: 100%;
    padding: 10px 16px;
    margin-top: 4px;
    border: 1px solid #374151;
    border-radius: 5px;
    background: transparent;
    color: #fff;
}

.input-group input:focus {
    border-color: #a78bfa;
}

.sign-in {
    width: 100%;
    padding: 10px 16px;
    background-color: #a78bfa;
    color: #111827;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sign-in:hover {
    background-color: #7c5fff;
}

.socials {
    display: flex;
    align-items: center;
    padding-top: 16px;
}

.line {
    flex: 1;
    height: 1px;
    background-color: #374151;
}

.socials p {
    padding: 0 8px;
    font-size: 15px;
    color: #9ca3af;
}

.social-icon {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.social-icon i {
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.3s;
}

.social-icon i:hover {
    color: #a78bfa;
}

.message {
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
}

Key Features

Responsive Design: The form is well-centered and responsive, neat and fits every screen size.
Minimalist Color Palette: We have selected dark background shades with faint borders and input fields and highlighted an active field with light lavender.
Social Media Login: where a user can login via Google, GitHub, or Twitter.

Conclusion

By using simple HTML and CSS, we’ve built a login form that can enhance any website’s front end. Customizing colors, icons, and adding additional fields are simple tasks that can make the form truly yours.

Source Code

Happy Coding