Login/Signup Form (Turkish)

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş Yap / Üye Ol</title>
    <link rel="stylesheet" href="dark-style.css">
</head>
<body>
    <div class="dark-container">
        <div class="dark-login-section">
            <h2>Oturum Aç</h2>
            <form id="loginForm">
                <div class="dark-input-group">
                    <label for="loginUsername">Kullanıcı Adınız</label>
                    <input type="text" id="loginUsername" name="loginUsername" required>
                </div>
                <div class="dark-input-group">
                    <label for="loginPassword">Şifreniz</label>
                    <input type="password" id="loginPassword" name="loginPassword" required>
                </div>
                <div class="dark-checkbox-group">
                    <input type="checkbox" id="rememberMe" name="rememberMe">
                    <label for="rememberMe">Beni Hatırla</label>
                </div>
                <a href="#" class="dark-forgot-password">Şifremi Unuttum</a>
                <button type="submit" class="dark-login-button">Giriş</button>
            </form>
        </div>
        <div class="dark-signup-section">
            <h2>Üye Ol</h2>
            <form id="signupForm">
                <div class="dark-input-group">
                    <label for="signupName">Adınız Soyadınız</label>
                    <input type="text" id="signupName" name="signupName" required>
                </div>
                <div class="dark-input-group">
                    <label for="signupEmail">E-posta Adresiniz</label>
                    <input type="email" id="signupEmail" name="signupEmail" required>
                </div>
                <div class="dark-input-group">
                    <label for="signupPassword">Oluşturacağınız Şifre</label>
                    <input type="password" id="signupPassword" name="signupPassword" required>
                </div>
                <div class="dark-input-group">
                    <label for="confirmPassword">Şifreyi Tekrar Girin</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="dark-checkbox-group">
                    <input type="checkbox" id="agreement" name="agreement" required>
                    <label for="agreement">Üyelik sözleşmesini okudum ve kabul ediyorum.</label>
                </div>
                <button type="submit" class="dark-signup-button">Kayıt Ol</button>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #121212; /* Koyu arka plan */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.dark-container {
    background-color: #1E1E1E; /* Daha açık koyu arka plan */
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3); /* Neon yeşili gölge */
    display: flex;
    width: 80%;
    max-width: 960px;
    overflow: hidden;
}

.dark-login-section, .dark-signup-section {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dark-login-section {
    background-color: #2E2E2E; /* Biraz daha koyu bölüm */
}

.dark-signup-section {
    background-color: #333333; /* Diğer bölüm */
}

h2 {
    color: #00FF00; /* Neon yeşili başlık */
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); /* Neon parlaklık */
}

.dark-input-group {
    width: 100%;
    margin-bottom: 20px;
}

label {
    display: block;
    color: #B3B3B3;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: calc(100% - 24px);
    padding: 12px;
    border: 1px solid #555;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #444;
    color: #E0E0E0;
}

.dark-checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #B3B3B3;
}

.dark-checkbox-group input[type="checkbox"] {
    margin-right: 8px;
}

.dark-forgot-password {
    color: #00FF00;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    display: block;
    text-align: right;
    transition: color 0.3s ease;
}

.dark-forgot-password:hover {
    color: #00CC00;
    text-decoration: underline;
}

button {
    background-color: #00FF00;
    color: #222;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Neon parlaklık */
}

.dark-login-button {
    background-color: #00FF00;
    color: #222;
}

.dark-signup-button {
    background-color: #00FF00;
    color: #222;
}

button:hover {
    background-color: #00CC00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
}

/* Mobil cihazlar için düzenlemeler */
@media (max-width: 768px) {
    .dark-container {
        flex-direction: column;
        width: 95%;
    }

.dark-login-section, .dark-signup-section {
        width: 100%;
        padding: 40px;
    }
}

JS

document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const signupForm = document.getElementById('signupForm');

loginForm.addEventListener('submit', function(event) {
        event.preventDefault();
        // Burada oturum açma işlemleri gerçekleştirilebilir (API çağrısı vb.)
        const username = document.getElementById('loginUsername').value;
        const password = document.getElementById('loginPassword').value;
        console.log('Oturum Açma İsteği (Karanlık Tema):', { username, password });
        alert('Oturum açma isteği gönderildi (konsola bakınız - Karanlık Tema).');
    });

signupForm.addEventListener('submit', function(event) {
        event.preventDefault();
        // Burada üye olma işlemleri gerçekleştirilebilir (API çağrısı vb.)
        const name = document.getElementById('signupName').value;
        const email = document.getElementById('signupEmail').value;
        const password = document.getElementById('signupPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const agreement = document.getElementById('agreement').checked;

if (password !== confirmPassword) {
            alert('Şifreler eşleşmiyor! (Karanlık Tema)');
            return;
        }

if (!agreement) {
            alert('Üyelik sözleşmesini kabul etmelisiniz! (Karanlık Tema)');
            return;
        }

console.log('Üye Olma İsteği (Karanlık Tema):', { name, email, password, confirmPassword, agreement });
        alert('Üye olma isteği gönderildi (konsola bakınız - Karanlık Tema).');
    });
});

Login/Signup Form (Turkish)

Recommended

Animated HTML Register Form

Animated Sign In Form

HTML CSS Login Form

HTML

CSS

JS

Recommended

Animated HTML Register Form

Animated Sign In Form

HTML CSS Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS