Form Validation Attributes

<form>
    <!-- Required -->
    <label>Name <input type="text" name="name" required></label>

    <!-- Length bounds -->
    <label>
        Bio (10-500 chars)
        <textarea name="bio" minlength="10" maxlength="500" required></textarea>
    </label>

    <!-- Numeric bounds + step -->
    <label>
        Age (13-120)
        <input type="number" name="age" min="13" max="120" step="1" required>
    </label>

    <!-- Pattern (regex) -->
    <label>
        Username (3-20 chars, a-z 0-9 _)
        <input type="text" name="username"
               pattern="[a-z0-9_]{3,20}"
               title="Lowercase letters, digits, and underscores only"
               required>
    </label>

    <!-- Email — type=email enforces basic email shape automatically -->
    <label>Email <input type="email" name="email" required></label>

    <!-- Multiple emails (comma-separated) -->
    <label>CC <input type="email" name="cc" multiple></label>

    <!-- File constraints -->
    <label>
        Avatar (JPG/PNG, ≤2 MB — size enforced server-side)
        <input type="file" name="avatar" accept="image/jpeg,image/png" required>
    </label>

    <button type="submit">Save</button>
</form>

<!-- Style invalid state with the :invalid / :user-invalid pseudo-classes:
     input:user-invalid { border-color: red; }   -->