HTML forms with POST method in Flask - Mini Project: Build & Apply

HTML Forms with POST Method in Flask

📖 Scenario: You are building a simple web page where users can submit their name and email address. The data will be sent securely to the server using the POST method.

🎯 Goal: Create a Flask app with an HTML form that uses the POST method to send user input to the server. The server should receive the data and store it in a dictionary.

📋 What You'll Learn

Create a Flask app with a route for the form page

Create an HTML form with method='POST' and input fields for name and email

Add a route to handle the POST request and store the submitted data in a dictionary

Display a confirmation message after submission

💡 Why This Matters

🌍 Real World

Websites often need forms to collect user information securely. Using POST method ensures data is sent safely to the server.

💼 Career

Understanding how to create and handle HTML forms with POST in Flask is essential for backend web development roles.

1

Set up Flask app and initial data storage

Create a Flask app by importing Flask and request from flask. Then create an empty dictionary called submissions to store user data.

Flask

from flask import Flask, request

# Your code here

Need a hint?

Remember to import both Flask and request from the flask package.

2

Create HTML form with POST method

Add a route @app.route('/') with a function form() that returns an HTML form string. The form must have method='POST' and input fields with name='name' and name='email'. Include a submit button.

Flask

from flask import Flask, request

app = Flask(__name__)
submissions = {}

# Your code here

Need a hint?

Use triple quotes ''' to return multi-line HTML as a string.

3

Handle POST request and store data

Modify the form() function to accept both GET and POST methods by adding methods=['GET', 'POST'] to the route. Inside the function, check if the request method is POST. If yes, get the name and email from request.form and store them in the submissions dictionary with name as the key and email as the value.

Flask

from flask import Flask, request

app = Flask(__name__)
submissions = {}

@app.route('/', methods=['GET', 'POST'])
def form():
    # Your code here

Need a hint?

Use request.method == 'POST' to check the form submission.

4

Run the Flask app

Add the code to run the Flask app by checking if __name__ == '__main__' and calling app.run(debug=True).

Flask

from flask import Flask, request

app = Flask(__name__)
submissions = {}

@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        submissions[name] = email
        return f"Thank you, {name}! Your email {email} has been recorded."
    return '''
    
      Name:
      
      Email:
      
      Submit
    
    '''

# Your code here

Need a hint?

This code runs the Flask app when you start the script.