How To Make A Basic HTML Form In Flask?

Building a web form is one of the first practical steps in learning Flask development. A form helps your web application collect user details, process input, and display submitted data through a simple browser interface. That is why understanding how to create an HTML form in Flask is important for beginners who want to move beyond basic Python scripts and start building real web applications.

Flask makes this process beginner-friendly because it connects Python logic with HTML templates using routes, request handling, and Jinja2 templating. In this article, you will learn how to install Flask, create a basic project structure, render an HTML form, submit user input, and display the submitted data on another page. By the end, you will have a working Flask HTML form that shows how front-end forms and back-end Python code work together.

Quick Answer:

Creating an HTML form in Flask involves installing Flask, setting routes, rendering HTML templates, handling POST requests with request.form, and using Jinja2 to display submitted user data dynamically on a web page.

Starting with Flask

Flask is a micro-web application framework. It was created by Armin Ronacher and is built on the Werkzeug WSGI toolkit and the Jinja2 templating engine. Flask is called a micro framework because it does not include built-in features like database abstraction, form validation, or authentication by default. Instead, it gives developers a simple core with routing, request handling, response generation, template rendering, and server-side logic, while allowing them to add extensions based on project requirements. This makes Flask flexible, beginner-friendly, and useful for building both small web apps and scalable Python-based APIs.

How to Install Flask and Create a Basic Flask App

Before creating an HTML form in Flask, you need to set up Flask on your system. Flask is a Python package, so you can install it easily using pip, Python’s package installer.

Open your terminal or command prompt and run the following command:

pip install Flask

After installing Flask, you need a code editor such as VS Code, PyCharm, Sublime Text, or any text editor where you can write Python and HTML files. Once the setup is ready, you can start building your first Flask web application with an HTML form.

Before diving into the next section, ensure you’re solid on full-stack development essentials like front-end frameworks, back-end technologies, and database management. If you are looking for a detailed Full Stack Development career program, you can join HCL GUVI’s Full Stack Development Career Program with Placement Assistance. You will be able to master the MERN stack (MongoDB, Express.js, React, Node.js) and build real-life projects. Additionally, if you want to explore HTML and CSS through a self-paced course, try HCL GUVI’s HTML and CSS self-paced certification course.

How to make an HTML form in FLASK?

To start building an HTML form in Flask, we will start writing a Python script like in the above image. After that, save this script onto our system with the name app.py. We want to make a web app using Flask, so we will begin importing the Flask module from the flask library in our script file. Subsequently, we will create an object of the Flask class, this object is our WSGI application (here, we have named the object as an app). If we observe carefully in the second line, the Flask constructor takes __name__ as a parameter. It is the name of the current module.

Now, let us set up routes for our web app. The Flask class consists of the route() method. It is a decorator function that tells the app which URL to use to call the associated function. Have a look at the syntax for app.route() function-

app.route(rule,options)

Understanding arguments passed inside the functions

You can understand the arguments passed inside the rule() method as follows:

• rule- It signifies the URL. This URL bounds with the function. This is to say that to trigger the function we need to hit that particular URL.
•  options- It is an optional argument that consists of a list of parameters. We associate these parameters with the rule object.

In lines numbers 3 and 4 of the code snippet, we can see the ‘/’ URL binds to the home() function. Whenever we call / URL in the browser, then we kind of trigger the home() function, and its output will be displayed.

At the last, we will have to make a call to the run() function using the Flask object (here app.run()) that will run our web app onto the local development server.

Here is the syntax for app.run() function:

app.run(host, bug,debug,options)

To understand the arguments inside the run() function, refer below:

• host: It is the hostname over which the app will run. The default value of the host is 127.0.0.1 (localhost of our system). To run an external server we need to set it to 0.0.0.0
• port: It is the port address that our server will be listening to. Set the default port value to 5000.
• debug: It is usually set to False. But when we turn it to True it provides debugging information on the console. It will allow us to debug our script in runtime and we do not need to restart the server again and again after making subtle changes.
• options: It consists of additional information. You should pass this information to the server.

