Retrieving HTML Form data using Flask

HTML forms are commonly used to collect user input such as names, email addresses, passwords, and feedback. In Flask, form data submitted through HTTP requests can be accessed using the request object. This article demonstrates how to retrieve HTML form data using request.form.

Project Structure

Organize the project using the following directory structure:

FlaskFormApp/
│── app.py
│── templates/
│ └── form.html

• app.py contains the Flask application.
• form.html contains the HTML form displayed to the user.

Install Flask

Install Flask using pip:

pip install Flask

Verify the installation:

python -m flask --version

Create the HTML Form

Create a file named form.html inside the templates folder.

<form action="{{ url_for("gfg")}}" method="post">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="fname" placeholder="firstname">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lname" placeholder="lastname">
<button type="submit">Login</button>

Explanation:

• The <form> element creates a form for collecting user input.
• action="{{ url_for('gfg') }}" sends the submitted data to the Flask route associated with the gfg() function.
• method="POST" specifies that the form data should be sent using an HTTP POST request.
• The name attributes (fname and lname) uniquely identify each input field. Flask uses these names to retrieve the submitted values.
• The required attribute ensures that both fields must be filled before the form can be submitted.

Create the Flask Application

First, install Flask using pip:

pip install Flask

Next, create a file named app.py and add the following code:

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

@app.route("/", methods=["GET", "POST"])
def gfg():

    if request.method == "POST":

        first_name = request.form.get("fname")
        last_name = request.form.get("lname")
        return f"Your name is {first_name} {last_name}"
    return render_template("form.html")

if __name__ == "__main__":
    app.run(debug=True)

Explanation:

• Flask, request, and render_template are imported to create the application, retrieve form data, and render HTML templates.
• app = Flask(__name__) creates a Flask application instance.
• @app.route("/", methods=["GET", "POST"]) defines a route that handles both GET and POST requests.
• When a POST request is received, request.form.get() retrieves the values entered in the fname and lname input fields.
• The submitted first and last names are displayed using an f-string.
• For a GET request, render_template("form.html") renders and displays the HTML form.
• app.run(debug=True) starts the Flask development server in debug mode.

Workflow

The application follows these steps:

1. The user opens the application in a web browser.
2. Flask renders the form.html template.
3. The user enters the first name and last name.
4. Clicking Submit sends the form data to the Flask application using the POST method.
5. request.form.get() retrieves the submitted values using the corresponding name attributes.
6. Flask returns the entered name as the response.

Output flask server running html form returning data from html template