Home » How To Create Login Form In HTML and CSS | Toggle Password Visibility in JavaScript || Responsive

How To Create Login Form In HTML and CSS | Toggle Password Visibility in JavaScript || Responsive

Categories: Forms
Responsive Login Form using HTML and CSS with Toggle Password Visibility in JavaScript

Creating a login form using HTML and CSS is one of the most common projects for beginners who are learning web development. In this tutorial, we will build a responsive login form and also add password visibility toggle using JavaScript. This will help users show or hide their password while typing, which improves both user experience and modern UI design.

Features of This Login Form

  • Responsive design using HTML and CSS
  • Modern and clean user interface
  • Show/Hide password toggle using JavaScript
  • Easy to integrate in any website

Why Learn Login Form Design?

A login form is the entry point of most websites and applications. Whether you are creating:

  • A simple student project
  • A portfolio website
  • Or a real-world web app

You will need a login form with HTML and CSS. Adding JavaScript toggle password visibility makes it more interactive and user-friendly.

Watch the Video Tutorial: How To Create Login Form In HTML and CSS

HTML Code:

<!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">
    <title>Admin Login page</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <div class="form-container">
            <h1 class="title">Admin Login</h1>
            <p class="para-text">Welcome back. Enter your credentials to access your account</p>
            <form action="" class="form">
                <!-- =====form group start==== -->
                <div class="form-group">
                    <label class="label-title">Email Address</label>
                    <div class="input-group">
                        <input type="email" placeholder="example@gmail.com">
                    </div>
                </div>
                 <!-- =====form group end==== -->
                   <!-- =====form group start==== -->
                <div class="form-group">
                    <label class="label-title">Password</label>
                    <div class="input-group">
                        <input type="password" id="password" placeholder="Enter Password">
                        <i class="bx bx-show icon"></i>
                    </div>
                    <a href="#" class="forgot-password">Forgot Password</a>
                </div>
                <!-- =====form group end==== -->
                <!-- =====check group start==== -->
                <div class="check-group">
                    <input type="checkbox" id="showPassword">
                    <label for="showPassword" class="showlabel">Keep me signed in</label>
                </div>
                 <!-- =====form group end==== -->

                <button class="submit-btn" id="submit" type="button">Continue</button>

                <p class="subtitle">or sign up with</p>
                <!-- =====soical icon start==== -->
                <div class="social-signup">
                    <a href="#"><i class="bx bxl-google"></i><span>Google</span></a>
                    <a href="#"><i class="bx bxl-apple"></i><span>Google</span></a>
                    <a href="#"><i class="bx bxl-facebook"></i><span>Google</span></a>
                </div>
                <!-- =====soical icon End==== -->

                <p class="signup-link">Don't have an Account? <a href="#">Sign up here</a></p>

            </form>
        </div>
    </div>
</body>

<!-- =============Javascript link====== -->
<script src="script.js"></script>

</html>

CSS Code : 

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

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

.wrapper {
    background-color: #05785724;
    width: 100%;
    min-height: 100vh;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form-container {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    padding: 30px 30px;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.form-container .title{
    font-size: 30px;
    color: #38475a;
    font-weight: 700;
}
.form-container .para-text{
    font-size: 17px;
    font-weight: 400;
    color: #a9a9a9;
    margin-bottom: 15px;
}
.form-group {
    position: relative;
    margin-bottom: 20px;
}
.form-group .label-title {
    color: #38475a;
    text-transform: capitalize;
    margin: 5px 0 6px 0;
    font-size: 18px;
    font-weight: 600;
    display: block;
}

.input-group {
    position: relative;
}
.input-group input {
    background: none;
    color: #38475a;
    height: 50px;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    padding: 9px 18px 9px 18px;
    border: 2px solid #81858c;
    outline: none;
    border-radius: 8px;
}
.input-group input::placeholder {
    color: #38475a;
    font-size: 17px;
    font-weight: 400;
}
.input-group .icon{
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 25px;
    color: #38475a;
    cursor: pointer;
}
.form-group .forgot-password{
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
    color: #057857;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 600;
}
.check-group {
    margin-top: 30px;
}

.check-group #showPassword {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.check-group .showlabel {
    font-size: 16px;
    color: #38475a;
    margin-left: 10px;
    font-weight: 600;
    position: absolute;
    cursor: pointer;
}
.submit-btn {
    width: 100%;
    background: #057857;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    padding: 13px 24px;
    margin-top: 25px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s;
}

.submit-btn:hover {
   opacity: 0.8;
}
.subtitle{
    margin-top: 20px;
    text-align: center;
    color: #38475a;
    font-size: 17px;
    font-weight: 500;
    position: relative;
}

.social-signup{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.social-signup a{
    width: 100%;
    text-decoration: none;
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #38475a;
    border: 2px solid #81858c;
    padding: 6px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.social-signup a i{
    font-size: 25px;
    margin-right: 5px;
}
@media(max-width:450px){
    .social-signup{
        flex-wrap: wrap;
    }
}
.social-signup a:hover{
    background-color: #057857;
    border: 2px solid #057857;
    color: #fff;
}
.signup-link{
    margin-top: 20px;
    text-align: center;
    color: #38475a;
    font-size: 17px;
    font-weight: 500;
    position: relative; 
}
.signup-link a{
    text-decoration: none;
    color: #057857;
    font-weight: 600;
}
.signup-link a:hover{
    opacity: 0.8;
}

JavaScript Code : 

const password = document.getElementById("password");
const icon = document.querySelector(".icon");
icon.addEventListener('click', () => {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye show hide icon
    if (type == "password") {
        icon.classList.remove('bx-hide');
        icon.classList.add("bx-show")
    } else if (type == "text") {
        icon.classList.add("bx-hide");
        icon.classList.remove("bx-show")
    }

});

Why You Should Build This Project?

  • Improve your skills in HTML, CSS, and JavaScript
  • Learn how to create responsive forms
  • Understand how to add password visibility toggle
  • Useful for real-world projects like admin login, dashboards, and websites

Conclusion

Designing a Login and Signup Form using HTML, CSS, and JavaScript is an essential skill for every front-end developer. In this tutorial, we learned how to create a responsive login page with modern UI design and also implemented a toggle password visibility feature for better user experience.

Such projects not only help you practice form validation, responsive layout, and CSS styling, but also prepare you for real-world web development tasks. Whether you are building an admin login page or a signup form for users, the concepts remain the same and can be customized as per your project’s needs.

Live Demo

Related