In this guide, we’ll build a stylish login and signup form using HTML, CSS, and JavaScript. This form will feature a toggle between the login and signup options, allowing users to interact seamlessly.
Step 1: HTML Structure
The HTML provides the foundation of the form, with sections for login and signup.
<!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 (
loginForm
andsignupForm
). - Buttons (
toggle-btn
) call JavaScript functions to toggle between the forms.
- Contains two forms (
- CSS:
- Styles the forms, input fields, and buttons.
- The
hidden
class hides the inactive form.
- JavaScript:
- Toggles the
hidden
class 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 responsive and visually appealing login/signup form provides a seamless user experience. You can further enhance it with animations, validation, and backend integration to make it fully functional. Experiment with the design and features to match your specific project requirements!