Creating a responsive login and signup form with features like password visibility toggling and basic validation is a great way to enhance user experience on your website. In this blog post, we’ll walk through the structure and logic of such a form using HTML, CSS, and JavaScript.
Video Tutorial:
HTML Structure
The HTML provides the foundation of the form. It includes a login button that opens the login form and two main containers: one for the login form and one for the signup form. Each form uses standard form elements like <input>, <label>, and <button>, and features password fields with eye icons to toggle visibility. The forms are initially hidden using inline styles and are made visible via JavaScript functions.
The toggle between login and signup forms is handled with onclick events on links and buttons. This structure ensures that the UI stays on a single page without reloading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login SignUp Form</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="login-btn" onclick="openLoginForm()">Login</button>
<div class="form-container" id="loginForm">
<div class="form-box">
<h2>Login</h2>
<form onsubmit="return validateLogin()">
<label for="loginEmail">Email</label>
<input type="email" id="loginEmail" required />
<label for="loginPassword">Password</label>
<div class="password-wrapper">
<input type="password" id="loginPassword" required />
<i
class="fa-solid fa-eye toggle-password-icon"
onclick="togglePassword('loginPassword',this)"
></i>
</div>
<button type="submit">Login</button>
</form>
<a href="javascript:void(0)" onclick="openSignupForm()"
>Don't have an account? Sign Up</a
>
</div>
</div>
<div class="form-container" id="signupForm">
<div class="form-box">
<h2>Sign Up</h2>
<form onsubmit="return validateSignup()">
<label for="signUpEmail">Email</label>
<input type="email" id="signupEmail" required />
<label for="signupPassword">Password</label>
<div class="password-wrapper">
<input type="password" id="signupPassword" required />
<i
class="fa-solid fa-eye toggle-password-icon"
onclick="togglePassword('signupPassword',this)"
></i>
</div>
<label for="confirmPassword">Confirm Password</label>
<div class="password-wrapper">
<input type="password" id="confirmPassword" required />
<i
class="fa-solid fa-eye toggle-password-icon"
onclick="togglePassword('confirmPassword',this)"
></i>
</div>
<button type="submit">SignUp</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
The CSS styles the layout for a polished and responsive design. The entire form is centered using position: fixed and flexbox. Each .form-box is styled with padding, a box shadow, rounded corners, and a clean white background for contrast against a semi-transparent overlay.
Input fields are styled for clarity, with space for the eye icon in password fields. The .toggle-password-icon is placed inside a wrapper to allow absolute positioning over the input field. Buttons and links are styled for interactivity with hover effects and proper spacing.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Poppins", sans-serif;
}
.login-btn {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 5px;
z-index: 100;
cursor: pointer;
}
.form-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.form-box {
background-color: #ffffff;
padding: 20px 30px;
border-radius: 8px;
width: 300px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
}
.form-box h2 {
margin-bottom: 20px;
font-size: 24px;
}
.form-box label {
display: block;
text-align: left;
margin-bottom: 5px;
margin-top: 10px;
font-size: 14px;
}
.password-wrapper {
position: relative;
width: 100%;
}
.form-box input[type="password"],
.form-box input[type="email"],
.form-box input[type="text"] {
width: 100%;
height: 40px;
padding: 8px 35px 8px 10px;
margin-top: 5px;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}
.toggle-password-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
color: #666666;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-password-icon:hover {
color: #333333;
}
.form-box button[type="submit"] {
margin-top: 15px;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #ffffff;
border: none;
font-size: 16px;
}
.form-box a {
display: inline-block;
margin-top: 15px;
color: #007bff;
text-decoration: none;
font-size: 14px;
}
.form-box a:hover {
text-decoration: underline;
}
Javascript:
JavaScript adds interactivity and validation to the forms. The openLoginForm() and openSignupForm() functions toggle visibility between the two forms. The togglePassword() function switches the password field type between "password" and "text" and updates the icon accordingly.
The validateLogin() and validateSignup() functions check if all fields are filled, validate the email format using a regex, and ensure password confirmation matches during signup. Upon successful validation, an alert is shown and the form is hidden again.
