Table of Contents
How to Create Login Form in HTML and CSS with JavaScript | Free HTML CSS Login Form Code
Creating a user-friendly login system is essential for any website. In this guide, you’ll learn how to create login page in HTML and CSS, and enhance it with JavaScript validation. We’ve provided a complete free HTML CSS login form code including JavaScript to check empty fields before form submission.
Why Use JavaScript in Login Forms?
While HTML and CSS build the layout and design, JavaScript adds client-side validation. This means users get instant feedback if they try to submit empty login fields. Understanding how to create login page in HTML and CSS with JavaScript improves your front-end skills significantly.
Features of This Login Form
- Responsive design layout
- Client-side form validation
- Easy to customize
- Clean UI with modern styling
- Free HTML CSS login form code with JavaScript
Read this also:- A Guide to Using Tags In HTML And Create HTML Webpage
How to Create Login Form in HTML and CSS (with JavaScript)
Here is the step-by-step free HTML CSS login form code, including a validation script using JavaScript:
HTML CODE (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Modern Login Page | Technoistuti</title>
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up">
<form>
<h1>Create Account</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
<span>or use your email for registeration</span>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in">
<form>
<h1>Sign In</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
<span>or use your email password</span>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<a href="#">Forget Your Password?</a>
<button>Sign In</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Welcome Back!</h1>
<p>Enter your personal details to use all of site features</p>
<button class="hidden" id="login">Sign In</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hello, Friend!</h1>
<p>Register with your personal details to use all of site features</p>
<button class="hidden" id="register">Sign Up</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE (style.css):
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background-color: #c9d6ff;
background: linear-gradient(to right, #e2e2e2, #c9d6ff);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.container{
background-color: #fff;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.container p{
font-size: 14px;
line-height: 20px;
letter-spacing: 0.3px;
margin: 20px 0;
}
.container span{
font-size: 12px;
}
.container a{
color: #333;
font-size: 13px;
text-decoration: none;
margin: 15px 0 10px;
}
.container button{
background-color: #512da8;
color: #fff;
font-size: 12px;
padding: 10px 45px;
border: 1px solid transparent;
border-radius: 8px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
.container button.hidden{
background-color: transparent;
border-color: #fff;
}
.container form{
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
height: 100%;
}
.container input{
background-color: #eee;
border: none;
margin: 8px 0;
padding: 10px 15px;
font-size: 13px;
border-radius: 8px;
width: 100%;
outline: none;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in{
left: 0;
width: 50%;
z-index: 2;
}
.container.active .sign-in{
transform: translateX(100%);
}
.sign-up{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.active .sign-up{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: move 0.6s;
}
@keyframes move{
0%, 49.99%{
opacity: 0;
z-index: 1;
}
50%, 100%{
opacity: 1;
z-index: 5;
}
}
.social-icons{
margin: 20px 0;
}
.social-icons a{
border: 1px solid #ccc;
border-radius: 20%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 3px;
width: 40px;
height: 40px;
}
.toggle-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: all 0.6s ease-in-out;
border-radius: 150px 0 0 100px;
z-index: 1000;
}
.container.active .toggle-container{
transform: translateX(-100%);
border-radius: 0 150px 100px 0;
}
.toggle{
background-color: #512da8;
height: 100%;
background: linear-gradient(to right, #5c6bc0, #512da8);
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}
.container.active .toggle{
transform: translateX(50%);
}
.toggle-panel{
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 30px;
text-align: center;
top: 0;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}
.toggle-left{
transform: translateX(-200%);
}
.container.active .toggle-left{
transform: translateX(0);
}
.toggle-right{
right: 0;
transform: translateX(0);
}
.container.active .toggle-right{
transform: translateX(200%);
}
Javascript Code (script.js)
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
Understanding the Structure: HTML, CSS & JavaScript Roles
To master how to create login form in HTML and CSS, it’s crucial to understand what each language does:
- HTML handles the structure — input fields, buttons, labels.
- CSS beautifies the form — spacing, colors, hover effects.
- JavaScript ensures real-time interactivity — such as validation and alerts.
This combination offers the perfect base for secure, stylish login forms. And with our free HTML CSS login form code, it’s even easier to get started.
Read this also:- A Complete Guide to Understanding Tags & Elements In HTML
Customizing Your Login Form
You can enhance your login page by adding features like:
- Show/Hide password toggle using JavaScript
- Remember me checkbox
- Forgot password link
- Eye icon for password visibility
- Social media login options
These additions enrich the user experience while staying true to the base concept of how to create login form in HTML and CSS.
Is This Login Form Secure?
This free HTML CSS login form code is meant for front-end practice or as a template. For real-world security, always:
- Hash passwords on the backend (never store plain text)
- Use HTTPS
- Implement backend validation
- Integrate secure login APIs if needed
While learning how to create login form in HTML and CSS, remember that front-end validation is only the first layer of protection.
Final Thoughts
Now you’ve learned how to create login form in HTML and CSS with additional form validation using JavaScript. This makes your form more interactive and user-friendly. The included free HTML CSS login form code ensures that beginners and developers alike can quickly implement a secure login layout with validation.
For more templates and tutorials like this one, bookmark our blog!
Great tutorial! The step-by-step explanation made it easy to understand the structure and functionality of a login form using HTML, CSS, and JavaScript. The design is clean and user-friendly. It would be even more helpful if you could add form validation tips or link this with a backend in future updates. Keep up the good work!