HTML forms with POST method in Flask - Step-by-Step Execution

Concept Flow - HTML forms with POST method

User fills form fields

↓

User clicks Submit button

↓

Browser sends POST request

↓

Flask server receives POST data

↓

Server processes data

↓

Server sends response page

↓

Browser displays response

This flow shows how a user fills a form, submits it via POST, the server processes the data, and sends back a response.

Execution Sample

Flask

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

@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        name = request.form['name']
        return f'Hello, {name}!'
    return '''<form method='POST'><input name='name'><button type='submit'>Submit</button></form>'''

A simple Flask app that shows a form and greets the user by name after POST submission.

Execution Table

Step	Action	Request Method	Form Data	Server Response
1	User visits page	GET	None	Show form with input and submit button
2	User types 'Alice' in input	GET	None	Form still shown, no change
3	User clicks Submit	POST	name=Alice	Server reads 'Alice' and returns 'Hello, Alice!'
4	Browser displays greeting	POST	name=Alice	Page shows: Hello, Alice!
5	User refreshes page	GET	None	Form shown again, ready for new input

💡 Execution stops after server sends response and browser displays it.

Variable Tracker

Variable	Start	After Step 3	After Step 5
request.method	GET	POST	GET
request.form['name']	N/A	Alice	N/A
name	N/A	Alice	N/A

Key Moments - 3 Insights

Why does the server check if request.method is 'POST'?

Because the form page is shown on GET requests, but the server only processes submitted data on POST requests, as shown in execution_table step 3.

What happens if the user refreshes the page after submitting the form?

The browser sends a GET request again, so the form is shown empty, as in execution_table step 5.

Why is the form's method attribute set to 'POST'?

