Forms — Form() instead of JSON body

HTML forms send application/x-www-form-urlencoded, not JSON. Use Form(...) to receive.

main.py v3.1

from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse, RedirectResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory='templates')

# Show the form
@app.get('/', response_class=HTMLResponse)
async def form(request: Request):
    return templates.TemplateResponse('form.html', {'request': request})

# Receive the form submission
@app.post('/submit')
async def submit(
    name: str = Form(...),
    email: str = Form(...),
    age: int = Form(...),
):
    # Form(...) tells FastAPI to read from form-encoded body, not JSON
    return {'name': name, 'email': email, 'age': age}

# form.html:
"""
<form method="post" action="/submit">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="number" name="age" required>
  <button type="submit">Submit</button>
</form>
"""
# NOTE: form enctype defaults to application/x-www-form-urlencoded
# For file uploads, use enctype="multipart/form-data" + UploadFile = File(...)

# POST /submit with form data:
# name=Ada&email=ada@x.com&age=36
# -> 200, returns {'name': 'Ada', 'email': 'ada@x.com', 'age': 36}

# After form submit, redirect to a thank-you page
@app.post('/submit2')
async def submit_and_redirect(
    name: str = Form(...),
    email: str = Form(...),
):
    # Process the form...
    print(f'Got: {name} <{email}>')
    # Redirect to avoid resubmission on refresh
    return RedirectResponse(url='/thanks', status_code=303)

API simulator click Simulate

Click "Simulate" to see what this FastAPI app does.

🧠 How it works

Form(...) — like Body(...) but reads from form-encoded body. Each Form arg name MUST match the input name='' in HTML. HTML forms send form-encoded by default (key=value&key=value), not JSON. For file uploads: <form enctype='multipart/form-data'> + UploadFile = File(...). PRG pattern (Post/Redirect/Get): after a POST, redirect to a GET page — prevents the 'Confirm Form Resubmission' browser warning on refresh. Use status_code=303 (See Other) for the redirect — it's the correct code for PRG.

✏️ Try these changes

Add a new form field: message: str = Form(...)
→ add a textarea to the form
Change age: int = Form(...) to age: int = Form(0)
→ age becomes optional with default 0
Change RedirectResponse status_code from 303 to 302
→ still works, but 303 is technically correct for PRG
Add a checkbox: agree: bool = Form(False)
→ checkbox only sends a value when checked

← Previous lab

Dependency injection — Depends()

Next lab →

Static files — CSS, JS, images