Handling Form Data

HTML forms usually submit data using POST with a content type like:

• application/x-www-form-urlencoded
• multipart/form-data (required for file uploads)

diagram POST then redirect then GET, and why the redirect is not optional mermaid

  flowchart TD
  A["GET /contact"] --> B["render the empty form"]
  B --> C["POST /contact with the data"]
  C --> D{"valid?"}
  D -->|no| E["re-render the form with errors"]
  E --> C
  D -->|yes| F["do the work: save, send, charge"]
  F --> G["flash a message"]
  G --> H["redirect (302) to a GET route"]
  H --> I["GET /thanks"]
  I --> J["reload is now harmless -- it repeats the GET, not the POST"]

If a POST responds with HTML directly, the browser remembers the POST. Reloading that page re-submits the form, and the back button offers to do it again -- so the order is placed twice. Answering with a redirect means the address the browser ends up on is a plain GET, which is safe to reload and safe to bookmark.

Minimal example (no Flask-WTF yet)

Template templates/contact.html:

html

<form method="post">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="Email" />
  <button type="submit">Send</button>
</form>

Route:

python

from flask import Flask, request, render_template
 
app = Flask(__name__)
 
 
@app.route("/contact", methods=["GET", "POST"])
def contact():
    if request.method == "POST":
        name = request.form.get("name", "")
        email = request.form.get("email", "")
 
        # TODO: validate input here
        return f"Thanks {name}, we received {email}!"
 
    return render_template("contact.html")

Common pitfalls

• Missing methods=["GET", "POST"] → POST returns 405
• Forgetting to validate user input
• Returning a success page directly after POST (refresh resubmits)

Best practice: PRG pattern

After a successful POST:

• save/process data
• redirect() to a GET route

This prevents double submission on refresh.

🧪 Try It Yourself

Exercise 1 – Create a Flask App

pch.exerciseTag pch.exerciseTitle

Exercise 2 – Dynamic Route

pch.exerciseTag pch.exerciseTitle

Exercise 3 – Return JSON

pch.exerciseTag pch.exerciseTitle