Formulaire de connexion HTML avec bascule de mot de passe

842 Metehan

Ouvrir dans l'éditeur Video Publiez votre code

Formulaire de connexion HTML avec bascule de mot de passe

Recommandé

28 July 2025

Bulle de message HTML avec conception SVG

16 December 2024

Un code par smartfunction263

19 December 2025

Exemple de fiche produit 3D HTML pour une chaussure Nike

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é

Bulle de message HTML avec conception SVG

Un code par smartfunction263

Exemple de fiche produit 3D HTML pour une chaussure Nike

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS