Basic forms

You may have heard about Templates. As you know, they help data flow from the server side to a user. However, applications also need to have information that is received from the user side and transmit it to the server. Now, this is why we use Flask Forms. Let's see, what it does.

You must have filled the form on the registration page of this website and clicked the Submit button. But where does that data go? Thanks to HTML, we can create web forms where you can enter your credentials. Once you submit the data, it is submitted by the web browser to the server in the form of a POST request. So, to access the data submitted by the user (you), Flask uses a request object, which exposes all the information sent by the client (you, again) as a POST request and provides access to the information

How to create a form

We create web forms with HTML. Let's take a look at how we can create forms. Whenever you open a webpage, and there is a form to fill in, you are probably supposed to fill in an HTML form. Let's see an example of it:

<form action="/signup" method="post">

    <p>Email:</p>

    <p><input type="text" name="email" required/></p>

    <p><input type="submit" value="submit"/></p>

</form>

In this example, we have the full login form. The form tag has two non-required attributes: method and action. The method attribute can take GET and POST values.

The Method attribute defines how your form data will be sent to the server, the default value for method is GET. In this particular example, the POST method protects your individual credentials. If the data is insensitive, you don't care if someone else sees it, and there are no files in the form, use the GET method.

The second attribute, action, tells the browser which URL should receive and respond to a form data. Search forms, for example searching for something on your browser, are a good example for the GET method.

Getting data from forms

I guess you get emails from email newsletters, right? Do you know how do they pick up your email? You just type your email address, and they start to send you emails weekly. Now, set up a newsletter form that asks a user to fill in their email address. And as they complete registration, let's display Thank you for subscribing. First, start by importing the module called request.

from flask import Flask, render_template, request

Next, we define a new route for the sign-up page. To enter your name and password, we need a POST request:

@app.route("/signup",methods=["POST"])

The login page will take different actions for POST and GET requests. If it is a POST request, the form will redirect a user to the appropriate page after submission. Otherwise, a user will stay at the sign-up page:

def signup():
    email = None
    if request.method == "POST":
        email = request.form['email']
        # email processing here...
        return render_template('example_result_page.html', email=email)

    return render_template('form.html')

As you see, right under the signup() function, we've defined an if condition that checks the request type. If the request is the POST one, then we execute the code under the if block, that is intended for the filled-in form data processing. The data from the form comes in the request object's form field, a dictionary, so we can access its items with square brackets by retrieving the key's (field name) value (user input). If you look at the HTML form, we have previously created in the "How to create a form" section, you can find out we set the name variable as email inside the input tag. That's how you know what you're looking for in the request.form dictionary.

Let's check the code and see how it is working:

After clicking the submit button, you will see a message with the email address:

Conclusion

To conclude, we can highlight some important points:

• Forms are helpful with taking data from a user and providing data to the server;

• Use HTML code to build forms manually;

• To return the input data by user, we have the request.form attribute that returns a dictionary object, so we can find the client data by using this key value.