Module capstone: signup form matching a Pydantic schema

Putting A3 together

Your FastAPI endpoint:

class Signup(BaseModel):
    email: EmailStr
    password: str = Field(min_length=8)
    age: int = Field(ge=13, le=120)
    country: Literal["us", "ua", "de"]
    bio: str = Field(default="", max_length=500)
    accepted_tos: bool

@app.post("/api/signup")
async def signup(data: Annotated[Signup, Form()]):
    return data

Your job: build the HTML form whose request body matches this schema 1:1. Field names match. Validation matches. autocomplete hints are set. Labels are linked. Group into fieldsets.

What "matches" means

• For email: EmailStr → <input type="email" name="email" required autocomplete="email">
• For password: Field(min_length=8) → <input type="password" name="password" required minlength="8" autocomplete="new-password">
• For age: Field(ge=13, le=120) → <input type="number" name="age" required min="13" max="120">
• For country: Literal["us", "ua", "de"] → <select name="country" required> with those three options
• For bio: Field(max_length=500) → <textarea name="bio" maxlength="500"> (NOT required since default="")
• For accepted_tos: bool → <input type="checkbox" name="accepted_tos" value="yes" required>

This is the API contract first mindset that the rest of A3 led up to.