Formulaire d'inscription HTML animé

1,385 codex

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 May 2023

Bouton de téléchargement animé

30 August 2025

Bouton et calque animés CSS

20 March 2026

Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Register Form</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
            overflow: hidden; /* Prevent scrollbar during initial animation */
        }

/* Form Container */
        .register-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-sizing: border-box;
            opacity: 0; /* Start hidden for animation */
            transform: translateY(20px); /* Start slightly below for slide-up effect */
            animation: fadeInSlideUp 0.8s ease-out forwards;
            animation-delay: 0.2s; /* Delay the main form animation slightly */
        }

/* Animation Keyframes for main container */
        @keyframes fadeInSlideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Form Title */
        .register-container h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 2em;
            letter-spacing: 1px;
            opacity: 0; /* Start hidden for animation */
            transform: translateY(-10px); /* Start slightly above for slide-down effect */
            animation: textFadeIn 1s ease-out forwards;
            animation-delay: 0.5s; /* Delay title animation */
        }

/* Animation Keyframes for title */
        @keyframes textFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Form Group (for labels and inputs) */
        .form-group {
            margin-bottom: 20px;
            text-align: left;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            transition: color 0.3s ease;
        }

.form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1em;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

.form-group input:focus {
            outline: none;
            border-color: #2575fc;
            box-shadow: 0 0 8px rgba(37, 117, 252, 0.3);
        }

/* Submit Button */
        .register-button {
            width: 100%;
            padding: 15px;
            background-color: #2575fc;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            margin-top: 20px;
            overflow: hidden; /* For ripple effect if added later */
            position: relative;
        }

.register-button:hover {
            background-color: #1a5acb;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

.register-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

/* Already have an account link */
        .login-link {
            margin-top: 25px;
            font-size: 0.9em;
            color: #777;
        }

.login-link a {
            color: #2575fc;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

.login-link a:hover {
            color: #1a5acb;
            text-decoration: underline;
        }

/* Optional: Subtle background animation */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, transparent 50%),
                        radial-gradient(circle at bottom right, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: backgroundPulse 10s infinite alternate;
            z-index: -1;
        }

@keyframes backgroundPulse {
            0% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2>Register Account</h2>
        <form action="#" method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <div class="form-group">
                <label for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm your password" required>
            </div>
            <button type="submit" class="register-button">Register</button>
        </form>
        <p class="login-link">Already have an account? <a href="#">Login here</a></p>
    </div>
</body>
</html>

CSS