PURPOSE

To pass dynamic information from the front end to the server [HTML Forms Parsing]

The Author assumes that you have basic understanding of integrating HTML with Flask.

Sending Information from Frontend HTML to your Python Server Script.

HTML

# assuming your project structure looks like this: flask_app │ app.py └───templates │ index.html <- open this file cd flask_app/templates gvim index.html

To pass data from Frontend we need to POST it. Forms provide a way to do so.

Modify your index.html so that it contains a basic form:

<h1> Hello World! </h1> <h2> <pre>Made with <3 and Python</pre> </h2> <em>by <b>Ayush Mandowara</b></em> <hr> <div> <h3>About `Me`</h3> <!-- Creating an About Me HTML Form --> <!-- on form submission, form data will be posted and page will be redirected to /about endpoint --> <!-- We specify post method when submitting data to the server --> <form action='/about' method='post'> My Name is <input type="text" placeholder="NAME" name="my_name"> <br> <label>I would rather have </label> <select name="dd"> <option value="money">Money</option> <option value="fame">Fame</option> </select> <br> because <input type="text" placeholder="Reason" name="reason"></input> <br> I can do simple math, like adding <input type="number" name="first_number" placeholder="Enter First Number"> with <input type="number" name="second_number" placeholder="Enter Second Number"> but I would rather have the machine do it for me. <br> <!-- element of type submit submits the form --> <button type="submit">Submit</button> </form> </div>

Python/Flask

# assuming your project structure looks like this: flask_app │ app.py <- open this file └───templates │ index.html gvim app.py

To receive data from the frontend we need to create an endpoint that accepts POST requests.

Modify your main app.py file like so:

from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/about', methods=['POST']) def about_me(): ''' Since our form's action is set to trigger '/about' endpoint, this function will be triggered on form submission. To access the form data we use the request module imported from Flask framwork. The format is: element_name = request.form['name_attribute_of_the_element_in_the_form'] ''' name = request.form['my_name'] choice = request.form['dd'] reason = request.form['reason'] first_number = request.form['first_number'] second_number = request.form['second_number'] sum_first_second = int(first_number)+int(second_number) sentence = f'My name is {name} and I would rather have {choice} because {reason}. The machine says, that the sum of the numbers entered is: {sum_first_second} and I certainly agree with it.' return sentence

Run the app.py file:

py app.py

• Now, visit localhost:5000 on your browser, you will see the form just created in index.html
• Fill up the information and hit the submit button.
• Rejoice at your creation!

Next Blog: Information Passing between your Frontend and Backend (PART TWO).