Modèle de formulaire de connexion HTML CSS

1,452 webleb

Ouvrir dans l'éditeur Publiez votre code

Modèle de formulaire de connexion HTML CSS

Recommandé

22 December 2025

Code d'intégration HTML5 du jeu Geometry Dash Lite

4 December 2024

Curseur de carte animé extensible

10 February 2025

Un code par bachir123

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #71b7e6, #9b59b6);
            color: #333;
        }

/* Form Container Styling */
        .login-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-sizing: border-box; /* Include padding in width */
        }

.login-container h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
            position: relative;
            padding-bottom: 10px;
        }

.login-container h2::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: #9b59b6;
            border-radius: 5px;
        }

/* Input Group Styling */
        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

.input-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 16px;
        }

.input-group input[type="text"],
        .input-group input[type="password"] {
            width: calc(100% - 20px); /* Account for padding */
            padding: 12px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

.input-group input[type="text"]:focus,
        .input-group input[type="password"]:focus {
            border-color: #9b59b6;
            outline: none;
            box-shadow: 0 0 5px rgba(155, 89, 182, 0.3);
        }

/* Remember Me & Forgot Password */
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }

.remember-forgot label {
            display: flex;
            align-items: center;
            color: #555;
            cursor: pointer;
        }

.remember-forgot input[type="checkbox"] {
            margin-right: 8px;
            accent-color: #9b59b6; /* Custom color for checkbox */
        }

.remember-forgot a {
            color: #71b7e6;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.remember-forgot a:hover {
            color: #9b59b6;
        }

/* Submit Button */
        button[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #71b7e6;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

button[type="submit"]:hover {
            background-color: #9b59b6;
            transform: translateY(-2px);
        }

button[type="submit"]:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

/* Register Link */
        .register-link {
            margin-top: 25px;
            font-size: 15px;
            color: #555;
        }

.register-link a {
            color: #71b7e6;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

.register-link a:hover {
            color: #9b59b6;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="#" method="POST">
            <div class="input-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="remember-forgot">
                <label>
                    <input type="checkbox" name="remember-me"> Remember me
                </label>
                <a href="#">Forgot Password?</a>
            </div>
            <button type="submit">Login</button>
            <div class="register-link">
                Don't have an account? <a href="#">Register here</a>
            </div>
        </form>
    </div>
</body>
</html>

CSS