How-to handle HTML forms and access submitted data using the request object
Have you ever wondered how websites process the information you submit through forms? Flask provides a straightforward mechanism to handle HTML forms and access the submitted data through the request object.
Handling forms in Flask involves creating an HTML form, submitting data to a Flask route, and then accessing that data using the request object, which is a powerful tool for retrieving information sent from the client. This process enables you to capture user input and perform actions based on that data.
Here’s a detailed guide on how to handle HTML forms and access submitted data using the request object in Flask:
1. Project Structure
Organize your project structure with a templates folder containing your HTML form and a Python file to handle the form submission.
my_flask_app/
├── app.py
└── templates/
└── form.html
2. Creating the HTML Form (form.html)
Create a file named form.html within the templates folder. This file will define the HTML form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Form</title>
</head>
<body>
<form method="POST" action="/">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Key points:
method="POST": Specifies that the form data will be sent using the POST method.action="/": Specifies the URL to which the form data will be submitted (in this case, the root URL).name="name"andname="email": These attributes are crucial; they define the names of the form fields, which will be used to access the data in the Flask application.
3. Handling the Form Submission in Flask (app.py)
Create a Python file (e.g., app.py) and add the following code:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
name = request.form["name"]
email = request.form["email"]
return f"Hello, {name}! Your email is {email}."
return render_template("form.html")
if __name__ == "__main__":
app.run(debug=True)
Key points:
methods=["GET", "POST"]: Allows the route to handle both GET (initial form display) and POST (form submission) requests.request.method == "POST": Checks if the request method is POST, indicating a form submission.request.form["name"]andrequest.form["email"]: Accesses the values submitted for the "name" and "email" form fields, respectively.
4. Running the Application
Save all files and run the app.py file. Open your web browser and navigate to http://127.0.0.1:5000/. You will see the HTML form. Fill out the form and submit it; the server will then display a confirmation message containing the submitted data.
By effectively utilizing the request object, you can seamlessly process user input from HTML forms and build dynamic and interactive web applications.