required, pattern, minlength, maxlength

HTML validation attributes — your browser's Pydantic

<input required />                                   <!-- can't submit empty -->
<input minlength="8" maxlength="64" />               <!-- length constraints -->
<input pattern="[A-Za-z0-9_]{3,20}" />               <!-- regex match -->
<input pattern="^\+\d{10,15}$" title="E.164 phone format like +14155552671" />

The browser blocks submit and shows a native tooltip. `title=""` customizes that tooltip.

Mirror your Pydantic constraints

class User(BaseModel):
    username: str = Field(min_length=3, max_length=20, pattern=r"^[A-Za-z0-9_]+$")

Becomes:

<input name="username" required minlength="3" maxlength="20"
       pattern="[A-Za-z0-9_]{3,20}" title="3-20 letters, digits, or underscores" />

Same constraint expressed twice, intentionally — the browser blocks 95% of bad input before it ever hits your endpoint, saving you bandwidth and giving instant feedback. Your Pydantic still validates on the server because malicious clients skip the browser.

The pattern attribute uses JS regex

NOT PCRE. NOT Python re. JavaScript regex syntax — most things work, but \d\w\s lookarounds etc. behave slightly differently. Test in the browser, don't trust your Python regex to copy-paste cleanly.