Hey everyone today we are going to learn how to make an animated login and registration form using HTML CSS and JavaScript.Login and registration forms are essential components of most websites and applications.
They provide a secure way for users to access their accounts and sign up for new ones. In this article, we will walk you through the process of creating a simple yet effective login and registration form using HTML CSS and JavaScript. By the end of this tutorial, you will have a functional and stylish form that you can use as a basis for your web projects.
Before we get started, make sure you have a text editor for writing HTML, CSS, and JavaScript. You can use popular editors like Visual Studio Code, Sublime Text, or even a simple Notepad.
Login and Registration Form Using HTML CSS and Javascript
Let’s learn how to use HTML CSS and JavaScript to make an animated login and registration. It’s a cool project with cool animations, you can click to button and you will able to see the forms such as login and registration in the same page. So, you can learn how to use make it from scratch, I made the video you can watch till to end, I hope you will get many ideas from it.
I hope you’ve watched complete video, I hope you’ve learned something new from the tutorial, want to get the codes that used inside the video you can check on below.
You May Also Like:
- How to Create Profile Card in HTML and CSS
- How to Make Responsive Table in HTML CSS
- How to Create An Admin Dashboard in HTML and CSS
- Travel and Tourism Website Using HTML and CSS
- Animated Website using HTML CSS and JavaScript
We will start by creating the HTML structure for our login and registration forms. Open your text editor and create a new HTML file, naming it something like “login_registration_form.html.” Then, add the following code:
<!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="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<script defer src="js/script.js"></script>
<title>Animated Login and Registration Form</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-youtube"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
</div>
<span>Or use your email for registration</span>
<input type="text" placeholder="name" />
<input type="email" placeholder="email" />
<input type="password" placeholder="password" />
<button type="button">Sign Up</button>
</form>
</div>
<!--===========Login Form -->
<div class="form-container sign-in">
<form>
<h1>Sign In</h1>
<div class="social_icons">
<a href="#" class="icon"><i class="fa-brands fa-youtube"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
</div>
<span>or use your email & password</span>
<input type="email" placeholder="email" />
<input type="password" placeholder="password" />
<button type="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 Friends</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>
</body>
</html>
Now, let’s create the CSS file to style our forms. Create a new file in your project directory and name it “style.css.” Add the following CSS to style your forms:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background-color: #c9d6ff;
background: linear-gradient(to right, #e2e2e2, #c9d6ff);
font-family: "poppins", sans-serif;
}
.container {
background-color: #fff;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
width: 768px;
max-width: 100%;
min-height: 480px;
overflow: hidden;
position: relative;
}
.container p {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.3px;
margin: 20px 0;
}
.container span {
font-size: 12px;
}
.container a {
text-decoration: none;
color: #333;
margin: 15px 0 10px;
font-size: 13px;
}
.container form {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
height: 100%;
}
.container form input {
background-color: #eee;
border: none;
width: 100%;
margin: 8px 0;
padding: 10px 15px;
font-size: 13px;
outline: none;
width: 100%;
border-radius: 8px;
font-family: inherit;
}
.container button {
background-color: #6e64ed;
color: #fff;
padding: 10px 45px;
border: 1px solid transparent;
border-radius: 5px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
.container button.hidden {
background-color: transparent;
border-color: #fff;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.social_icons {
margin: 20px 0;
}
.social_icons a {
border: 1px solid #ccc;
border-radius: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 3px;
width: 40px;
height: 40px;
}
.sign-in {
left: 0;
width: 50%;
z-index: 2;
}
.container.active .sign-in {
transform: translateX(100%);
}
.sign-up {
left: 0;
width: 50%;
z-index: 1;
opacity: 0;
}
.container.active .sign-up {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: move 0.6;
}
@keyframes move {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
.toggle-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 100;
}
.container.active .toggle-container {
transform: translateX(-100%);
}
.toggle {
background: url("../img/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
color: #fff;
left: -100%;
width: 200%;
transform: translateX(0);
transition: all 0.6s ease-in-out;
position: relative;
}
.toggle::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15);
}
.container.active .toggle {
transform: translateX(50%);
}
.toggle-panel {
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding: 0 30px;
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(0);
}
You can style your forms as per your design preferences. You can create a minimalistic design or add more elements and styles to make it visually appealing.
To make the forms interactive, you’ll need to create a JavaScript file. Create a new file in your project directory and name it “script.js.” Add the following JavaScript code:
"use strict";
const containerEl = document.getElementById("container");
const registerBtn = document.getElementById("register");
const loginBtn = document.getElementById("login");
registerBtn.addEventListener("click", () =>
containerEl.classList.add("active"),
);
loginBtn.addEventListener("click", () =>
containerEl.classList.remove("active"),
);
In this JavaScript file, you can add functionality like form validation, switching between the login and registration forms, and handling user interactions.
Form validation is an essential part of any login and registration system. You can use JavaScript to ensure that users enter valid information before submitting the forms. Implement validation functions for fields like email, password, and confirm password.
To provide a seamless user experience, you can use JavaScript to allow users to switch between the login and registration forms. This can be done by toggling the visibility of the forms when a user clicks on the “Sign Up” or “Sign In” buttons.
Depending on your project’s requirements, you can use JavaScript to perform actions when a user successfully logs in or registers. This could include redirecting the user to a dashboard, displaying a welcome message, or sending a confirmation email.
Conclusion
In this article, we’ve created a basic login and registration form using HTML, CSS, and JavaScript. You can use this as a starting point and further enhance it to meet the specific needs of your website or application.
The key to a successful login and registration system is ensuring security, usability, and an attractive user interface. With these components in place, you can provide a seamless experience for your users while protecting their data.
