The open blogging platform. Say no to algorithms and paywalls.

How to Create a Basic Form in Python Flask

A simple guide on how we can create a form in Python Flask asking for a name and an email, and pass this form data back to our Python code.

image

Python Flask is probably one of the simplest frameworks for Python beginners to get into web development. This article attempts to display as simply as possible how we can create a form in Python flask asking for a name and an email, and how this form data can be passed back to our Python code.

Let’s Start With A Basic Flask App

app.py

from flask import *
app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")

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

templates/home.html

<h1>this is home.html</h1>

Note: remember to put home.html in a folder templates

Adding Inputs To Our HTML File

Here, we wish to add input fields into our HTML file, home.html, in order to ask our user for a name and an email. This is what our webpage should roughly look like:

image

templates/home.html

<h1>
    This is home.html
</h1>
<form method="post">
  Name: <input name="name"/>
  <br/><br/>
  Email: <input name="email"/>
  <br/><br/>
  <button type="submit">Submit</button>
</form>

Stuff to remember:

  • Put the input elements in a form
  • Set the form method as "post"
  • Add name attributes to our input fields — these name attributes will be how Python Flask identifies our input fields
  • Add a submit button with type="submit"

If we add these, we’ll be able to see the newly added input fields when we visit our / endpoint. However, this won’t have any real functionality yet.

Linking This To Python Flask

@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == "POST":
        print(request.form["name"])
        print(request.form["email"])
        return

    return render_template("home.html")

First, remember to add methods=["GET", "POST"] to our app.route decorator. When we click on the submit button in our form, it makes a POST request to our Python Flask backend. The methods=["GET", "POST"] keyword argument allows our home function to process both GET and POST requests.

Next, let’s add an if statement if request.method == "POST". This if runs when we make a POST request to our Python Flask backend, which happens when we click on the submit button.

You can think of request.form as a dictionary containing a bunch of key-value pairs, keys being the name attributes in our input fields, and the values being the values of the input fields (essentially what we enter into the input fields).

We have 2 input fields, 1 with the name name and another with the name email. request.form["name"] returns whatever we enter into the name input field, and request.form["email"] returns whatever we enter into the email input field.

Testing Our Form

Try entering a name and an email into your form, then click on the submit button. Check the terminal you used to run your Python Flask application — the name and email you entered into your form should be printed there.

image

What’s Next

Now that we’ve verified that we’re able to print the values of our inputs, we can then write additional code to process them — do more processing, add them into some database, or whatever you wish to do with your inputs.

Example Repository Link

GitHub - zlliu246/flask_examples at form-example




Continue Learning