HTML Exercises

Styled Forms with Advanced Animations

Creating advanced styled forms with animations in CSS involves various techniques like input field animations, focus effects, button hover transitions, and error message handling. Below is an example of a highly-styled form with interactive elements, smooth animations, and responsive design, using internal CSS.

    HTML (index.html)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Styled Form with Advanced Animations</title>
        <style>
            * {
                box-sizing: border-box;
            }
    
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f4f7fa;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                margin: 0;
            }
    
            .form-container {
                background-color: white;
                padding: 40px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                max-width: 400px;
                width: 100%;
            }
    
            h2 {
                text-align: center;
                margin-bottom: 20px;
                color: #3b82f6;
            }
    
            /* Input and label wrapper */
            .form-group {
                position: relative;
                margin-bottom: 30px;
            }
    
            /* Styling for the inputs */
            input[type="text"], input[type="email"], input[type="password"] {
                width: 100%;
                padding: 15px 10px;
                border: 2px solid #cbd5e1;
                border-radius: 5px;
                outline: none;
                font-size: 16px;
                background-color: transparent;
                transition: border-color 0.3s ease, background-color 0.3s ease;
            }
    
            /* Styling for focus effect */
            input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
                border-color: #3b82f6;
                background-color: #f0f8ff;
            }
    
            /* Label animations */
            label {
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
                color: #6b7280;
                transition: all 0.3s ease;
                pointer-events: none;
            }
    
            /* When input is focused or filled, animate label */
            input:focus + label, input:not(:placeholder-shown) + label {
                top: -10px;
                left: 5px;
                color: #3b82f6;
                font-size: 12px;
                background-color: white;
                padding: 0 5px;
            }
    
            /* Button styling */
            .form-button {
                width: 100%;
                padding: 15px;
                background-color: #3b82f6;
                color: white;
                border: none;
                border-radius: 5px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
    
            .form-button:hover {
                background-color: #2563eb;
            }
    
            /* Keyframe animations for input shake effect */
            @keyframes shake {
                0% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                50% { transform: translateX(5px); }
                75% { transform: translateX(-5px); }
                100% { transform: translateX(0); }
            }
    
            /* Error class for inputs */
            .error {
                border-color: #ef4444;
                animation: shake 0.3s ease;
            }
    
            .error-label {
                color: #ef4444;
            }
    
            /* Success message styling */
            .success-message {
                text-align: center;
                color: #10b981;
                font-size: 14px;
                margin-top: 10px;
                opacity: 0;
                animation: fadeIn 0.5s forwards;
            }
    
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
    
            /* Checkbox styling */
            .checkbox-group {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
            }
    
            .checkbox-group input[type="checkbox"] {
                margin-right: 10px;
                accent-color: #3b82f6;
            }
    
            /* Advanced hover animation for button */
            .form-button:hover {
                background-position: right center;
            }
    
            /* Media query for responsiveness */
            @media (max-width: 768px) {
                .form-container {
                    padding: 20px;
                }
    
                h2 {
                    font-size: 24px;
                }
    
                .form-button {
                    font-size: 14px;
                }
            }
        </style>
    </head>
    <body>
    
        <div class="form-container">
            <h2>Register</h2>
            <form>
                <!-- Full Name Input -->
                <div class="form-group">
                    <input type="text" id="full-name" placeholder=" " required>
                    <label for="full-name">Full Name</label>
                </div>
    
                <!-- Email Input -->
                <div class="form-group">
                    <input type="email" id="email" placeholder=" " required>
                    <label for="email">Email</label>
                </div>
    
                <!-- Password Input -->
                <div class="form-group">
                    <input type="password" id="password" placeholder=" " required>
                    <label for="password">Password</label>
                </div>
    
                <!-- Checkbox -->
                <div class="checkbox-group">
                    <input type="checkbox" id="terms" required>
                    <label for="terms">I agree to the terms and conditions</label>
                </div>
    
                <!-- Submit Button -->
                <button type="submit" class="form-button">Submit</button>
    
                <!-- Success Message -->
                <div class="success-message" id="success-message">Form submitted successfully!</div>
            </form>
        </div>
    
    </body>
    </html>
  1. Save and open index.html in your browser to view your website.

    2. Features of This Form:

    1. Floating Labels:
      • Labels move above the input fields when the user focuses on them or starts typing (input:focus + label).
    2. Smooth Transitions:
      • The border color, background color, and label position transition smoothly when the input is focused.
    3. Shake Animation for Error:
      • If the input receives an error, the input will shake with a shake animation using CSS keyframes (you can manually add the .error class to test this).
    4. Hover Effects:
      • The submit button changes color on hover for a sleek, interactive effect.
    5. Responsive Design:
      • The form adapts to smaller screens using media queries, making it mobile-friendly.
    6. Advanced Checkbox Styling:
      • A custom-styled checkbox, with color accenting when checked, gives a polished look to the form.

    This example provides a clean and modern form layout, featuring advanced animations for an improved user experience. It can be extended further by adding real-time validation with CSS pseudo-classes like :valid and :invalid.

Feel free to customize the content and structure as you like.