Above all, it should be noted that all the arguments passed to the app.run() function are optional. So, we need not pass them at run time. Therefore, the function will be executed using the default parameters. We are getting closer to finishing building an HTML form in Flask.

Running the web app through the command line

We will execute our written Python script (here, app.py) using the following command on our command prompt/terminal to run our web application (here, app.py).

Python app.py

Meanwhile, this will set up a web server on our PC’s localhost URL, i.e, 127.0.0.1. Thereupon, the port is set to 5000. We obtain the below output after running the command. Our web server starts running on URL http://127.0.0.1:5000/.

Subsequently, we can copy and paste this URL on our web browser to see the running of the webserver. After running the web server, we can see the results as shown in the image given below.

Creating an HTML form in Flask

Now, that we know some basics of Flask, we will create a flask HTML form. 

Before we proceed further, let’s discuss the folder structure we will be using to make our HTML form using Flask.

We will start with creating a new folder named Project on our desktop and inside the folder, we will create our app.py file. Also, inside the Project folder, we will create a subfolder named templates. All our HTML pages will be stored inside this subfolder. Flask automatically uses the render_template method (we will discuss it later in the article) to load these HTML pages for display into the web app.

Sneak-peak of the folder structure while creating an HTML form in Flask

Our folder structure will look something like this (see the left pane showing open files and folders):

We will create a submit.html page later in the tutorial.

Now, we will be creating the home page/index page for our web app. This page will display the form. We will create “index.html” inside the template subfolder. After that, we start writing HTML code in this file in our editor. Firstly, we will create a simple HTML form. This form takes the input of information from the user. Finally, it displays the content inside a table. We will write the code as shown below:

We are creating the form using the <form> tag provided in HTML. The form tag has attributes like the method in which we have passed the value as POST because the POST request method is more secure as the user needs to fill in sensitive user information. The action attribute is given value /submit. This is because when we click submit button, we are redirected to submit page automatically.

Inside the form, the <input> tag is used to take user input. The type is set to either text/numbers/file depending on the type of input that we want to provide. 

So, for alphabetical data (single-line input): we provide input type as text.

And for numerical data (integers, floats): we use input type as numbers.

Consequently, for files (.pdf, .txt, .doc, etc.): we use input type as file.

Also, for submitting data: we pass submit inside the input tag.

To add some styling and proper formatting we have used basic Bootstrap templates. You can download these easily. Also, it can be used as it is from Bootstraps’s official website for free.

Making changes for rendering the new home page:

Note, that in the updated app.py file, we are not returning the simple string as before. Instead, we are now rendering a template using the render_template() function provided in the flask library. We will be displaying the “index.html” as the home page, that is why we have passed index.html as the parameter inside the render_template() function. When we refresh and run the server again the home page our page will look like this:

Submitting the HTML form in Flask

After filling the form, we should hit the Submit button. Consequently. the information gets stored in the form of key and value pairs. After that, the submit page URL will be loaded as specified in our index.html file.

Upon clicking the Submit button, a new submit page URL gets loaded. It can be verified from this piece of code inside the app.py file.

Here, we request all the information stored in the form. And save it inside the information variable. After that, we need to pass the data variable in the render_template() function. When loading the submit page, the information can be retrieved from this data variable on the submit.html page.

A quick introduction to jinja2 templates and its delimiters

Subsequently, in the next section, we will be creating a submit page. It will display all the information entered by the user in a tabular form. For its design, we will be making use of the jinja2 templates. It enables us to write Python code along with HTML code.

To clarify, Jinja2 is a text-based designer-friendly templating language for Python developers. So, we can use it for generating HTML, XML, or any other markup formats. Initially, Jinja2 templates were made after Django’s template. But it provides Python-like expressions.

Delimiters used in jinja2:

Jinja makes use of different delimiters in the template strings. It takes user inputs as below:   

