Formulário de login e registro HTML (turco)

46 Metehan

Abrir no Editor Publique Seu Código

Formulário de login e registro HTML (turco)

Recomendado

21 September 2024

Adicionar botão para abrir adicionar dados de perfil com validação

14 May 2025

sistema de doação com valores múltiplos

28 June 2025

Confronto de Metamorfos

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş & Kayıt Formu</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container" id="container">
    <div class="form-container sign-up">
        <form id="msform">
            <ul id="progressbar">
                <li class="active">Hesap</li>
                <li>Detaylar</li>
                <li>Profil</li>
            </ul>
            <fieldset>
                <h1>Hesap Oluştur</h1>
                <div class="social-icons">
                    <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
                </div>
                <span>veya kayıt için e-postanızı kullanın</span>
                <input type="email" name="email" placeholder="Email">
                <input type="password" name="pass" placeholder="Şifre">
                <input type="password" name="cpass" placeholder="Şifre Tekrar">
                <input type="button" name="next" class="next action-button" value="İleri">
            </fieldset>
            <fieldset>
                <h1>Kişisel Detaylar</h1>
                <input type="text" name="fname" placeholder="Adınız">
                <input type="text" name="lname" placeholder="Soyadınız">
                <input type="text" name="phone" placeholder="Telefon">
                <input type="button" name="previous" class="previous action-button" value="Geri">
                <input type="button" name="next" class="next action-button" value="İleri">
            </fieldset>
            <fieldset>
                <h1>Sosyal Profiller</h1>
                <input type="text" name="twitter" placeholder="Twitter">
                <input type="text" name="github" placeholder="Github">
                <input type="text" name="instagram" placeholder="Instagram">
                <input type="button" name="previous" class="previous action-button" value="Geri">
                <input type="submit" name="submit" class="action-button" value="Gönder">
            </fieldset>
        </form>
    </div>

<div class="form-container sign-in">
        <form>
            <h1>Giriş Yap</h1>
            <div class="social-icons">
                <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
            <span>veya e-postanız ile giriş yapın</span>
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Şifre">
            <a href="#">Şifreni mi unuttun?</a>
            <button>Giriş Yap</button>
        </form>
    </div>

<div class="toggle-container">
        <div class="toggle">
            <div class="toggle-panel toggle-left">
                <h1>Tekrar Hoş Geldin!</h1>
                <p>Giriş yapmak ve yolculuğuna devam etmek için kişisel bilgilerini gir</p>
                <button class="hidden" id="login">Giriş Yap</button>
            </div>
            <div class="toggle-panel toggle-right">
                <h1>Merhaba, Dostum!</h1>
                <p>Yolculuğa bizimle başlamak için kişisel bilgilerini girerek kayıt ol</p>
                <button class="hidden" id="register">Kayıt Ol</button>
            </div>
        </div>
    </div>
</div>

CSS

css 2 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

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

body{
    background-color: #c9d6ff;
    background: linear-gradient(to right, #e2e2e2, #c9d6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

.container{
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.container p{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    margin: 20px 0;
}

.container span{
    font-size: 12px;
}

.container a{
    color: #333;
    font-size: 13px;
    text-decoration: none;
    margin: 15px 0 10px;
}

.container button, .action-button {
    background: #ff4b2b;
    color: #fff;
    font-size: 12px;
    padding: 10px 45px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 0 0 20px #ff4b2b; /* Neon Efekti */
}

.container button.hidden{
    background-color: transparent;
    border-color: #fff;
    box-shadow: none;
}

.container form{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    height: 100%;
}

.container input{
    background-color: #eee;
    border: none;
    margin: 8px 0;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 8px;
    width: 100%;
    outline: none;
}

.form-container{
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in{
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.active .sign-in{
    transform: translateX(100%);
}

.sign-up{
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: move 0.6s;
}

@keyframes move{
    0%, 49.99%{
        opacity: 0;
        z-index: 1;
    }
    50%, 100%{
        opacity: 1;
        z-index: 5;
    }
}

.social-icons{
    margin: 20px 0;
}

.social-icons a{
    border: 1px solid #ccc;
    border-radius: 20%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 3px;
    width: 40px;
    height: 40px;
}

.toggle-container{
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    border-radius: 150px 0 0 100px;
    z-index: 1000;
}

.container.active .toggle-container{
    transform: translateX(-100%);
    border-radius: 0 150px 100px 0;
}

.toggle{
    background-color: #ff4b2b;
    height: 100%;
    background: linear-gradient(to right, #ff416c, #ff4b2b);
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.container.active .toggle{
    transform: translateX(50%);
}

.toggle-panel{
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.toggle-left{
    transform: translateX(-200%);
}

.container.active .toggle-left{
    transform: translateX(0);
}

.toggle-right{
    right: 0;
    transform: translateX(0);
}

.container.active .toggle-right{
    transform: translateX(200%);
}

/* Çok Adımlı Form Stilleri */
#msform {
    width: 100%;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative;
}

#msform fieldset:not(:first-of-type) {
    display: none;
}

.action-button {
    width: 100px;
    margin: 10px 5px;
}

/* İlerleme Çubuğu */
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
    display: flex;
    justify-content: center;
}
#progressbar li {
    list-style-type: none;
    color: #666;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    position: relative;
    text-align: center;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: #ddd;
    border-radius: 50%;
    margin: 0 auto 5px auto;
}
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #ddd;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1;
}
#progressbar li:first-child:after {
    content: none;
}
#progressbar li.active:before, #progressbar li.active:after {
    background: #ffc107; /* Sarı Neon */
    color: white;
    box-shadow: 0 0 15px #ffc107; /* Neon Efekti */
}

JS

javascript 3 // Giriş ve Kayıt Formu Geçişi
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');

registerBtn.addEventListener('click', () => {
    container.classList.add("active");
});

loginBtn.addEventListener('click', () => {
    container.classList.remove("active");
});

// Çok Adımlı Kayıt Formu Mantığı
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;

$(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    // İlerleme çubuğunu aktifleştir
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    // Sonraki adımı göster
    next_fs.show(); 
    
    // Mevcut adımı animasyonla gizle
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 1 - (1 - now) * 0.2;
            left = (now * 50)+"%";
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale('+scale+')',
                'position': 'absolute',
                'top': 0, // Düzgün animasyon için
                'width': '100%' // Düzgün animasyon için
            });
            next_fs.css({'left': left, 'opacity': opacity, 'position': 'relative'});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    // İlerleme çubuğundaki aktif durumu kaldır
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    // Önceki adımı göster
    previous_fs.show(); 
    
    // Mevcut adımı animasyonla gizle
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left, 'position': 'absolute', 'top': 0, 'width': '100%'});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity, 'position': 'relative'});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

// Formu gönderme
$(".submit").click(function(){
    return false;
})

Recomendado

Adicionar botão para abrir adicionar dados de perfil com validação

sistema de doação com valores múltiplos

Confronto de Metamorfos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS