Formulaire de connexion génial

1,917 hasan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 March 2025

Un code par ytr3d3

22 January 2026

Modèle HTML pour un mode de vie durable et une retraite en pleine nature

21 March 2026

Bouquet de fleurs animé CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Login Form</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>

<div class="login-container">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Please login to your account</p>
        </div>

<form id="loginForm">
            <div class="input-group">
                <input type="email" id="email" required>
                <label for="email">Email</label>
                <div class="error-message" id="email-error">Please enter a valid email</div>
            </div>

<div class="input-group">
                <input type="password" id="password" required>
                <label for="password">Password</label>
                <div class="error-message" id="password-error">Password must be at least 6 characters</div>
            </div>

<div class="forgot-password">
                <a href="#">Forgot Password?</a>
            </div>

<button type="submit" class="login-button">Login</button>

<div class="signup-link">
                Don't have an account? <a href="#" class="signup-text">Sign up</a>
            </div>

CSS

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

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

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90%;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    z-index: 10;
}

.login-container:hover {
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
    z-index: -1;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h1 {
    color: #333;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.login-header p {
    color: #666;
    font-size: 14px;
}

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

.input-group input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    background-color: #f5f5f5;
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.input-group input:focus {
    background-color: #e9e9e9;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-group label {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.input-group input:focus + label,
.input-group input:valid + label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    background-color: #fff;
    padding: 0 5px;
    color: #764ba2;
}

.forgot-password {
    text-align: right;
    margin-bottom: 20px;
}

.forgot-password a {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password a:hover {
    color: #764ba2;
}

.login-button {
    width: 100%;
    padding: 15px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
}

.login-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.6);
}

.login-button:active {
    transform: translateY(0);
}

.signup-link {
    text-align: center;
    margin-top: 30px;
    color: #666;
    font-size: 14px;
}

.signup-link a.signup-text {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
}

.social-login {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-5px);
}

.facebook {
    background-color: #3b5998;
}

.google {
    background-color: #db4437;
}

.twitter {
    background-color: #1da1f2;
}

.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 30px 20px;
    }
    
    .login-header h1 {
        font-size: 24px;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const emailError = document.getElementById('email-error');
    const passwordError = document.getElementById('password-error');

// Floating label functionality
    const inputs = document.querySelectorAll('.input-group input');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentNode.querySelector('label').classList.add('active');
        });
        
        input.addEventListener('blur', function() {
            if (this.value === '') {
                this.parentNode.querySelector('label').classList.remove('active');
            }
        });
        
        // Initialize labels if inputs have values
        if (input.value !== '') {
            input.parentNode.querySelector('label').classList.add('active');
        }
    });

// Form validation
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        let isValid = true;

// Email validation
        if (!validateEmail(emailInput.value)) {
            emailError.style.display = 'block';
            emailInput.parentNode.classList.add('error');
            isValid = false;
        } else {
            emailError.style.display = 'none';
            emailInput.parentNode.classList.remove('error');
        }

// Password validation
        if (passwordInput.value.length < 6) {
            passwordError.style.display = 'block';
            passwordInput.parentNode.classList.add('error');
            isValid = false;
        } else {
            passwordError.style.display = 'none';
            passwordInput.parentNode.classList.remove('error');
        }

if (isValid) {
            // Simulate successful login
            document.querySelector('.login-button').textContent = 'Logging in...';
            
            setTimeout(() => {
                alert('Login successful!');
                form.reset();
                document.querySelector('.login-button').textContent = 'Login';
                
                // Remove active class from labels
                inputs.forEach(input => {
                    input.parentNode.querySelector('label').classList.remove('active');
                });
            }, 1500);
        }
    });

function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

// Add ripple effect to login button
    const loginButton = document.querySelector('.login-button');
    loginButton.addEventListener('click', function(e) {
        const x = e.clientX - e.target.getBoundingClientRect().left;
        const y = e.clientY - e.target.getBoundingClientRect().top;
        
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 1000);
    });
});