Why form handling matters in Flask - See It in Action

Why form handling matters

📖 Scenario: You are building a simple web page where users can submit their favorite color. This color will be saved and shown back to them. Handling forms correctly is important to get user input and respond properly.

🎯 Goal: Create a Flask app that shows a form to enter a favorite color, accepts the form submission, and then displays the chosen color on a new page.

📋 What You'll Learn

Create a Flask app with a route for the form page

Add a form in HTML with a text input named color and a submit button

Create a route to handle the form submission using POST method

Display the submitted color on a new page after submission

💡 Why This Matters

🌍 Real World

Form handling is essential for websites to get user input like login info, search queries, or preferences.

💼 Career

Understanding form handling is a key skill for web developers working with backend frameworks like Flask.

1

Set up Flask app and form route

Create a Flask app instance called app and add a route for '/' that returns an HTML form with a text input named color and a submit button. Use the POST method in the form tag.

Flask

from flask import Flask, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    # Return HTML form with input named 'color' and submit button
    pass

Hint

Remember to create the Flask app instance and define a route for '/' that returns the HTML form with method POST.

2

Check for form submission and get color

Inside the home function, add code to check if the request method is POST. If yes, get the submitted color from request.form using the key 'color' and save it in a variable called favorite_color.

Flask

from flask import Flask, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        # Get the submitted color from the form
        pass
    return '''
    
        Enter your favorite color:
        
        Submit
    
    '''

Hint

Use request.method == 'POST' to check if the form was submitted, then get the value with request.form['color'].

3

Show the submitted color after form submission

Modify the home function so that if favorite_color is set (not None), it returns a page showing the text Your favorite color is: {favorite_color} instead of the form.

Flask

from flask import Flask, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        favorite_color = request.form['color']
        # Return a page showing the favorite color
        pass
    else:
        favorite_color = None
    return '''
    
        Enter your favorite color:
        
        Submit
    
    '''

Hint

Use an f-string to insert favorite_color into the returned HTML string.

4

Run the Flask app

Add the code to run the Flask app only if the script is run directly. Use app.run(debug=True) inside the if __name__ == '__main__': block.

Flask

from flask import Flask, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        favorite_color = request.form['color']
        return f'Your favorite color is: {favorite_color}'
    else:
        favorite_color = None
    return '''
    
        Enter your favorite color:
        
        Submit
    
    '''

# Add code to run the app below
# Your code here

Hint

Use the standard Python check if __name__ == '__main__': to run app.run(debug=True).

Practice

1. Why is form handling important in a Flask web application?

easy

A. It speeds up the loading time of the website.

B. It automatically styles the form elements on the page.

C. It prevents users from accessing the website without a password.

D. It allows the app to receive and process user input from forms.

Solution

1. Step 1: Understand the role of form handling

   Form handling lets the app get data users type into forms, like names or messages.

2. Step 2: Identify the correct purpose in Flask

   Flask uses request.form to access this data and respond accordingly.

3. Final Answer:

   It allows the app to receive and process user input from forms. -> Option D

4. Quick Check:

   Form handling = process user input [OK]

Hint: Form handling = getting user input from forms [OK]

Common Mistakes:

• Thinking form handling styles the form
• Confusing form handling with authentication
• Believing form handling improves page speed

2. Which of the following is the correct way to access form data in a Flask route?

easy

A. request.form.get('field_name')

B. request.get('form')

C. request.data['field_name']

D. request.form['field_name']

Solution

1. Step 1: Recall Flask form data access methods

   Flask provides request.form as a dictionary-like object for form data.

2. Step 2: Choose the safe way to get a field

   Using request.form.get('field_name') safely returns the value or None if missing, avoiding errors.

3. Final Answer:

   request.form.get('field_name') -> Option A

4. Quick Check:

   Safe form data access = request.form.get() [OK]

Hint: Use request.form.get() to safely get form fields [OK]

Common Mistakes:

• Using request.get('form') which is invalid
• Using request.data which is for raw data
• Using request.form['field_name'] without checking existence

3. What will be the output of this Flask route when a POST form with field 'username'='Alice' is submitted?

from flask import Flask, request
app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit():
    user = request.form.get('username')
    return f"Hello, {user}!"

medium

A. Hello, None!

B. Hello, Alice!

C. Hello, !

D. Error: KeyError

Solution

1. Step 1: Understand form data retrieval

   The route uses request.form.get('username') which returns the value 'Alice' from the submitted form.

2. Step 2: Analyze the returned string

   The function returns the string with 'Alice' inserted, so the output is 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Form field 'username' = 'Alice' output correct [OK]

Hint: request.form.get() returns submitted value or None [OK]

Common Mistakes:

• Expecting KeyError instead of None
• Confusing request.form.get() with request.form[]
• Ignoring the form method POST requirement

4. Identify the error in this Flask form handling code:

from flask import Flask, request
app = Flask(__name__)

@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']
    return f"User: {username}, Pass: {password}"

medium

A. Flask does not support request.form for form data.

B. The route should accept GET method instead of POST.

C. Using request.form['username'] can cause KeyError if field missing.

D. The return statement should be inside an if block.

Solution

1. Step 1: Check form data access method

   Using request.form['username'] raises KeyError if 'username' is missing in form data.

2. Step 2: Suggest safer alternative

   Using request.form.get('username') avoids errors by returning None if missing.

3. Final Answer:

   Using request.form['username'] can cause KeyError if field missing. -> Option C

4. Quick Check:

   Direct dict access risks KeyError [OK]

Hint: Use request.form.get() to avoid KeyError on missing fields [OK]

Common Mistakes:

• Thinking GET method is required for form data
• Believing Flask can't use request.form
• Assuming return must be inside if block

5. You want to create a Flask route that handles a form submission with optional 'email' field. If 'email' is missing, it should return 'Email not provided'. Which code snippet correctly handles this?

hard

A. email = request.form.get('email')
if email is None:
return 'Email not provided'
return f'Email: {email}'

B. email = request.form['email']
if not email:
return 'Email not provided'
return f'Email: {email}'

C. email = request.args.get('email')
if email == '':
return 'Email not provided'
return f'Email: {email}'

D. email = request.form.get('email')
if email == '':
return 'Email not provided'
return f'Email: {email}'

Solution

1. Step 1: Use request.form.get() for optional fields

   This safely returns None if 'email' is missing, avoiding errors.

2. Step 2: Check for None to detect missing field

   Comparing to None correctly identifies absence, then returns the message.

3. Final Answer:

   email = request.form.get('email')\nif email is None:\n return 'Email not provided'\nreturn f'Email: {email}' -> Option A

4. Quick Check:

   Optional field check uses get() and None test [OK]

Hint: Use get() and check for None to handle optional form fields [OK]

Common Mistakes:

• Using request.form['email'] causing KeyError
• Checking empty string instead of None for missing field
• Using request.args.get() for POST form data