To tell the browser to send form data in the request body, not in the URL, which matches the server expecting POST requests (execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of request.method at step 3?

A POST

B GET

C PUT

D DELETE

💡 Hint

Check the 'Request Method' column at step 3 in the execution_table.

At which step does the server read the form data 'name=Alice'?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Form Data' and 'Action' columns in execution_table.

If the form's method was changed to 'GET', what would change in the execution table?

A Request Method would be POST at step 3 but no form data sent

B Request Method would be GET at step 3 and form data sent in URL

C Server would not receive any data

D Browser would not send any request

💡 Hint

Think about how GET sends data compared to POST, and check the 'Request Method' column.

Concept Snapshot

HTML forms with POST method:
- Use <form method='POST'> to send data securely in request body.
- Server checks if request.method == 'POST' to process data.
- Access submitted data via request.form['fieldname'] in Flask.
- After processing, server returns response (e.g., greeting).
- GET requests show the form; POST requests handle submission.

Full Transcript

This visual trace shows how an HTML form with method POST works in a Flask app. The user visits the page (GET), sees a form, types a name, and submits it. The browser sends a POST request with the form data. The Flask server checks if the request method is POST, reads the form data from request.form, and returns a greeting message. The browser then displays this greeting. Refreshing the page sends a GET request again, showing the form anew. Key points include the difference between GET and POST, how form data is sent, and how the server processes it.

Practice

1. What does the POST method in an HTML form do in a Flask application?

easy

A. Automatically encrypts the form data before sending

B. Sends form data appended to the URL as query parameters

C. Prevents the form from submitting data

D. Sends form data inside the request body, not visible in the URL

Solution

1. Step 1: Understand HTTP methods in forms

   The POST method sends data inside the request body, keeping it hidden from the URL.

2. Step 2: Compare with GET method

   The GET method appends data to the URL, but POST does not, making it safer for sensitive data.

3. Final Answer:

   Sends form data inside the request body, not visible in the URL -> Option D

4. Quick Check:

   POST hides data in request body [OK]

Hint: POST sends data hidden in body, not URL [OK]

Common Mistakes:

• Confusing POST with GET method
• Thinking POST encrypts data automatically
• Believing POST prevents form submission

2. Which of the following is the correct way to specify a form that sends data using POST in HTML?

easy

A. ...

B. ...

C. ...

D. ...

Solution

1. Step 1: Identify the correct attribute for HTTP method

   The method attribute in the form tag defines how data is sent.

2. Step 2: Confirm correct value for POST

   Setting method='post' correctly configures the form to send data via POST.

3. Final Answer:

   <form method='post'>...</form> -> Option A

4. Quick Check:

   Use method='post' in form tag [OK]

Hint: Use method='post' attribute in form tag [OK]

Common Mistakes:

• Using 'action' instead of 'method' for HTTP method
• Writing method='get' when POST is needed
• Using non-standard attributes like 'send'

3. Given this Flask route and form, what will be printed when the form is submitted?

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

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

Send

medium

A. Hello, !

B. Hello, Alice!

C. Error: name not found

D. Hello, request.form!

Solution

1. Step 1: Understand form submission with POST

   The form sends the input named 'name' with value 'Alice' to the '/submit' route via POST.

2. Step 2: Check how Flask reads form data

   The route uses request.form.get('name') to get the value 'Alice' from the form data.

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   request.form.get('name') returns 'Alice' [OK]

Hint: request.form.get('name') reads POST form data [OK]

Common Mistakes:

• Using request.args instead of request.form for POST data
• Not specifying methods=['POST'] in route
• Missing the 'name' attribute in input

4. What is wrong with this Flask route that handles a POST form submission?

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

@app.route('/login')
def login():
    username = request.form['username']
    return f'Welcome {username}'

medium

A. The route does not allow POST method, so form data won't be received

B. request.form['username'] should be request.args['username']

C. The route should use GET method instead of POST

D. Flask requires form data to be accessed via request.data

Solution

1. Step 1: Check route methods

   The route only allows GET by default, but form data sent by POST won't be processed.

2. Step 2: Confirm correct method usage

   To handle POST form data, the route must include methods=['POST'].

3. Final Answer:

   The route does not allow POST method, so form data won't be received -> Option A

4. Quick Check:

   Route must allow POST to read POST form data [OK]

Hint: Add methods=['POST'] to route decorator [OK]

Common Mistakes:

• Forgetting to add methods=['POST'] in route
• Using request.args for POST data
• Trying to access form data via request.data

5. You want to create a Flask route that accepts a POST form with fields 'username' and 'password'. It should return 'Login successful' only if username is 'admin' and password is 'secret', otherwise 'Login failed'. Which code snippet correctly implements this?

hard

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

@app.route('/login', methods=['GET'])
def login():
user = request.form['username']
pwd = request.form['password']
if user == 'admin' and pwd == 'secret':
return 'Login successful'
else:
return 'Login failed'

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

@app.route('/login')
def login():
user = request.args.get('username')
pwd = request.args.get('password')
if user == 'admin' and pwd == 'secret':
return 'Login successful'
else:
return 'Login failed'

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

@app.route('/login', methods=['POST'])
def login():
user = request.form.get('username')
pwd = request.form.get('password')
if user == 'admin' and pwd == 'secret':
return 'Login successful'
else:
return 'Login failed'

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

@app.route('/login', methods=['POST'])
def login():
user = request.form['username']
if user == 'admin':
return 'Login successful'
else:
return 'Login failed'

Solution

1. Step 1: Ensure route accepts POST method

   The route must specify methods=['POST'] to handle form POST data.

2. Step 2: Correctly read both 'username' and 'password' from request.form

   Use request.form.get() to safely get both fields and check their values.

3. Step 3: Implement correct login logic

   Return 'Login successful' only if both username and password match expected values; otherwise return 'Login failed'.

4. Final Answer:

   The code with methods=['POST'], request.form.get() for both fields, and checks both credentials -> Option C

5. Quick Check:

   from flask import Flask, request app = Flask(__name__) @app.route('/login', methods=['POST']) def login(): user = request.form.get('username') pwd = request.form.get('password') if user == 'admin' and pwd == 'secret': return 'Login successful' else: return 'Login failed' [OK]

Hint: Use methods=['POST'] and request.form.get for form fields [OK]

Common Mistakes:

• Using GET method instead of POST
• Reading form data from request.args
• Checking only username without password