This article illustrates how we can establish a fashionable login and signup type with HTML, CSS, and JavaScript. The form has a built-in toggle between the two forms which allow the user to enjoy the feeling of online interactivity.
Step 1: HTML Structure
The HTML builds up the form structure under sections for login as well assignup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Signup Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<div class="form-header">
<button class="toggle-btn" onclick="showLogin()">Login</button>
<button class="toggle-btn" onclick="showSignup()">Signup</button>
</div>
<form id="loginForm" class="form-content">
<h2>Login</h2>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<form id="signupForm" class="form-content hidden">
<h2>Signup</h2>
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Signup</button>
</form>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22script.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
Step 2: CSS Styling
The CSS will make the form visually appealing and responsive.
/* styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #6a11cb, #2575fc);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
}
.form-container {
background: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
width: 300px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
text-align: center;
}
.form-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.toggle-btn {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
padding: 10px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.3s;
}
.toggle-btn:hover {
border-bottom: 2px solid #ff6347;
}
.form-content {
display: flex;
flex-direction: column;
gap: 15px;
}
.hidden {
display: none;
}
input {
padding: 10px;
border: none;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #ff6347;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #e5533d;
}
Step 3: JavaScript Functionality
The JavaScript handles the toggle functionality between login and signup forms.
// script.js
// Function to show the login form and hide the signup form
function showLogin() {
document.getElementById("loginForm").classList.remove("hidden");
document.getElementById("signupForm").classList.add("hidden");
}
// Function to show the signup form and hide the login form
function showSignup() {
document.getElementById("signupForm").classList.remove("hidden");
document.getElementById("loginForm").classList.add("hidden");
}
How It Works
- HTML:
- Contains two forms (
loginFormandsignupForm). - Buttons (
toggle-btn) call JavaScript functions to toggle between the forms.
- Contains two forms (
- CSS:
- Styles the forms, input fields, and buttons.
- The
hiddenclass hides the inactive form.
- JavaScript:
- Toggles the
hiddenclass on the forms to switch visibility.
- Toggles the
Enhancements
- Validation:
- Add JavaScript to validate email and password inputs before submission.
- Example:
function validateForm(event) { event.preventDefault(); const email = document.querySelector("#loginForm input[type='email']").value; const password = document.querySelector("#loginForm input[type='password']").value; if (!email.includes("@")) { alert("Please enter a valid email."); return; } if (password.length < 6) { alert("Password must be at least 6 characters."); return; } alert("Login successful!"); } document.querySelector("#loginForm").addEventListener("submit", validateForm);
- Responsive Design:
- Use media queries to ensure the form adapts to various screen sizes.
- Password Visibility Toggle:
- Add a checkbox to show/hide password fields:
<input type="password" id="password"> <input type="checkbox" onclick="togglePassword()"> Show Password
function togglePassword() { const passwordField = document.getElementById("password"); passwordField.type = passwordField.type === "password" ? "text" : "password"; }
- Add a checkbox to show/hide password fields:
This adaptive, pixel-perfect login/signup form lets you enjoy the completely aligned user experience. You could add more functionality using animations, validation, and backend programs. Change and customize the design and features to fit your project requirements!
