Are you curious about How to create a Login and Registration Form in HTML CSS? In this tutorial, we will build a simple yet effective login and registration form to enhance the user authentication experience on your website. This project is perfect for beginners who want to understand the basics of web development.
Login and Registration forms are essential for user authentication on websites. They allow users to access restricted areas and personalize their experience. In this tutorial, we’ll break down the process of creating a login form using only HTML and CSS.
Let’s dive into the code to understand how it works and how each part contributes to the overall functionality of the form.
Project Folder Structure for Login and Registration Form in HTML CSS:
Before we start coding, let’s create the project folder structure.
- Create a project folder named “LoginRegistration”.
- Inside the folder, add three files:
index.html,style.css. - Include an “img” folder for images within the project structure.
Step 1: Create the HTML Structure
Start by setting up the basic HTML structure. Create a form-wrap div to hold the individual elements for the title, Sign In and Sign Up.
<!-- Code by Get Code Snippets - https://getcodesnippets.com/ -->
<!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>Login & Register Form</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<!-- CSS File -->
<link rel="stylesheet" href="style.css">
<!-- Font Awesome 6 Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<body>
<div class="form-wrap">
<div class="form-title">
<h2>Sign In</h2>
</div>
<div class="switch-form">
<a href="javascript:void(0)" class="form-tab-nav active" data-id="signin">Sign In</a>
<a href="javascript:void(0)" class="form-tab-nav" data-id="signup">Sign Up</a>
</div>
<div class="form-flex">
<div class="form-tab-content active" id="signin">
<form action="">
<div class="form-group">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username or Email">
</div>
<div class="form-group">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Password">
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="form-submit">
<button>LOGIN</button>
</div>
<div class="form-signup">
<p>Not a member? <a href="#">Sign Up</a></p>
</div>
</form>
</div>
<div class="form-tab-content" id="signup">
<form action="">
<div class="form-group">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username or Email">
</div>
<div class="form-group">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Password">
</div>
<div class="form-group">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Confirm Password">
</div>
<div class="form-submit">
<button>REGISTER</button>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- JS File -->
<link rel="stylesheet" href="script.js">
</body>
</html>
Step 2: Style the Form with CSS
Next, add some basic styling to make the form visually appealing. You can customize the styles to fit your design needs.
/* Code by Get Code Snippets - https://getcodesnippets.com/ */
/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Sora", sans-serif;
}
:root {
--body: #000020;
--black: #000;
--white: #fff;
}
a {
text-decoration: unset;
}
body {
background-image: url(background-2.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body:before {
position: absolute;
content: "";
background: rgb(0 0 0 / 50%);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.form-wrap {
position: relative;
background: rgb(255 255 255 / 20%);
backdrop-filter: blur(10px);
min-width: 400px;
min-height: 500px;
padding: 30px;
border-radius: 10px;
text-align: center;
overflow: hidden;
box-shadow: 0 15px 20px rgb(0 0 0 / 10%);
}
.form-wrap .form-title > h2 {
color: var(--white);
}
.form-wrap .switch-form {
display: flex;
border: 1px solid var(--white);
border-radius: 10px;
margin: 30px 0;
overflow: hidden;
}
.form-wrap .switch-form .form-tab-nav {
position: relative;
flex: 1;
padding: 15px;
color: var(--white);
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.form-wrap .switch-form .form-tab-nav.active {
background: var(--white);
color: var(--black);
}
.form-wrap .form-tab-content .form-group {
position: relative;
margin: 0 0 15px;
}
.form-wrap .form-tab-content .form-group > i {
position: absolute;
left: 20px;
bottom: 0;
height: 100%;
display: flex;
align-items: center;
color: var(--white);
}
.form-wrap .form-tab-content .form-group > input {
background: transparent;
color: var(--white);
display: block;
width: 100%;
min-height: 55px;
border: 1px solid var(--white);
border-radius: 10px;
padding: 0 45px;
outline: unset;
}
.form-wrap .form-tab-content .form-group > input::placeholder {
color: rgb(255 255 255 / 70%);
font-size: 14px;
font-weight: 300;
}
.form-wrap .form-tab-content .form-group > input:focus {
box-shadow: 0 0 20px rgb(255 255 255 / 30%);
}
.forgot-pass {
text-align: left;
}
.forgot-pass > a {
color: var(--white);
font-size: 14px;
transition: all 0.3s ease-in-out;
}
.forgot-pass > a:hover {
color: var(--black);
}
.form-submit {
margin: 20px 0;
}
.form-submit > button {
display: block;
width: 100%;
background: var(--white);
color: var(--black);
padding: 14px;
font-weight: 600;
border-radius: 10px;
border: 0;
box-shadow: 0 0 20px rgb(0 0 0 / 20%);
transition: all 0.3s ease-in-out;
}
.form-submit > button:hover {
background: rgb(255 255 255 / 30%);
color: var(--white);
box-shadow: unset;
}
.form-signup > p {
color: var(--white);
font-size: 14px;
margin: 0;
}
.form-signup > p > a {
color: var(--white);
font-weight: 600;
transition: all 0.3s ease-in-out;
}
.form-signup > p > a:hover {
color: var(--black);
}
.form-tab-content {
position: absolute;
width: 100%;
left: -100%;
padding: 0 30px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.68, 0.55, 0.265, 1.55);
}
.form-tab-content.active {
left: 0;
opacity: 1;
}
Step 3: Add Functionality with JavaScript
Now, let’s write the jQuery to make the Sign In and Sign Up tabs work.
// Code by Get Code Snippets - https://getcodesnippets.com/
jQuery(".form-tab-nav").on("click", function () {
$(".form-tab-nav").removeClass("active");
$(this).addClass("active");
var dataId = $(this).data("id");
$(".form-tab-content").removeClass("active");
$("#" + dataId).addClass("active");
if (dataId === "signup") {
$(".form-title").html("<h2>Sign Up</h2>");
} else {
$(".form-title").html("<h2>Sign In</h2>");
}
});
Conclusion
By following these steps, you’ve created a Login and Registration Form in HTML and CSS. This form can be customized further to fit any website’s design and purpose. Use it to enhance your web projects and engage your audience effectively.
Feel free to modify the code to suit your specific requirements and enhance the user experience on your website!
Happy coding!