Login Form

Okay, I can help you create a well-structured and styled login form using HTML, CSS, and JavaScript. This example focuses on the front-end structure, styling, and basic client-side validation. Remember, a truly secure login system requires a backend component for authentication and data handling, which is not included here due to the environment constraints. Login Form body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .login-container { background-color: #ffffff; padding: 40px 30px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; box-sizing: border-box; } .login-form h2 { text-align: center; margin-bottom: 30px; color: #333; } .input-group { margin-bottom: 20px; position: relative; } .input-group label { display: block; margin-bottom: 8px; color: #555; font-size: 0.9em; } .input-group input { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 1em; transition: border-color 0.3s ease; } .input-group input:focus { outline: none; border-color: #764ba2; box-shadow: 0 0 0 2px rgba(118, 75, 162, 0.2); } .input-group input.error { border-color: #e74c3c; } .error-text { color: #e74c3c; font-size: 0.8em; position: absolute; bottom: -18px; left: 0; display: none; /* Hidden by default */ } .input-group input.error + .error-text { display: block; /* Show when input has error class */ } button[type="submit"] { width: 100%; padding: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 5px; color: #ffffff; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: opacity 0.3s ease; } button[type="submit"]:hover { opacity: 0.9; } .links { text-align: center; margin-top: 20px; } .links a { color: #764ba2; text-decoration: none; font-size: 0.9em; margin: 0 10px; transition: text-decoration 0.3s ease; } .links a:hover { text-decoration: underline; } .error-message, .success-message { padding: 10px; margin-bottom: 20px; border-radius: 5px; text-align: center; font-size: 0.9em; display: none; /* Hidden by default */ } .error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .success-message { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } const loginForm = document.getElementById('loginForm'); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const usernameError = document.getElementById('usernameError'); const passwordError = document.getElementById('passwordError'); const errorMessage = document.getElementById('errorMessage'); const successMessage = document.getElementById('successMessage'); loginForm.addEventListener('submit', function(event) { event.preventDefault(); // Prevent actual form submission // Clear previous messages and errors clearErrors(); hideMessages(); let isValid = true; // --- Basic Validation --- if (usernameInput.value.trim() === '') { showError(usernameInput, usernameError, 'Username or Email is required.'); isValid = false; } else if (!isValidEmail(usernameInput.value.trim()) && !isValidUsername(usernameInput.value.trim())) { // Simple check if it looks like an email or a simple username // You might want more complex validation depending on requirements showError(usernameInput, usernameError, 'Please enter a valid email or username.'); isValid = false; } if (passwordInput.value.trim() === '') { showError(passwordInput, passwordError, 'Password is required.'); isValid = false; } else if (passwordInput.value.length < 6) { // Example: Minimum password length showError(passwordInput, passwordError, 'Password must be at least 6 characters long.'); isValid = false; } if (isValid) { // --- Simulated Login --- // In a real application, you would send the data to a server here // using fetch() or XMLHttpRequest for authentication. // Example: Simulate success for a specific user/pass if (usernameInput.value.trim() === 'user@example.com' && passwordInput.value === 'password123') { showSuccessMessage('Login successful! Redirecting...'); // Simulate redirect after a delay // setTimeout(() => { window.location.href = '/dashboard'; }, 1500); } else { // Simulate generic login failure showErrorMessage('Invalid username or password.'); } // For demonstration, just show a success message // showSuccessMessage('Form is valid! (Simulated login)'); } else { showErrorMessage('Please fix the errors below.'); } }); function showError(inputElement, errorElement, message) { inputElement.classList.add('error'); errorElement.textContent = message; errorElement.style.display = 'block'; // Make error text visible } function clearErrors() { usernameInput.classList.remove('error'); passwordInput.classList.remove('error'); usernameError.textContent = ''; passwordError.textContent = ''; usernameError.style.display = 'none'; passwordError.style.display = 'none'; } function showErrorMessage(message) { errorMessage.textContent = message; errorMessage.style.display = 'block'; successMessage.style.display = 'none'; } function showSuccessMessage(message) { successMessage.textContent = message; successMessage.style.display = 'block'; errorMessage.style.display = 'none'; } function hideMessages() { errorMessage.style.display = 'none'; successMessage.style.display = 'none'; } // Basic email validation regex function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } // Basic username validation (e.g., alphanumeric, 3-16 chars) function isValidUsername(username) { const usernameRegex = /^[a-zA-Z0-9]{3,16}$/; // Allow email format as well if user enters email in username field return usernameRegex.test(username) || isValidEmail(username); } // Clear errors when user starts typing again usernameInput.addEventListener('input', () => { if (usernameInput.classList.contains('error')) { usernameInput.classList.remove('error'); usernameError.textContent = ''; usernameError.style.display = 'none'; } hideMessages(); // Hide general messages too }); passwordInput.addEventListener('input', () => { if (passwordInput.classList.contains('error')) { passwordInput.classList.remove('error'); passwordError.textContent = ''; passwordError.style.display = 'none'; } hideMessages(); // Hide general messages too }); This setup provides a visually appealing login form with basic client-side validation. You can view it by opening the `index.html` file. Remember to replace the simulated login logic in `script.js` with actual backend communication for a real-world application.