Creating a Select Tag in a Web Application using Flask Python

Building an interactive web application nowadays, is a simple task while making use of the right tools and this article is a step to achieve that.

This blog is a step-by-step guided tutorial on Building a select tag in a web app using Flask. But if you already know Flask and just take a look at this code.

Why Python?

Python is the one of the most favorite language amongst developers and known for its simplicity a and concise way of implementing things. Despite its general-purpose nature, this high-level language can be used for AI, machine learning and especially web application development.

Why Flask?

Flask is a micro web framework with little to no dependencies on external libraries. It is a framework that helps you build a web application by providing tools, libraries, and technologies. This web application can be a web page, a wiki, or a big web-based calendar application or commercial website. Frequently compared to Django, Flask’s flexibility and easy to use , test and lightweight nature make its uniqueness.

Requirements & Setup

1. Of course, we need Python — 3.7 would be great
2. Pycharm community IDE because it’s awesome & free
3. Once you have the IDE, create a project. I named mine todo-flask. How creative!!
4. virtualenv — if you’re using Pycharm you don’t have to worry about this.
5. Installing flask using pip install flask

Why Select Tag for a Web Application ?

A web application is an application program that is stored on a remote server and delivered over the Internet through a browser interface. It collects user’s data and returns a value.

Interacting with an unattractive web app can be boring but don’t forget keeping the user glued to the web is the goal, and a select tag can help you achieve that instead of letting the user type each input value manually.

An example is displayed below:

<select name="cars">

    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>

</select>

The <select> element is used to create a drop-down list, most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

The<option> tags inside the <select> element define the available options in the drop-down list.

How to use Select Tag in a Flask Web App?

Two files are used to achieve this, the app.py which is the generic entry point for Abseil Python applications and the index.html file contains Hypertext Markup Language (HTML), which is used to format the structure of a webpage.

In the app.py file, each categorical variable is embedded in a list of dictionaries, each list represents a specific variable. The dictionaries Keys are the variable name while the values are the different inputs.

This code snippet below demonstrate how the select values are displayed in the index.html file.

The index.html file is used to insert the option available for the Gender and Number of Children columns.

Data and data1 are list of dictionaries as shown above in the index.html file. Each select component displays the values of a specific column name.

Each list represents the unique variable name and the option used for the specific column.{%for o in data %} is used to loop through the list, the <option> tag displayed the dictionaries values of a specific key (variable), in this case {{o.gender }} and end the iteration (loop) with {% end for %}.

Use Case

This article’s use case is an insurance web application built using flask. This web app relies on a model that accepts numeric value, categorical value as input which are the user’s age, Body mass index (BMI), number of children (max=5), smoking status (Yes/No) , Region (Southwest, Southeast, Northwest, Northeast) and returns the predicted insurance charges.

The number of children, smoking status and the region are categorical variable that have specific value and using a select tag to collect user’s data is a better approach than a typical typed value in this case.

Project Structure

|
 |- templates/
 |   |- index.html
 |
 |- static/
 |   |- style.css       
 |  
 |- app.py
 |- model.pkl
2 directories, 4 files

Now for our application, we are going to split the code into 4parts

1. app.py — the entry & exit point to our application
2. index.html — the html used to structure the web app element.
3. model.pkl — the serialized model.
4. style.css — the css file used to beautify the web app.

After the user input its specific values, the estimated insurance charges will be displayed on the screen, the data is fed into a model that returns a numerical value (the predicted insurance charges).

Running the Application

Run the application by running the `app.py` file. By default, flask runs a local server at port 5000.

python app.py

On hitting the URL from your browser you will see your program alive as illustrated below for the use case program.

Thank you for reading this blog and The whole use case repository is available on GitHub. Lastly you can check my github account for more machine learning and computer vision project