A Login and Signup Form is an essential part of almost every website.
In this tutorial, we will create a clean and responsive Login & Signup Form using only HTML and CSS, without using any JavaScript.
This project is perfect for beginners who want to practice:
HTML form structure
CSS layout and styling
Responsive form design
๐ฅ Video Tutorial โ Login & Signup Form (HTML & CSS Only)
If you prefer learning visually, this Login & Signup Form project is also explained in a step-by-step video tutorial using only HTML and CSS.
In the video, you will see how the form layout and styling are created without JavaScript and how CSS handles responsiveness.
๐ Watch the complete tutorial below to understand the structure and design clearly.
๐งฑ HTML Source Code โ Login & Signup Form Structure
The HTML code defines the basic structure of the login and signup forms.
It includes input fields, labels, buttons, and form containers using semantic HTML elements.
Using clean and well-structured HTML helps keep the form accessible, readable, and SEO-friendly.
All the visual design and layout are handled using CSS only.
๐ Below is the complete HTML source code for the Login & Signup Form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign up / Login Form</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<input type="checkbox" aria-hidden="false" id="chk">
<div class="signup">
<form action="" class="signupForm">
<label for="chk">Sign up</label>
<input type="text" required placeholder="User name">
<input type="email" required placeholder="Email">
<input type="tel" required placeholder="Phone No.">
<input type="password" required placeholder="Password">
<button>Sign up</button>
</form>
</div>
<div class="login">
<form action="">
<label for="chk">Login</label>
<input type="email" required placeholder="Email">
<input type="password" required placeholder="Password">
<button>Login</button>
</form>
</div>
</main>
</body>
</html>
๐จ CSS Source Code โ Form Styling & Layout
CSS is responsible for the design and responsiveness of the login and signup forms.
With pure CSS, we style the form fields, buttons, spacing, and alignment to create a modern UI.
This project uses:
Flexbox for centering the form
Input focus and hover effects
Clean typography and colors
The layout automatically adapts to different screen sizes, making the form mobile-friendly and responsive.
๐ Below is the CSS source code used to style the Login & Signup Form.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Jost", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}
main{
width: 350px;
height: 500px;
background-color: #302b63;
box-shadow: 0px 0px 50px 2px black;
border-radius: 10px;
overflow: hidden;
}
#chk{
display: none;
}
.signup{
width: 100%;
height: 100%;
}
.signupForm{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.signupForm label{
font-size: 35px;
color: #fff;
font-weight: bold;
margin: 35px 0px;
cursor: pointer;
transition: .8s ease-in-out;
}
input{
width: 70%;
height: 40px;
padding: 10px;
font-size: 20px;
margin-bottom: 20px;
border: none;
outline: none;
border-radius: 4px;
background: #e0dede;
}
button{
width: 60%;
padding: 7px;
font-size: 18px;
font-weight: 700;
color: #fff;
background: #573b8a;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
button:hover{
background: #6d44b8;
}
.login{
width: 100%;
height: 450px;
background: #eee;
border-radius: 60% / 10%;
transform: translateY(-95px);
transition: .8s ease-in-out;
}
.login form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.login label{
font-size: 35px;
color: #573b8a;
font-weight: bold;
margin: 15px 0px 50px 0px;
cursor: pointer;
transform: scale(.6);
transition: .8s ease-in-out;
}
#chk:checked~.login{
transform: translateY(-415px);
}
#chk:checked~.login label{
transform: scale(1);
}
#chk:checked~.signup label{
transform: scale(.6);
}
โ Conclusion
This Login & Signup Form using HTML and CSS only is a great beginner project to improve your frontend skills.
It helps you understand form structure, styling, and responsive design without adding complexity.
You can enhance this project further by adding:
JavaScript validation
Toggle animation between login and signup
Backend authentication
Try customizing the design and make it your own ๐
Tools & Resources That Support My Web Development Work
Discover the exact hardware and services I use daily โ from laptops and keyboards to hosting and domains.
I was recommended this web site by my cousin. I am not
sure whether this post is written by him as no one else know such detailed about my
difficulty. You’re wonderful! Thanks!
thanks