Creating Responsive Login and Sign-Up Forms with HTML, CSS, and JavaScript
5 min readSep 9, 2023
In today’s digital world, creating responsive login and sign-up forms that work seamlessly on various devices and screen sizes is crucial for providing an optimal user experience. Responsive design ensures that your forms look and function well on everything from smartphones to desktop computers. In this article, we’ll explore how to create responsive login and sign-up forms using HTML, CSS, and JavaScript.
HTML Structure for Responsive Login and Sign-Up Forms
Before diving into CSS and JavaScript for responsiveness, let’s set up a basic HTML structure for login and sign-up forms. We’ll use this structure as a starting point:
<!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>Website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topRow">
<button id="button-openform"><p><i class="bi bi-person-circle"></i><span class="non-italic"> Login | Sign up</span></p></button>
</div>
<!-- Login form begins -->
<section class="admin">
<div class="container-login">
<div class="closeButton"> <i class="bi bi-x-lg"></i></div>
<form action="">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Enter your User Name">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your Password">
<div class="loginbuttons">
<button class="button-login" >Login</button>
<button class="button-login-signup">Sign Up</button>
</div>
<a class="forgetPWLink" href="">Forget Password</a>
</form>
</div>
<div class="container-signup">
<div class="closeButtonSignup"> <i class="bi bi-x-lg"></i></div>
<form action="">
<label for="firstname">First Name <span class="required">*</span></label>
<input type="text" name="firstname" id="firstname" placeholder="Enter your First Name">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Enter your Last Name">
<label for="email">Email <span class="required">*</span></label>
<input type="email" name="email" id="email" placeholder="Enter your Email">
<label for="username">Username <span class="required">*</span></label>
<input type="text" name="username" id="username" placeholder="Enter your Username">
<label for="set-password">Set Password <span class="required">*</span></label>
<input type="password" name="set-password" id="set-password" placeholder="Enter the Password">
<label for="confirm-password">Confirm Password <span class="required">*</span></label>
<input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm Password">
<label for="address">Address line 1 <span class="required">*</span></label>
<input type="text" name="address" id="address" placeholder="Address Line 1">
<label for="address">Address line 2</label>
<input type="text" name="address" id="address" placeholder="Address Line 2">
<label for="city">City <span class="required">*</span></label>
<input type="text" name="city" id="city" placeholder="Enter your City">
<label for="state">State <span class="required">*</span></label>
<input type="text" name="state" id="state" placeholder="Enter your State">
<label for="pincode">Pincode <span class="required">*</span></label>
<input type="number" name="pincode" id="pincode" placeholder="Enter the Pincode">
<button id="button-signup">Sign Up</button>
</form>
</div>
<div class="forgetPW">
<div class="closeButtonForgetPW"> <i class="bi bi-x-lg"></i></div>
<form action="">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Enter the Username">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your Email">
<button class="forgetPWBtn">Submit</button>
<p>Note - Password is sent to registered Email</p>
</form>
</div>
</section>
<!-- login form ends -->
<script src="index.js"></script>
</body>
</html>CSS for Responsive Login and Sign-Up Forms
Now, let’s make these forms responsive using CSS. We’ll focus on creating fluid layouts, media queries, and flexible input fields. Additionally, we’ll add JavaScript for interactivity to toggle the display of these forms.
html, body
{
margin-left: 4%;
margin-right: 4%;
margin-top: 0%;
font-family: 'Times New Roman', Times, serif;
}
.topRow
{
display: flex;
gap: 19px;
justify-content: flex-end;
}
.topRow button
{
background: transparent;
border: none;
}
/* login form starts */
.container-login, .container-signup, .forgetPW
{
display: none;
}
.closeButton, .closeButtonSignup, .closeButtonForgetPW
{
position: relative;
left: 95%;
}
.container-login, .forgetPW
{
position: fixed;
left: 30%;
top: 20%;
padding: 10px;
width: 500px;
background-color: white;
border: 2px solid green;
border-radius: 10px;
}
.container-signup
{
position: fixed;
left: 30%;
top: 10%;
padding: 10px;
background-color: white;
border: 2px solid green;
border-radius: 10px;
max-height: 80vh;
/* overflow-y: auto; */
overflow-y: auto;
overflow-x: hidden;
width: 500px;
}
.container-login form, .container-signup form, .forgetPW form
{
display: grid;
gap: 5px;
padding: 10px;
}
.container-login label, .container-signup label, .forgetPW label
{
color: green;
font-size: 17px;
}
.container-login input, .container-signup input, .forgetPW input
{
height: 30px;
background-color: transparent;
opacity: 0.9;
border: 1px solid green;
border-radius: 5px;
margin-bottom: 20px;
}
.loginbuttons
{
display: flex;
margin: auto;
gap: 20px;
}
.button-login, .button-login-signup, #button-signup, .forgetPWBtn
{
background-color: green;
width: 100px;
height: 40px;
border: 2px solid green;
border-radius: 5px;
color: white;
}
#button-signup, .forgetPWBtn
{
margin: auto;
}
/* login form ends */
@media (max-width: 768px) {
.container-login, .container-signup, .forgetPW {
left: 10%;
width: 80%;
max-width: none;
}
}
/* login form ends */JavaScript for Interactivity
To enhance the user experience, we can add JavaScript for interactivity. The following JavaScript code handles the display of login and sign-up forms:
// Login form Starts
const loginOpnBtn = document.querySelector("#button-openform");
const loginBox = document.querySelector(".container-login");
const signupOpnBtn = document.querySelector(".button-login-signup");
const signupBox = document.querySelector(".container-signup");
const closebtn = document.querySelector(".closeButton");
const closebtnSignUp =document.querySelector(".closeButtonSignup");
const forgetPWLin =document.querySelector(".forgetPWLink");
const forgetP =document.querySelector(".forgetPW");
const closeButtonForgetP =document.querySelector(".closeButtonForgetPW")
loginOpnBtn.addEventListener("click", function () {
if (loginBox.style.display === "none" || loginBox.style.display === "") {
loginBox.style.display = "block";
} else {
loginBox.style.display = "none";
}
});
signupOpnBtn.addEventListener("click", function (event) {
event.preventDefault(); // Prevent form submission
if (signupBox.style.display === "none" || signupBox.style.display === "") {
signupBox.style.display = "block";
} else {
signupBox.style.display = "none";
}
loginBox.style.display = "none";
});
forgetPWLin.addEventListener("click", function (event) {
event.preventDefault(); // Prevent form submission
if (forgetP.style.display === "none" || forgetP.style.display === "") {
forgetP.style.display = "block";
} else {
forgetP.style.display = "none";
}
loginBox.style.display = "none";
signupBox.style.display = "none"
});
closebtn.addEventListener("click", function () {
if(loginBox.style.display === "block")
{
loginBox.style.display = "none";
}
})
closebtnSignUp.addEventListener("click", function(){
if(signupBox.style.display === "block")
{
signupBox.style.display = "none";
}
})
closeButtonForgetP.addEventListener("click", function(){
if(forgetP.style.display === "block")
{
forgetP.style.display = "none";
}
})
// Login Form EndsConclusion
Creating responsive login and sign-up forms is essential for delivering a user-friendly experience across devices. Remember to test your forms thoroughly to ensure they function correctly on all devices, from mobile phones to desktop computers.
With responsive login and sign-up forms, you can enhance user satisfaction, accessibility, and overall usability of your web applications.
