Form in FastAPI in Python

Hello Folks!

In this article, we are going to learn to create our first FORM using FastAPI in python. We are going to make use of python Jinja2Tempates to read the HTML page from a template folder.

We are going to need to import Form and Request class from fastapi

Make sure following modules are installed

pip install jinja2

pip install python-multipart

pip install venv

 We assume that the fastapi is aready installed in your system so we need following imports when we start writing the python app.

from fastapi import FastAPI

from fastapi import Request, Form

from fastapi.templating import Jinja2Templates

Here is the complete instructional video to create this application:

Now lets create a template object to access Templates from template folder. Myfolder is the folder where your html index page or style sheet will be present.

templates = Jinja2Templates("Myfolder")

Now we will create the get method to load the main page. Before this instantiate the FastAPI class to create an app object.

Remember here @app.get("/main") above the function acts as a python decorator and basically tells the interpreter to use as the fucntion to be triggered when get method is called. 

Now lets write the index.html which will design the webpage. This can have whatever you want.

We will accpet a username and/or password and then add a submit button as well to submit it.

The name of the text input on html page should be same as the the name of variable in submit function.

For all the variabes that we are submitting it should match with the variable name in arguments of the submit function in post method.

In API code:

def submit_form(username:str=Form(...),password:str=Form(...)):

In HTML:

 Enter username : <input type="text" name="username"><br>

 Enter password : <input type="text" name="password"><br>

Also the endpoint point name in post method in API should be same as the form action name.

Now Lets have a look at the post menthd in API:

Here is a basic html page:

Now , lets start the server using uvicorn.

We can specify --reload option while running, this will help us making changes in the code and changing results without restarting th server. The uvicorn will automatically look for any code changes an restart the server.

Also you can specify the host and port number to run the server at using --host and --port options respectively.

By default, it will run at 127.0.0.1:8000 .

Now open any browser and enter the url as: http://127.0.0.1:8000/main

You can also test API  using postman. If you are not aware of how to use postman, you can refer our tutorial on youtube:

Volla, You have successfully created your first API application with HTML form.

Lets test it :

In the first image above left , we enter the data and submit form and in right image, we get response from server.

You can notice that when you enter details and click on "Enter" button the Form action automatically redirects to endpoint "/subform".

And we have written this endpoint in our API code which then triggers the submit function, then it return the response from the server.

From these basics, you can make further changes and do whatever you want.

Congratulations, you have successfully created your first web application using python FastAPI.

#jinja2 #templates #html #form #fastapi #HTML_Form