HTML CSS AND JAVASCRIPT CODE FOR LOGIN FORM ► MacroNepal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Registration Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000000;
        }
        .container {
            width: 400px;
            background: #2776ae;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(47, 38, 38, 0.1);
        }
        .form-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            font-weight: bold;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .btn {
            width: 100%;
            padding: 10px;
            background-color: black;
            border: none;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #c3ff00;
        }
        .toggle-btn {
            margin-top: 20px;
            background-color: ;
        }
        .toggle-btn:hover {
            background-color: #f30000;
        }
        .message {
            text-align: left;
            margin-top: 20px;
        }
        .error {
            color: red;
            text-align: center;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<div class="container" id="formContainer">
    <div class="form-title" id="formTitle">Login Form</div>
    <form id="loginForm">
        <div class="form-group">
            <label for="loginEmail">Email</label>
            <input type="email" id="loginEmail" placeholder="Enter your email" required>
        </div>
        <div class="form-group">
            <label for="loginPassword">Password</label>
            <input type="password" id="loginPassword" placeholder="Enter your password" required>
        </div>
        <div class="error" id="loginError"></div>
        <button type="submit" class="btn">Login</button>
    </form>

    <form id="registerForm" style="display: none;">
        <div class="form-title">Register Form</div>
        <div class="form-group">
            <label for="registerName">Name</label>
            <input type="text" id="registerName" placeholder="Enter your name" required>
        </div>
        <div class="form-group">
            <label for="registerEmail">Email</label>
            <input type="email" id="registerEmail" placeholder="Enter your email" required>
            <label for="Contact">Contact</label>
            <input type="phone" id="ph" placeholder="phone number " required>
        </div>
        <div class="form-group">
            <label for="registerPassword">Password</label>
            <input type="password" id="registerPassword" placeholder="Enter your password" required>

        </div>
        
        <label for ="gender"> Gender</label>
        <input type="radio" name="gender">Male
        <input type="radio" name="gender">Female
        <br>
        <label for ="Country">Country</label>
        <input type="radio" name="Country">Nepal
        <input type="radio" name="Country">India

        <div class="error" id="registerError"></div>
        <button type="submit" class="btn">Register</button>
    </form>

    <button class="btn toggle-btn" id="toggleFormBtn">Switch to Register</button>

    <div class="message" id="message"></div>
</div>

<script>
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');
    const toggleFormBtn = document.getElementById('toggleFormBtn');
    const formTitle = document.getElementById('formTitle');
    const messageDiv = document.getElementById('message');
    const loginError = document.getElementById('loginError');
    const registerError = document.getElementById('registerError');

    toggleFormBtn.addEventListener('click', () => {
        if (loginForm.style.display === 'none') {
            loginForm.style.display = 'block';
            registerForm.style.display = 'none';
            formTitle.textContent = 'Login Form';
            toggleFormBtn.textContent = 'Switch to Register';
        } else {
            loginForm.style.display = 'none';
            registerForm.style.display = 'block';
            formTitle.textContent = 'Register Form';
            toggleFormBtn.textContent = 'Switch to Login';
        }
    });

    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        loginError.textContent = '';
        const email = document.getElementById('loginEmail').value;
        const password = document.getElementById('loginPassword').value;

        if (email === 'user@example.com' && password === 'password') {
            messageDiv.textContent = 'Login successful!';
            messageDiv.style.color = 'green';
        } else {
            loginError.textContent = 'Invalid login credentials!';
        }
    });

    registerForm.addEventListener('submit', (e) => {
        e.preventDefault();
        registerError.textContent = '';
        const name = document.getElementById('registerName').value;
        const email = document.getElementById('registerEmail').value;
        const password = document.getElementById('registerPassword').value;

        if (name && email && password) {
            messageDiv.textContent = 'Registration successful!';
            messageDiv.style.color = 'green';
        } else {
            registerError.textContent = 'Please fill out all fields!';
        }
    });
</script>

</body>
</html>
HTML
Leave a Reply Cancel reply
