Formulaire de connexion HTML avec bascule de mot de passe

960 Metehan

Ouvrir dans l'éditeur Publiez votre code

Formulaire de connexion HTML avec bascule de mot de passe

Recommandé

27 October 2024

Site de jeu cracké Public Tout le monde peut poster

8 July 2025

Page de destination du magasin de meubles

27 January 2025

Page de destination d'une agence de marketing numérique

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="login-card">
            <div class="overlay"></div>
            
            <div class="content">
                
                <div class="header">
                    <h2>My Account</h2>
                    <div class="avatar">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                            <circle cx="12" cy="7" r="4" />
                        </svg>
                    </div>
                </div>

<form id="loginForm">
                    <div class="form-group">
                        <label for="email">Login</label>
                        <input type="email" id="email" required>
                    </div>

<div class="form-group">
                        <label for="password">Password</label>
                        <div class="password-container">
                            <input type="password" id="password" required>
                            <button type="button" id="togglePassword" class="toggle-password">
                                <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2 12s3-9 10-9 10 9 10 9-3 9-10 9-10-9-10-9z" />
                                </svg>
                                <svg class="eye-off-icon hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                                </svg>
                            </button>
                        </div>
                    </div>

<div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" id="remember">
                            <span>Remember me</span>
                        </label>
                        <a href="#" class="forgot-password">Forgot password?</a>
                    </div>

CSS

* {
    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;
}

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");
    });
});