तुर्की लॉगिन पृष्ठ HTML: लॉगिन फ़ॉर्म

845 Metehan

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

21 August 2025

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

25 June 2025

कार ख़रीदना और बेचना प्लेटफ़ॉर्म: विज्ञापन, फ़िल्टरिंग

27 August 2024

लॉगिन फॉर्म

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş Portalı</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background">
        <div class="container">
            <h2>Giriş Yap</h2>
            <form id="loginForm">
                <div class="input-group">
                    <input type="email" placeholder="E-posta" required>
                    <label>E-posta</label>
                </div>
                <div class="input-group">
                    <input type="password" placeholder="Şifre" required>
                    <label>Şifre</label>
                </div>
                <button type="submit" class="btn">Giriş Yap</button>
            </form>
            <div id="message"></div>
            <div class="forgot">
                <a href="#">Şifremi Unuttum?</a>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    overflow: hidden; /* Scroll bar'ı gizle */
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.pexels.com/photos/1545743/pexels-photo-1545743.jpeg') no-repeat center center fixed;
    background-size: cover; /* Resmi tam kapla */
}

.container {
    position: relative;
    z-index: 2; /* İçeriklerin ön planda olmasını sağla */
    width: 400px;
    background: rgba(0, 0, 0, 0.7);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    text-align: center;
}

h2 {
    margin-bottom: 30px;
    color: #00FF00; /* Yeşil renk */
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
    background: rgba(255, 255, 255, 0.1);
    color: #00FF00; /* Yeşil renk */
}

.input-group input:focus {
    border-color: #00FF00;
    outline: none;
}

.input-group label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #aaa;
    transition: 0.3s;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #00FF00;
}

.btn {
    width: 100%;
    padding: 15px;
    background-color: #00FF00;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #00CC00; /* Daha koyu yeşil */
}

#message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    display: none; /* Başlangıçta gizli */
    color: #00FF00;
}

.forgot {
    margin-top: 15px;
}

.forgot a {
    color: #00FF00;
    text-decoration: none;
}

.forgot a:hover {
    text-decoration: underline;
}

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

अनुशंसित

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

कार ख़रीदना और बेचना प्लेटफ़ॉर्म: विज्ञापन, फ़िल्टरिंग

लॉगिन फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS