How to make a multi tab login signup page in html

Features:
Tab Switching:

• Click between "Login" and "Sign Up" tabs
• Visual indication of active tab
• Smooth transition between forms

Login Form:

• Email field
• Password field
• Submit button

Sign Up Form:

• Name field
• Email field
• Password field
• Confirm password field
• Submit button

Basic Validation:

• Checks if passwords match on sign up
• Simple alerts for demonstration (replace with your actual auth logic)

Responsive Design:

• Works on mobile and desktop
• Clean, modern appearance
• You can customize the colors, fonts, and form fields to match your application's design. For a production environment, you would need to connect this to your backend authentication system.

<div class="form-container"> <div class="tabs"> <div class="tab active" onclick="switchTab('login')">Login</div> <div class="tab" onclick="switchTab('signup')">Sign Up</div> </div> <div class="form-content"> <form id="login-form" class="form active"> <div class="form-group"> <label for="login-email">Email</label> <input type="email" id="login-email" required> </div> <div class="form-group"> <label for="login-password">Password</label> <input type="password" id="login-password" required> </div> <button type="submit">Login</button> </form> <form id="signup-form" class="form"> <div class="form-group"> <label for="signup-name">Full Name</label> <input type="text" id="signup-name" required> </div> <div class="form-group"> <label for="signup-email">Email</label> <input type="email" id="signup-email" required> </div> <div class="form-group"> <label for="signup-password">Password</label> <input type="password" id="signup-password" required> </div> <div class="form-group"> <label for="signup-confirm-password">Confirm Password</label> <input type="password" id="signup-confirm-password" required> </div> <button type="submit">Sign Up</button> </form> </div> </div>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.

 * {
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        .form-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 350px;
            max-width: 100%;
            overflow: hidden;
        }
        
        .tabs {
            display: flex;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            cursor: pointer;
            background-color: #eee;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            background-color: #4285f4;
            color: white;
        }
        
        .form-content {
            padding: 20px;
        }
        
        .form {
            display: none;
        }
        
        .form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        button {
            width: 100%;
            padding: 12px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #3367d6;
        }
       

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.

        function switchTab(tabId) {
            // Hide all forms and remove active class from all tabs
            document.querySelectorAll('.form').forEach(form => {
                form.classList.remove('active');
            });
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show the selected form and mark its tab as active
            document.getElementById(tabId + '-form').classList.add('active');
            document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
        }
        
        // Form submission handlers
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const email = document.getElementById('login-email').value;
            const password = document.getElementById('login-password').value;
            alert(`Login attempt with:\nEmail: ${email}\nPassword: ${password}`);
            // Here you would typically send this data to your server
        });
        
        document.getElementById('signup-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const name = document.getElementById('signup-name').value;
            const email = document.getElementById('signup-email').value;
            const password = document.getElementById('signup-password').value;
            const confirmPassword = document.getElementById('signup-confirm-password').value;
            
            if (password !== confirmPassword) {
                alert("Passwords don't match!");
                return;
            }
            
            alert(`Signup attempt with:\nName: ${name}\nEmail: ${email}\nPassword: ${password}`);
            // Here you would typically send this data to your server
        });
   

We hope you would like this Calculator using html css and javascript code