Render HTML Forms (GET & POST) in Django

Django is often called a "Batteries Included Framework" because it provides built-in settings and features that help developers build websites rapidly and efficiently. One of the essential components in web development is handling HTML forms, a way for users to send data to the server for processing, such as saving it to a database or retrieving information.

What is an HTML Form?

An HTML form is a collection of elements wrapped inside <form>...</form> tags. These elements allow visitors to input text, select options, manipulate controls, and submit data to the server. The server then processes this data, often involving database operations or other logic. Django fully supports all types of HTML forms and simplifies the rendering and processing of form data using views.

To know more about HTML forms, visit HTML | form Tag.

Django Forms vs. HTML Forms

Django provides a powerful feature called Django Forms that abstracts HTML forms and their handling. It’s similar in concept to Django Models, letting you define forms as Python classes. However, before diving into Django Forms, it’s important to understand the basics of GET and POST methods in standard HTML forms.

Understanding GET and POST Methods

1. GET: This method appends form data to the URL as query parameters. For example, when you search in the Django documentation, the URL might look like:

https://docs.djangoproject.com/search/?q=forms&release=1

2. POST: This method sends the form data in the body of the HTTP request. POST is used when the request modifies data on the server, like updating a database.

Example: Rendering a Simple HTML Form in Django

Let’s illustrate rendering forms in Django with a simple example. Suppose you have a Django project named geeksforgeeks with an app called geeks.

Step 1: Create the HTML Form

Create a template file home.html inside geeks/templates/ and add the following:

<form action="" method="get">
    <label for="your_name">Your name: </label>
    <input id="your_name" type="text" name="your_name">
    <input type="submit" value="OK">
</form>

This form will send data using the GET method when submitted.

Step 2: Setup URL Configuration

In your app’s urls.py (geeks/urls.py), set up the URL pattern:

from django.urls import path
from .views import home_view

urlpatterns = [
    path('', home_view),
]

Step 3: Create the View

In views.py (geeks/views.py), create the view to render the form:

from django.shortcuts import render

def home_view(request):
    return render(request, "home.html")

Step 4: Run the Server and Test

Run your Django server:

python manage.py runserver

Handling GET Request Data in Views

When you submit the form, the data will be appended to the URL. To access this data in the view, you can use request.GET:

from django.shortcuts import render

def home_view(request):
    print(request.GET)  # Prints the submitted data as a QueryDict
    return render(request, "home.html")

If you enter a name and submit the form, you will see the data printed in your terminal, like:

request.GET returns a query dictionary that one can access like any other python dictionary and finally use its data for applying some logic.

Handling POST Requests in Django Forms

To use POST instead of GET, modify your form in home.html:

<form action="" method="POST">
    {% csrf_token %}
    <label for="your_name">Your name: </label>
    <input id="your_name" type="text" name="your_name">
    <input type="submit" value="OK">
</form>

Note: Django requires the {% csrf_token %} template tag inside all POST forms for security to prevent Cross-Site Request Forgery attacks.

Update the View to Handle POST Data

Modify your view to handle POST data:

from django.shortcuts import render

def home_view(request):
    if request.method == "POST":
        print(request.POST)  # Prints the POSTed data as a QueryDict
        name = request.POST.get('your_name')
    return render(request, "home.html")

Now when we submit the form it shows the data as below:

This way one can use this data for querying into the database or for processing using some logical operation and pass using the context dictionary to the template.