• {% ….. %}: We use them for writing statements
• {# …… #}: We use them for writing comments that don’t get displayed on the template output
• {{  }} : We use them to print/display template outputs.
• # ##: We use them for writing line statements

We will make use of these delimiters in the next section to render our templates after writing the Python code. 

Creating a submit page to view passed information:

As of now, we have only written code for taking inputs from the user. Similarly, we will create a separate file named “submit.html” inside the templates folder. Likewise, we will write code for displaying our entered information in a tabular form. We can write the HTML code as:

Note, that we can write Python code inside the HTML file using jinja2 templates. That is to say, we are using jinja templates to write Python code for accessing each key, value pair stored in the data variable. So, we pass the data variable in the render_template() function. It contains all the information entered by the user.

Inline number 9, we made use of {%….%} jinja2 delimiter for writing our Python code statements as we discussed in an earlier section, we will run a for loop to display each key-value pair that is being fetched from the data variable. To show the fetched key, value pairs we are making use of another {{ }} delimiter line 11 and 12, that displays template outputs, and line 14 marks the end of for loop with {%….%} delimiter. 

That is how we create an HTML form in Flask

To sum up, o loading our submit.html page, it will look like this:

How Flask Handles Form Data Behind the Scenes

• Browser Sends the Form Data:
  When a user fills an HTML form and clicks the submit button, the browser packages the input values and sends them to the Flask server through an HTTP request.
• Flask Receives the Request:
  Flask checks the URL and request method, then matches them with the correct route. A route like /submit handles the submitted data when it is configured to accept the POST method.
• request.form Stores User Input:
  Flask stores submitted form values inside request.form. This works like a dictionary where each input field name becomes a key, and the user-entered value becomes its value.
• The Data Is Passed to a Template:
  After collecting form data, Flask can send it to an HTML page using render_template(). This helps display the submitted values dynamically on a result page.
• Jinja2 Displays Dynamic Output:
  Jinja2 allows HTML pages to show Python-based values using delimiters like {{ value }}. This is how Flask turns submitted form data into visible output on the browser.

Best Practices for Creating HTML Forms in Flask

• Use the Correct HTTP Method:
  Flask forms usually work with GET and POST methods. Use GET when you want to fetch or display data. Use POST when the form sends user input, login details, contact information, or any data that should not appear directly in the URL.
• Keep HTML Files Inside the Templates Folder:
  Flask looks for HTML files inside a folder named templates by default. Keeping files like index.html and submit.html inside this folder helps Flask render pages correctly using the render_template() function.
• Use Meaningful Input Names:
  Every form input should have a clear name attribute because Flask reads submitted values using these names. For example, an input field named username can be accessed in Flask through request.form['username'].
• Separate Python Logic and HTML Design:
  Keep Flask routes, request handling, and backend logic inside app.py. Keep page layout, forms, and table structures inside HTML templates. This makes the Flask application easier to read, debug, and scale.
• Enable Debug Mode Only During Development:
  The debug=True option is useful while testing because it shows errors clearly and reloads the server automatically. It should not be used in production because it can expose sensitive application details.

Wrapping Up

Creating an HTML form in Flask is a simple yet important step toward building interactive Python web applications. You learned how Flask routes work, how templates are rendered, how form data is submitted using POST requests, and how Jinja2 helps display dynamic data on web pages.

Once you understand this flow, you can build more advanced Flask forms for login pages, contact forms, registration systems, dashboards, and database-driven applications. Keep practicing with different input fields, validation rules, and template layouts to strengthen your Flask development skills. HCL GUVI’s full-stack and HTML/CSS courses can help you build these concepts further with structured learning and real-world projects.

FAQs

How do you create an HTML form in Flask?

To create an HTML form in Flask, build the form in an HTML file inside the templates folder, then render it using render_template() in your Flask route. Use the POST method to submit user input securely.

How does Flask get data from an HTML form?

Flask gets HTML form data using request.form. Each input field’s name attribute becomes the key, and the user-entered value becomes the value that Flask can process in the backend.

Why is Flask used with HTML forms?

Flask is used with HTML forms because it connects front-end user input with Python backend logic. It helps developers collect data, process form submissions, render templates, and build interactive web applications easily.