Handling Forms and User Input

# CHAPTER 7

Handling Forms and User Input #

1. Introduction #

2. Learning Objectives #

• Create an HTML form with the correct action and method attributes.

• Import and utilize the global request object in Flask.

• Differentiate between request.args (GET) and request.form (POST).

• Process form submissions within a View function.

• Use redirect to prevent duplicate form submissions.

3. Beginner-Friendly Explanation #

• GET Request: You pull up and say, "Give me the menu." The cashier hands you the blank menu (The HTML Form).

• POST Request: You fill out the menu with your order, attach your credit card, and hand it back through the window.

In Flask, ONE single window (The View Function) has to handle both interactions. When a car pulls up, the cashier (Python) must ask, "Are you here to GET a blank menu, or are you here to POST a finished order?" Based on the answer, the cashier performs a completely different action.

4. Step 1: Building the HTML Form #

{% extends "base.html" %}
{% block content %}
    <h1>Login</h1>
    <!-- The method MUST be POST for sensitive data -->
    <form action="/login" method="POST">
        <!-- The &#039;name' attribute is critical! Python uses this to find the data -->
        <label>Email:</label>
        <input type="text" name="user_email" required>
        
        <label>Password:</label>
        <input type="password" name="user_password" required>
        
        <button type="submit">Login</button>
    </form>
{% endblock %}

5. Step 2: The View Function (GET vs POST) #

In app.py:

# Import request, redirect, and url_for
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/login', methods=['GET', 'POST'])
def login():
    # If the user clicked the Submit button...
    if request.method == 'POST':
        # Extract the data using the 'name' attributes from the HTML!
        email = request.form.get('user_email')
        password = request.form.get('user_password')
        
        # (In a real app, you would check the database here)
        if email == 'admin@test.com' and password == 'secret':
            return f"Welcome, {email}!"
        else:
            return "Invalid credentials. Try again."
            
    # If the user just typed the URL in their browser...
    else:
        return render_template('login.html')

6. Step 3: The Redirect Pattern (PRG) #

Updating the logic:

        if email == 'admin@test.com' and password == 'secret':
            # Instead of returning a string, redirect them to the homepage!
            return redirect(url_for('home'))

7. Step 4: Extracting GET Data (Query Strings) #

To extract data from the URL, we use request.args instead of request.form.

# Route: /search
@app.route('/search')
def search():
    # Extracts the 'q' variable from the URL (?q=flask)
    query = request.args.get('q')
    
    if query:
        return f"Searching database for: {query}"
    return "Please enter a search term."

8. Backend Workflow: WTForms (Advanced Forms) #

9. Best Practices #

• Use .get() Instead of Dictionary Keys: Always use request.form.get('email') instead of request.form['email']. If the HTML form is broken and the 'email' field is missing, using dictionary brackets ['email'] will crash the entire server with a KeyError. Using .get() will safely return None without crashing.

10. Common Mistakes #

• Forgetting methods=['GET', 'POST']: The #1 mistake beginners make is writing the HTML <form method="POST">, clicking submit, and seeing a "Method Not Allowed" error. By default, Flask routes only accept GET. You must explicitly add the methods list to the decorator.

11. Exercises #

1. 1. Explain the Post/Redirect/Get (PRG) pattern. Why is it dangerous to simply rendertemplate after successfully processing a POST request (like a credit card charge)?

14. Interview Questions #

• Q: Contrast request.args and request.form in Flask. Under what HTTP circumstances would you use each?

• Q: Explain why sensitive data (like passwords) must NEVER be transmitted using an HTML form configured with method="GET".

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #