WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Login Form with Password Toggle
537
Metehan
Open In Editor
Publish Your Code
Recommended
5 July 2025
Glassy Login & Register Panel V3 from TheDoc
24 August 2025
Car Specs Accordion Slider HTML
16 November 2024
HTML Gradient Card
HTML
Copy
Login Form
My Account
Login
Password
Remember me
Forgot password?
Sign in
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } .container { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #E5C9D7 0%, #6BA3BE 100%); padding: 1rem; } .login-card { width: 100%; max-width: 400px; position: relative; background-color: #E3B6B1; border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(163, 64, 84, 0.15); overflow: hidden; } .overlay { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); } .content { position: relative; padding: 2rem; } .header { text-align: center; margin-bottom: 2rem; } .header h2 { color: #A34054; font-size: 1.5rem; margin-bottom: 1rem; } .avatar { width: 5rem; height: 5rem; margin: 0 auto; background-color: #E5C9D7; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .avatar svg { width: 2.5rem; height: 2.5rem; color: #A34054; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: #A34054; margin-bottom: 0.25rem; } .form-group input { width: 100%; padding: 0.5rem 1rem; background-color: #E5C9D7; border: 1px solid #A34054; border-radius: 0.375rem; color: #A34054; transition: all 0.2s; } .form-group input:focus { outline: none; border-color: #A34054; box-shadow: 0 0 0 2px rgba(163, 64, 84, 0.2); } .password-container { position: relative; } .toggle-password { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #A34054; padding: 0.25rem; } .toggle-password svg { width: 1.25rem; height: 1.25rem; } .hidden { display: none; } .form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .remember-me { display: flex; align-items: center; gap: 0.5rem; color: #A34054; font-size: 0.875rem; } .remember-me input[type="checkbox"] { width: 1rem; height: 1rem; border-color: #A34054; } .forgot-password { color: #A34054; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: opacity 0.2s; } .forgot-password:hover { opacity: 0.8; } .submit-button { width: 100%; padding: 0.5rem 1rem; background-color: #A34054; color: white; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: opacity 0.2s; box-shadow: 0 2px 10px rgba(163, 64, 84, 0.2); } .submit-button:hover { opacity: 0.9; }
JS
Copy
document.addEventListener('DOMContentLoaded', () => { const loginForm = document.getElementById('loginForm'); const message = document.getElementById('message'); // Giriş formu gönderildiğinde loginForm.addEventListener('submit', function(e) { e.preventDefault(); const email = document.querySelector('input[type="email"]').value.trim(); const password = document.querySelector('input[type="password"]').value.trim(); // E-posta ve şifre doğrulama if (!validateEmail(email)) { showMessage("Geçersiz e-posta adresi!", "#FF4444"); return; } if (password.length < 6) { showMessage("Şifre en az 6 karakter olmalıdır!", "#FF4444"); return; } // Örnek kullanıcı kontrolü if (email === "admin@example.com" && password === "12345") { showMessage("Giriş başarılı! Yönlendiriliyorsunuz...", "#4CAF50"); setTimeout(() => { message.textContent = "Hoş geldiniz!"; }, 2000); } else { showMessage("E-posta veya şifre hatalı!", "#FF4444"); } }); // E-posta doğrulama fonksiyonu function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } // Mesaj gösterme fonksiyonu function showMessage(text, color) { message.style.color = color; message.style.background = ${color}20; // Hafif arka plan rengi message.textContent = text; message.style.display = 'block'; // Mesajı göster // Hata animasyonu için konteyneri sars const container = document.querySelector('.container'); container.style.animation = 'none'; container.offsetHeight; // Reflow tetikleme container.style.animation = 'shake 0.5s ease'; } // Şifremi unuttum bağlantısı document.querySelector('.forgot a').addEventListener('click', function(e) { e.preventDefault(); showMessage("Şifre sıfırlama bağlantısı e-posta adresinize gönderildi.", "#FFA500"); }); });