Formulario de inicio de sesión HTML con alternancia de contraseña

1,340 Metehan

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Formulario de inicio de sesión HTML con alternancia de contraseña

Recomendado

23 August 2025

Plantilla de sitio web de portafolio de diseñador web

13 October 2026

Efecto de corazón animado de Dil con HTML y JavaScript

14 June 2024

Tarjeta animada de redes sociales.

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