Flask Forms

---

Accept User Input Using Flask Forms. This article is going to explain the basics of Flask form and how to create them.

Basics of Flask Forms

The Flask Forms are a vital aspect of web applications. It enhances the user authentication interface to display information that is expected to be on the websites. The GET and POST methods are significant when it comes to website information. They help to display and publish data on the website.

We will understand more about these two methods (GET and POST methods) in a bit. These forms are shown to the user via templates using the <form> aspect of HTML. The code for HTML form looks like:

<form action="action_to_perform_after_submission" method = "POST">
    <p>Field1 <input type = "text" name = "Field1_name" /></p>
    <p>Field2 <input type = "text" name = "Field2_name" /></p>
    <p>Field3 <input type = "text" name = "Field3_name" /></p>
    <p><input type = "submit" value = "submit" /></p>
</form>

Here we interpret the activity to execute on the form data, in the activity aspect.

Related course: Create Web Apps with Python Flask

GET or POST Method

They both help in sharing data with users. It is also known as the HTTP method. They specifically perform the activity of several resources. They serve a different significant function.

• GET Method: this method helps to display the website data.
• POST Method: This procedure helps to convey data from the user to the server.

Hence, for illustration, evaluate social media applications. Normally, all browsers that use the GET method are used to display content on webpages.

However, when sharing videos or photos, that implies you send data to your social media application's server such as Instagram, Facebook, Twitter, and et cetera. Sharing this information is done through the POST method.

Also, contemplate a blog website. When you read through a post on any blog website, it's all displayed via the GET method. And you compose and post your blog post via POST method.

The flask will help you develop an easy form and this will guide you through your first flask form.

Coding The Flask File Code is shown below:

from flask import Flask,render_template,request

app = Flask(__name__)

@app.route('/form')
def form():
    return render_template('form.html')

@app.route('/data/', methods = ['POST', 'GET'])
def data():
    if request.method == 'GET':
        return f"The URL /data is accessed directly. Try going to '/form' to submit form"
    if request.method == 'POST':
        form_data = request.form
        return render_template('data.html',form_data = form_data)


app.run(host='localhost', port=5000)

Here, The Form View helps to display the HTML Form Template to users. When the user submits the form, the Form Data is sent (as a part of the request object) to the Data View via the POST method. The Data View then simulates the form-data components to a variable form_data and delivers it to the data.html template for output display. The request.form has a functional setup:

form_data = {
'key1(field1_name)' : 'value1(field1_value)',
'key2(field2_name)' : 'value2(field2_value)',
.
.
}

Here, as soon as the form is rendered, the browser is diverted to the data command webpage. Note: it possible to access the webpage data through the POST procedure, if we are directed to /data via the form.

1. Template Files Here are the illustration of the template form-“form.html” will look like:

<form action="/data" method = "POST">
    <p>Name <input type = "text" name = "Name" /></p>
    <p>City <input type = "text" name = "City" /></p>
    <p>Country <input type = "text" name = "Country" /></p>
    <p><input type = "submit" value = "Submit" /></p>
</form>

The data.html will display the form data:

{% for key,value in form.items() %}
<h2> {{key}}</h2>
<p> {{value}}</p>
{% endfor %}

Do assess the Flask Templates article for more information about Templates.

1. Execution of the Code Instantly launch the server and explore Click the submit icon and sit back to see what happen next Moreover, when you attempt to click on the URL “/data” promptly from your browser, you will get this webpage through the GET procedure that will illustrate an error as there’s no form data present.

Conclusion

We've come to the end of this tutorial class. Go ahead and give it a trial and practice more. That will help you understand this course better.

Related course: Create Web Apps with Python Flask