Formulaire de connexion HTML avec bascule de mot de passe

701 Metehan

Ouvrir dans l'éditeur Video Publiez votre code

Formulaire de connexion HTML avec bascule de mot de passe

Recommandé

30 May 2025

Codage manuel de la page de connexion Facebook

13 November 2025

Jeu de football rétro : HTML5 Canvas, suivi de la caméra

18 November 2025

Un code du texte

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

JS

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

Recommandé

Codage manuel de la page de connexion Facebook

Jeu de football rétro : HTML5 Canvas, suivi de la caméra

Un code du texte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS