WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrix est un répertoire de page d'accueil
713
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
15 July 2025
Exemple de formulaire de connexion animé HTML
4 December 2024
Un code par cleanscript406
11 July 2025
Roulette de décision HTML : faites tourner la roue !
HTML
Copy
Giriş Sayfası
Giriş Yap
Giriş
CSS
Copy
body { background-color: #f9e74d; /* Arka plan rengi */ background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 50% ); /* Matris deseni */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { background-color: white; padding: 40px; border-radius: 15px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); text-align: center; width: 350px; } h1 { color: #333; margin-bottom: 20px; } .input-group { margin-bottom: 15px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s; } input[type="text"]:focus, input[type="password"]:focus { border-color: #f9d74d; /* Sarı ton */ outline: none; } button { background-color: #f9e74d; /* Sarı ton */ border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #e6c72e; /* Daha koyu sarı */ } #message { color: red; margin-top: 10px; } .footer { margin-top: 20px; } .footer p { color: #666; } .footer a { color: #f9e74d; text-decoration: none; } .footer a:hover { text-decoration: underline; }
JS
Copy
document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // Formun varsayılan gönderimini durdur const username = document.getElementById('username').value; const password = document.getElementById('password').value; const message = document.getElementById('message'); // Basit kontrol (örnek) if (username === 'admin' && password === '1234') { message.style.color = 'green'; message.textContent = 'Giriş başarılı!'; // Burada yönlendirme veya başka bir işlem yapılabilir } else { message.style.color = 'red'; message.textContent = 'Kullanıcı adı veya şifre hatalı!'; } });