How to Create Login and Signup Form using HTML CSS & JavaScript
Building a robust and user-friendly login and signup form is a fundamental aspect of web development. Why create a Login and Signup Form? It’s an essential component of numerous websites, enabling users to interact with personalized content. Let’s dive into HTML, CSS, and JavaScript to build forms that are both easy to use and visually attractive. This article will guide you through the process of creating such a form using HTML for structure, CSS for styling, and JavaScript for enhancing functionality.
1. HTML Structure: The Foundation
First, we’ll create the HTML structure for our login and signup forms.
Here’s a detailed explanation with comments for the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Sets the character encoding of the document to UTF-8, ensuring that the page handles special characters correctly. -->
<meta charset="UTF-8">
<!-- The title of the page, which will appear in the browser's title bar or tab. -->
<title>Login & signup form by coding classic</title>
<!-- Links the external CSS file (style.css) to the HTML document, which contains the styling for the page. -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Main container for the login and signup forms. -->
<div class="wrapper">
<!-- Container for the titles of the forms. The titles will change based on the selected form (login or signup). -->
<div class="title-text">
<!-- Title for the login form -->
<div class="title login">Login Form</div>
<!-- Title for the signup form -->
<div class="title signup">Signup Form</div>
</div>
<!-- Container for the forms and the sliding controls. -->
<div class="form-container">
<!-- Controls for switching between the login and signup forms. -->
<div class="slide-controls">
<!-- Radio button to select the login form, checked by default. -->
<input type="radio" name="slide" id="login" checked>
<!-- Radio button to select the signup form. -->
<input type="radio" name="slide" id="signup">
<!-- Labels for the radio buttons that act as clickable tabs. -->
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<!-- Sliding tab that visually indicates the selected form. -->
<div class="slider-tab"></div>
</div>
<!-- Container for the form fields. -->
<div class="form-inner">
<!-- Login form, appears when the login option is selected. -->
<form action="#" class="login">
<!-- Input field for the user's email address. -->
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<!-- Input field for the user's password. -->
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<!-- Link to reset the password if forgotten. -->
<div class="pass-link"><a href="#">Forgot password?</a></div>
<!-- Submit button for the login form. -->
<div class="field btn">
<!-- Layer behind the button to create visual effects (like animations). -->
<div class="btn-layer"></div>
<input type="submit" value="Login">
</div>
<!-- Link to switch to the signup form if the user is not yet a member. -->
<div class="signup-link">Not a member? <a href="#">Signup now</a></div>
</form>
<!-- Signup form, appears when the signup option is selected. -->
<form action="#" class="signup">
<!-- Input field for the user's email address. -->
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<!-- Input field for the user's password. -->
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<!-- Input field to confirm the user's password. -->
<div class="field">
<input type="password" placeholder="Confirm password" required>
</div>
<!-- Submit button for the signup form. -->
<div class="field btn">
<!-- Layer behind the button to create visual effects (like animations). -->
<div class="btn-layer"></div>
<input type="submit" value="Signup">
</div>
</form>
</div> <!-- End of form-inner -->
</div> <!-- End of form-container -->
</div> <!-- End of wrapper -->
<!-- Links to the external JavaScript file (script.js) that will handle the form interactions, such as sliding effects. -->
<script src="./script.js"></script>
</body>
</html>
2. CSS Styling: Enhancing the Look
Now, let’s add some CSS to style our forms and make them visually appealing.
Here’s a breakdown of the CSS code with comments explaining each section:
/* Import the Poppins font from Google Fonts with various font weights */
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
/* Reset margin and padding for all elements and set box-sizing to border-box */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif; /* Set the font family to Poppins */
}
/* Style the html and body to fill the entire viewport and center content */
html,
body {
display: grid; /* Use grid layout for centering */
height: 100%; /* Full height */
width: 100%; /* Full width */
place-items: center; /* Center items horizontally and vertically */
background: #282a36; /* Dark background color */
}
/* Style the text selection with a blue background and white text */
::selection {
background: #1a75ff; /* Blue background */
color: #fff; /* White text */
}
/* Wrapper for the content, with a maximum width and white background */
.wrapper {
overflow: hidden; /* Hide any overflowing content */
max-width: 390px; /* Max width of the container */
background: #fff; /* White background */
padding: 30px; /* Padding inside the container */
border-radius: 15px; /* Rounded corners */
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
/* Style for the title text, making it flex and 200% width for sliding effect */
.wrapper .title-text {
display: flex; /* Flexbox for layout */
width: 200%; /* Double the width for sliding animation */
}
/* Individual title styles with animation */
.wrapper .title {
width: 50%; /* Half the width of the container */
font-size: 35px; /* Large font size */
font-weight: 600; /* Bold text */
text-align: center; /* Center align text */
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smooth transition */
}
/* Slide controls for switching between login and signup */
.wrapper .slide-controls {
position: relative;
display: flex; /* Flexbox for layout */
height: 50px;
width: 100%;
overflow: hidden;
margin: 30px 0 10px 0; /* Margin on top and bottom */
justify-content: space-between; /* Space between the controls */
border: 1px solid lightgrey; /* Light grey border */
border-radius: 15px; /* Rounded corners */
}
/* Individual slide button styles */
.slide-controls .slide {
height: 100%;
width: 100%;
color: #fff; /* White text */
font-size: 18px; /* Medium font size */
font-weight: 500; /* Semi-bold text */
text-align: center; /* Center text */
line-height: 48px; /* Vertically center the text */
cursor: pointer; /* Pointer cursor on hover */
z-index: 1; /* Ensure it's above other elements */
transition: all 0.6s ease; /* Smooth transition */
}
/* Different color for the signup label */
.slide-controls label.signup {
color: #000; /* Black text */
}
/* The slider tab that moves between login and signup */
.slide-controls .slider-tab {
position: absolute;
height: 100%;
width: 50%; /* Half the width of the container */
left: 0; /* Start from the left */
z-index: 0; /* Behind other elements */
border-radius: 15px; /* Rounded corners */
background: -webkit-linear-gradient(left, #003366, #004080, #0059b3, #0073e6); /* Gradient background */
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smooth transition */
}
/* Hide radio buttons used for toggling login and signup */
input[type="radio"] {
display: none; /* Hide from view */
}
/* Move slider tab when signup radio is checked */
#signup:checked ~ .slider-tab {
left: 50%; /* Move to the right side */
}
/* Change label color when signup radio is checked */
#signup:checked ~ label.signup {
color: #fff; /* White text */
cursor: default; /* Disable pointer cursor */
user-select: none; /* Prevent text selection */
}
/* Change login label color when signup is selected */
#signup:checked ~ label.login {
color: #000; /* Black text */
}
/* Change label colors based on radio button state */
#login:checked ~ label.signup {
color: #000; /* Black text */
}
#login:checked ~ label.login {
cursor: default; /* Disable pointer cursor */
user-select: none; /* Prevent text selection */
}
/* Container for the form, allowing for overflow management */
.wrapper .form-container {
width: 100%;
overflow: hidden; /* Hide any overflowing content */
}
/* Inner form container with a flex layout for sliding between forms */
.form-container .form-inner {
display: flex; /* Flexbox for layout */
width: 200%; /* Double the width for sliding animation */
}
/* Individual form styles */
.form-container .form-inner form {
width: 50%; /* Half the width of the container */
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smooth transition */
}
/* Field container styles */
.form-inner form .field {
height: 50px;
width: 100%;
margin-top: 20px; /* Space above each field */
}
/* Input field styles */
.form-inner form .field input {
height: 100%;
width: 100%;
outline: none; /* Remove default outline */
padding-left: 15px; /* Padding inside the input */
border-radius: 15px; /* Rounded corners */
border: 1px solid lightgrey; /* Light grey border */
border-bottom-width: 2px; /* Slightly thicker bottom border */
font-size: 17px; /* Medium font size */
transition: all 0.3s ease; /* Smooth transition */
}
/* Change border color when input is focused */
.form-inner form .field input:focus {
border-color: #1a75ff; /* Blue border on focus */
/* box-shadow: inset 0 0 3px #fb6aae; /* Optional inner shadow */
}
/* Placeholder text styles */
.form-inner form .field input::placeholder {
color: #999; /* Light grey placeholder */
transition: all 0.3s ease; /* Smooth transition */
}
/* Change placeholder color on focus */
form .field input:focus::placeholder {
color: #1a75ff; /* Blue placeholder on focus */
}
/* Link for password recovery */
.form-inner form .pass-link {
margin-top: 5px; /* Space above the link */
}
/* Link for switching to signup */
.form-inner form .signup-link {
text-align: center; /* Center align text */
margin-top: 30px; /* Space above the link */
}
/* Styles for links in the form */
.form-inner form .pass-link a,
.form-inner form .signup-link a {
color: #1a75ff; /* Blue link color */
text-decoration: none; /* Remove underline */
}
/* Underline links on hover */
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover {
text-decoration: underline; /* Underline on hover */
}
/* Button container styles */
form .btn {
height: 50px;
width: 100%;
border-radius: 15px; /* Rounded corners */
position: relative;
overflow: hidden; /* Hide any overflowing content */
}
/* Layer inside the button for background animation */
form .btn .btn-layer {
height: 100%;
width: 300%; /* Extra width for sliding animation */
position: absolute;
left: -100%; /* Start outside the button */
background: -webkit-linear-gradient(right, #003366, #004080, #0059b3, #0073e6); /* Gradient background */
border-radius: 15px; /* Rounded corners */
transition: all 0.4s ease; /* Smooth transition */
}
/* Move the background layer on hover */
form .btn:hover .btn-layer {
left: 0; /* Slide in from the left */
}
/* Submit button styles */
form .btn input[type="submit"] {
height: 100%;
width: 100%;
z-index: 1; /* Ensure it's above the background layer */
position: relative;
background: none; /* No background */
border: none; /* No border */
color: #fff; /* White text */
padding-left: 0;
border-radius: 15px; /* Rounded corners */
font-size: 20px; /* Medium font size */
font-weight: 500; /* Semi-bold text */
cursor: pointer; /* Pointer cursor on hover */
}
JavaScript: Adding functionalities
The JavaScript code enhances the functionality of the login/signup form by selecting specific HTML elements and attaching event listeners to them. When the signup button is clicked, the code animates the login form and text out of view by adjusting their margin-left property. Conversely, clicking the login button reverses this animation, sliding the login form and text back into view. Furthermore, when the signup link is clicked, the code simulates a click on the signup button, effectively switching to the signup form.
// Selects the element that represents the login title text within the .title-text container.
const loginText = document.querySelector(".title-text .login");
// Selects the login form element.
const loginForm = document.querySelector("form.login");
// Selects the label element that acts as the button to switch to the login form.
const loginBtn = document.querySelector("label.login");
// Selects the label element that acts as the button to switch to the signup form.
const signupBtn = document.querySelector("label.signup");
// Selects the link inside the signup form that allows the user to switch to the signup form from the login form.
const signupLink = document.querySelector("form .signup-link a");
// Adds a click event listener to the signup button. When the signup button is clicked:
signupBtn.onclick = () => {
// Move the login form to the left by 50% to reveal the signup form.
loginForm.style.marginLeft = "-50%";
// Also move the login title text to the left by 50% to show the signup title text.
loginText.style.marginLeft = "-50%";
};
// Adds a click event listener to the login button. When the login button is clicked:
loginBtn.onclick = () => {
// Move the login form back to its original position (0%) to show the login form.
loginForm.style.marginLeft = "0%";
// Also move the login title text back to its original position (0%) to show the login title text.
loginText.style.marginLeft = "0%";
};
// Adds a click event listener to the signup link within the login form. When the signup link is clicked:
signupLink.onclick = () => {
// Simulate a click on the signup button to trigger the transition to the signup form.
signupBtn.click();
// Prevent the default behavior of the link (which would typically navigate to another page).
return false;
};
Conclusion
To wrap up, we’ve successfully built a functional and visually appealing Login and Signup Form using HTML, CSS, and JavaScript. This tutorial is designed to assist both new and experienced developers in enhancing their web projects. With this newfound knowledge, you can confidently advance your web development skills.
How to Create a Login and Signup Form from Scratch: A Beginner’s Guide