Table of Contents
Introduction of Login and Registration form in HTML CSS and JavaScript
Make your website’s first impression count with sleek, responsive login and registration form in HTML CSS and JavaScript that offer easy social media integration. Follow along as we guide you through each step, from HTML structure setup to CSS styling and JavaScript functionality.
Step 1: Embed the HTML Structure:
Incorporate the HTML structure into your webpage to create distinct login and signup forms. Ensure that this code is inserted on the page where you want the forms to appear.
<section class="container forms">
<div class="form login">
<div class="form-content">
<header>Login</header>
<form id="loginForm">
<div class="field input-field">
<input type="email" id="loginEmail" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" id="loginPassword" placeholder="Password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
<a href="#" class="forgot-pass">Forgot password?</a>
</div>
<div class="field button-field">
<button type="submit">Login</button>
</div>
</form>
<div class="form-link">
<span>Don't have an account? <a href="#" class="link signup-link">Signup</a></span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class='bx bxl-facebook facebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<i class='bx bxl-google google-icon'></i>
<span>Login with Google</span>
</a>
</div>
</div>
<!-- Signup Form -->
<div class="form signup">
<div class="form-content">
<header>Signup</header>
<form id="signupForm">
<div class="field input-field">
<input type="email" id="signupEmail" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" id="signupPassword" placeholder="Create password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="field input-field">
<input type="password" id="confirmPassword" placeholder="Confirm password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="field button-field">
<button type="submit">Signup</button>
</div>
</form>
<div class="form-link">
<span>Already have an account? <a href="#" class="link login-link">Login</a></span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class='bx bxl-facebook facebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<i class='bx bxl-google google-icon'></i>
<span>Login with Google</span>
</a>
</div>
</div>
</section>
// Login and Registration form in HTML CSS and JavaScriptStep 2: Apply the CSS Styling:
Style your forms using the provided CSS. This snippet includes styles for a fluid and responsive layout, input fields, buttons, icons, and media queries for mobile responsiveness.
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
// Login and Registration form in HTML CSS and JavaScript
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
column-gap: 30px;
}
.form {
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
border-radius: 6px;
background: #FFF;
}
.form.signup {
opacity: 0;
pointer-events: none;
}
.forms.show-signup .form.signup {
opacity: 1;
pointer-events: auto;
}
.forms.show-signup .form.login {
opacity: 0;
pointer-events: none;
}
header {
font-size: 28px;
font-weight: 600;
color: #232836;
text-align: center;
}
form {
margin-top: 30px;
}
.form .field {
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
border-radius: 6px;
}
.field input,
.field button {
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
border-radius: 6px;
}
.field input {
outline: none;
padding: 0 15px;
border: 1px solid #CACACA;
}
.field input:focus {
border-bottom-width: 2px;
}
// Login and Registration form in HTML CSS and JavaScript
.eye-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 18px;
color: #8b8b8b;
cursor: pointer;
padding: 5px;
}
.field button {
color: #fff;
background-color: #d30101;
transition: all 0.3s ease;
cursor: pointer;
}
.field button:hover {
background-color: #960606;
}
.form-link {
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a {
font-size: 14px;
font-weight: 400;
color: #232836;
}
.form a {
color: #0171d3;
text-decoration: none;
}
.form-content a:hover {
text-decoration: underline;
}
.line {
position: relative;
height: 1px;
width: 100%;
margin: 36px 0;
background-color: #d4d4d4;
}
.line::before {
content: 'Or';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
color: #8b8b8b;
padding: 0 15px;
}
.media-options a {
display: flex;
align-items: center;
justify-content: center;
}
a.facebook {
color: #fff;
background-color: #4267b2;
}
a.facebook .facebook-icon {
height: 28px;
width: 28px;
color: #0171d3;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.facebook-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
a.google {
color: #fff;
background-color: #c54040;
}
a.google .google-icon {
height: 28px;
width: 28px;
color: #d30101;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.google-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
@media screen and (max-width: 400px) {
.form {
padding: 20px 10px;
}
}
</style>Step 3: Enhance with JavaScript:
<script>
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {
eyeIcon.addEventListener("click", () => {
let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if (password.type === "password") {
password.type = "text";
eyeIcon.classList.replace("bx-hide", "bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show", "bx-hide");
})
})
})
links.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault(); //preventing form submit
forms.classList.toggle("show-signup");
})
})
const loginForm = document.getElementById("loginForm");
const signupForm = document.getElementById("signupForm");
signupForm.addEventListener("submit", (e) => {
e.preventDefault();
const signupEmail = document.getElementById("signupEmail").value;
const signupPassword = document.getElementById("signupPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;
if (!signupEmail || !signupPassword || !confirmPassword) {
alert("Please enter all details");
return;
}
if (signupPassword !== confirmPassword) {
alert("Passwords do not match");
return;
}
alert("Registration successful!");
});
</script>
Complete Code:
// Login and Registration form in HTML CSS and JavaScript
<!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>Responsive Login and Signup Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
column-gap: 30px;
}
.form {
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
border-radius: 6px;
background: #FFF;
}
.form.signup {
opacity: 0;
pointer-events: none;
}
.forms.show-signup .form.signup {
opacity: 1;
pointer-events: auto;
}
.forms.show-signup .form.login {
opacity: 0;
pointer-events: none;
}
header {
font-size: 28px;
font-weight: 600;
color: #232836;
text-align: center;
}
form {
margin-top: 30px;
}
.form .field {
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
border-radius: 6px;
}
.field input,
.field button {
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
border-radius: 6px;
}
.field input {
outline: none;
padding: 0 15px;
border: 1px solid #CACACA;
}
.field input:focus {
border-bottom-width: 2px;
}
// Login and Registration form in HTML CSS and JavaScript
.eye-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 18px;
color: #8b8b8b;
cursor: pointer;
padding: 5px;
}
.field button {
color: #fff;
background-color: #d30101;
transition: all 0.3s ease;
cursor: pointer;
}
.field button:hover {
background-color: #960606;
}
.form-link {
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a {
font-size: 14px;
font-weight: 400;
color: #232836;
}
.form a {
color: #0171d3;
text-decoration: none;
}
.form-content a:hover {
text-decoration: underline;
}
.line {
position: relative;
height: 1px;
width: 100%;
margin: 36px 0;
background-color: #d4d4d4;
}
.line::before {
content: 'Or';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
color: #8b8b8b;
padding: 0 15px;
}
.media-options a {
display: flex;
align-items: center;
justify-content: center;
}
a.facebook {
color: #fff;
background-color: #4267b2;
}
a.facebook .facebook-icon {
height: 28px;
width: 28px;
color: #0171d3;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.facebook-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
a.google {
color: #fff;
background-color: #c54040;
}
a.google .google-icon {
height: 28px;
width: 28px;
color: #d30101;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.google-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
@media screen and (max-width: 400px) {
.form {
padding: 20px 10px;
}
}
</style>
// Login and Registration form in HTML CSS and JavaScript
<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form login">
<div class="form-content">
<header>Login</header>
<form id="loginForm">
<div class="field input-field">
<input type="email" id="loginEmail" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" id="loginPassword" placeholder="Password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
<a href="#" class="forgot-pass">Forgot password?</a>
</div>
<div class="field button-field">
<button type="submit">Login</button>
</div>
</form>
<div class="form-link">
<span>Don't have an account? <a href="#" class="link signup-link">Signup</a></span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class='bx bxl-facebook facebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<i class='bx bxl-google google-icon'></i>
<span>Login with Google</span>
</a>
</div>
</div>
<!-- Signup Form -->
<div class="form signup">
<div class="form-content">
<header>Signup</header>
<form id="signupForm">
<div class="field input-field">
<input type="email" id="signupEmail" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" id="signupPassword" placeholder="Create password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="field input-field">
<input type="password" id="confirmPassword" placeholder="Confirm password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="field button-field">
<button type="submit">Signup</button>
</div>
</form>
<div class="form-link">
<span>Already have an account? <a href="#" class="link login-link">Login</a></span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class='bx bxl-facebook facebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<i class='bx bxl-google google-icon'></i>
<span>Login with Google</span>
</a>
</div>
</div>
</section>
// Login and Registration form in HTML CSS and JavaScript
<!-- JavaScript -->
<script>
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {
eyeIcon.addEventListener("click", () => {
let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if (password.type === "password") {
password.type = "text";
eyeIcon.classList.replace("bx-hide", "bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show", "bx-hide");
})
})
})
links.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault(); //preventing form submit
forms.classList.toggle("show-signup");
})
})
const loginForm = document.getElementById("loginForm");
const signupForm = document.getElementById("signupForm");
signupForm.addEventListener("submit", (e) => {
e.preventDefault();
const signupEmail = document.getElementById("signupEmail").value;
const signupPassword = document.getElementById("signupPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;
if (!signupEmail || !signupPassword || !confirmPassword) {
alert("Please enter all details");
return;
}
if (signupPassword !== confirmPassword) {
alert("Passwords do not match");
return;
}
// Here you would perform the actual signup process
// For now, let's just show a success message
alert("Registration successful!");
});
// Login and Registration form in HTML CSS and JavaScript
</script>
</body>
</html>
Conclusion:
By incorporating these responsive and interactive login/signup forms into your website, you give users a modern and user-friendly approach to access your services. They are ready to be used with minimal customization required.
If you want to download the project. ClickHere: Github
Explore more:
-> Create A Login Registration and Forgot Password Form In HTML CSS and JavaScript.
-> Creating Responsive Login and Registration Form in Html CSS and JavaScript with Validations.
-> Create a Stunning Tailwind CSS Registration Form with HTML and JavaScript Validation.
-> Creating a Responsive Login and Signup Form in React.js
-> Building a Dynamic Login and Registration Form in React.js
