HTML Form Validation: Attributes, Rules, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Form Validation Showcase</title>
    <style>
        .form-row { margin-bottom: 14px; }
        label { display: block; font-weight: bold; margin-bottom: 4px; }
        input { padding: 8px 12px; width: 100%; max-width: 360px; border: 2px solid #cbd5e1; border-radius: 6px; }
        /* Real-time CSS validation feedback */
        input:focus:invalid { border-color: #ef4444; background: #fef2f2; }
        input:focus:valid { border-color: #22c55e; background: #f0fdf4; }
        .help-text { font-size: 0.8rem; color: #64748b; margin-top: 4px; }
    </style>
</head>
<body>
    <h2>Native Client-Side Form Validation</h2>
    <form action="/submit-account" method="POST">
        <!-- Required Email Validation -->
        <div class="form-row">
            <label for="userEmail">Corporate Email</label>
            <input type="email" id="userEmail" name="email" required placeholder="name@company.com">
        </div>

        <!-- Pattern Validation (5 Digit Postal Code) -->
        <div class="form-row">
            <label for="zipCode">US Zip Code (5 Digits)</label>
            <input type="text" id="zipCode" name="zip" required pattern="[0-9]{5}" title="Please enter exactly 5 digits" placeholder="90210">
            <div class="help-text">Must be a valid 5-digit postal code.</div>
        </div>

        <!-- MinLength and MaxLength -->
        <div class="form-row">
            <label for="username">Username (4 to 12 characters)</label>
            <input type="text" id="username" name="user" required minlength="4" maxlength="12" pattern="^[a-zA-Z0-9_]+$">
        </div>

        <button type="submit" style="background: #2563eb; color: #fff; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer;">
            Submit Validated Form
        </button>
    </form>
</body>
</html>