Add dynamic components to your HTML templates using <form>s, Flask, and Jinja

Mikaela Gurney
Sep 3, 2018 · 2 min read

Forms! Forms! Forms!

Learning to program in Python before JavaScript, I was stumped when first trying to understand how the front and back ends of my flask applications would knit together.

This article covers a simple way to grab some request data from a HTML form, and use Jinja to dynamically change update HTML of a page without the use of JavaScript.

The simple application:

Here’s the functionality that we are trying to reproduce:

Initial view at http://0.0.0.0:5000

*user enters data*

final view at http://0.0.0.0:5000/response

To begin, you will only need two files:

The template index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body
<form method="POST" action="/response">
Name: <input type="text" name="fname" required><br>
Note: <input type="text" name="note" required><br>
<input type="submit" value="Submit">
</form>
{% if name %}
<h1>{{name}} says: </h1>
{% endif %}
{% if note %}
<p>{{note}}</p>
{% endif %}
</body>
</html>

The main application file: app.py

from flask import Flask, request, render_template
app = Flask(__name__)@app.route('/')
def hello():
return render_template("index.html")
@app.route('/response', methods=['POST'])
def response():
fname = request.form.get("fname")
note = request.form.get("note")
return render_template("index.html", name=fname, note=note)
if __name__ == '__main__':
app.run(host="0.0.0.0", port=5000)

The Form

When looking at html form, we can see that it consists of a few parts:

<form method="POST" action="/response">
Name: <input type="text" name="fname" required><br>
Note: <input type="text" name="note" required><br>
<input type="submit" value="Submit">
</form>

The method attribute specifies the type of request that will be made on form submission. The action attribute specifies where to send the form-data when the form is submitted. This endpoint (/response) will be linked to the function controller that you have designed handle this particular request:

@app.route('/response', methods=['POST'])
def response():
fname = request.form["fname"]
note = request.form["note"]
return render_template("index.html", name=fname, note=note)

Using request

To access the request data, we will use the global request object, provided by Flask. Whenever a request is made, Flask parses the incoming request data for you and stores this information in the request object.

If we are sure that a particular input value has been sent, we may access it with the notation:

request.form["form_input_name_value"]

If we are unsure, request.form.get("form_input_name_value")will alternatively not throw a key-error if the input value name is not found in the request object.

After storing our data in variables, we pass them as parameters to our template using render_template() , which will allow jinja to perform the necessary logic to update the page view.

Mikaela Gurney

Written by

Frontend Engineer @ Zume Inc.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade