Add dynamic components to your HTML templates using <form>s, Flask, and Jinja
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:
*user enters data*
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.
