Formulaire de connexion HTML avancé

Ouvrir dans l'éditeur Publiez votre code

Recommandé

7 August 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-hover: #3a56d4;
            --error-color: #ef476f;
            --text-color: #2b2d42;
            --text-light: #8d99ae;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --border-radius: 8px;
            --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

body {
            background-color: var(--bg-color);
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

.login-container {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 100%;
            max-width: 420px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

.login-container::before {
            content: "";
            position: absolute;
            top: -50px;
            left: -50px;
            width: 150px;
            height: 150px;
            background-color: rgba(67, 97, 238, 0.1);
            border-radius: 50%;
            z-index: 0;
        }

.login-container::after {
            content: "";
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 120px;
            height: 120px;
            background-color: rgba(67, 97, 238, 0.05);
            border-radius: 50%;
            z-index: 0;
        }

.login-header {
            text-align: center;
            margin-bottom: 35px;
            position: relative;
            z-index: 1;
        }

.login-header h1 {
            color: var(--text-color);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 12px;
        }

.login-header p {
            color: var(--text-light);
            font-size: 15px;
        }

.form-group {
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
            font-size: 15px;
        }

.input-group {
            position: relative;
        }

.input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            font-size: 18px;
        }

.form-group input {
            width: 100%;
            padding: 14px 15px 14px 40px;
            border: 1px solid #e1e5ee;
            border-radius: var(--border-radius);
            font-size: 15px;
            transition: var(--transition);
            background-color: #f9fafc;
        }

.form-group input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
            background-color: white;
        }

.form-group input.error {
            border-color: var(--error-color);
            background-color: #fff8f8;
        }

.error-message {
            color: var(--error-color);
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

.remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 1;
        }

.remember-me {
            display: flex;
            align-items: center;
        }

.remember-me input {
            margin-right: 8px;
            accent-color: var(--primary-color);
        }

.remember-me label {
            color: var(--text-light);
            font-size: 14px;
        }

.forgot-password {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition);
        }

.forgot-password:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

.login-button {
            width: 100%;
            padding: 14px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.login-button:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

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

.signup-link {
            text-align: center;
            margin-top: 25px;
            font-size: 14px;
            color: var(--text-light);
            position: relative;
            z-index: 1;
        }

.signup-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

.signup-link a:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

.social-login {
            margin-top: 30px;
            position: relative;
            z-index: 1;
        }

.social-login-text {
            text-align: center;
            position: relative;
            margin-bottom: 20px;
        }

.social-login-text span {
            background-color: white;
            padding: 0 15px;
            color: var(--text-light);
            font-size: 14px;
            position: relative;
            z-index: 2;
        }

.social-login-text::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e1e5ee;
            z-index: 1;
        }

.social-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f9fafc;
            border: 1px solid #e1e5ee;
            cursor: pointer;
            transition: var(--transition);
        }

.social-button:hover {
            background-color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

/* Responsive adjustments */
        @media (max-width: 480px) {
            .login-container {
                padding: 30px 20px;
                max-width: 100%;
            }
            
            .social-buttons {
                gap: 10px;
            }
            
            .social-button {
                width: 45px;
                height: 45px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Enter your credentials to access your account</p>
        </div>
        <form id="login-form">
            <div class="form-group">
                <label for="email">Email Address</label>
                <div class="input-group">
                    <span class="input-icon"></span>
                    <input type="email" id="email" name="email" placeholder="name@example.com" required>
                </div>
                <div class="error-message" id="email-error">Please enter a valid email address</div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <div class="input-group">
                    <span class="input-icon"></span>
                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
                </div>
                <div class="error-message" id="password-error">Password must be at least 6 characters</div>
            </div>
            <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember" name="remember">
                    <label for="remember">Remember me</label>
                </div>
                <a href="#" class="forgot-password">Forgot Password?</a>
            </div>
            <button type="submit" class="login-button">Sign In</button>
            <div class="signup-link">
                Don't have an account? <a href="#">Create account</a>
            </div>
            <div class="social-login">
                <div class="social-login-text">
                    <span>Or continue with</span>
                </div>
                <div class="social-buttons">
                    <div class="social-button">G</div>
                    <div class="social-button">f</div>
                    <div class="social-button">in</div>
                </div>
            </div>
        </form>
    </div>

Formulaire de connexion HTML avancé

Recommandé

Boutons de volume

Un code par alejandrokundrah

Un code par omer

HTML

CSS

JS

Recommandé

Boutons de volume

Un code par alejandrokundrah

Un code par omer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS