Displaying forms in templates in Django - Step-by-Step Execution

Concept Flow - Displaying forms in templates

Define Form in forms.py

↓

Create View to handle form

↓

Pass form instance to template

↓

Template renders form HTML

↓

User sees form and can submit

↓

View processes submitted data

The form is defined in code, passed to the template, rendered as HTML, and then user input is sent back to the view for processing.

Execution Sample

Django

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)

# In views.py
from django.shortcuts import render

def contact_view(request):
    form = ContactForm()
    return render(request, 'contact.html', {'form': form})

This code creates a simple form with a name field and sends it to the template to display.

Execution Table

Step	Action	Form State	Template Output	User Interaction
1	Form class ContactForm defined	No instance yet	No output	No user interaction
2	View creates form instance (empty)	Form with empty 'name' field	Form HTML with empty input shown	User sees empty form
3	User types 'Alice' in name field	Form still empty on server	User input visible in browser	User fills form
4	User submits form	Form instance receives POST data	Form HTML with submitted data or errors	User submits data
5	View validates form	Form is valid with name='Alice'	Success message or redirect	User sees confirmation
6	If invalid, form re-rendered with errors	Form with errors	Form HTML showing errors	User corrects input

💡 Form submission processed; either success or error shown and cycle ends or repeats

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5
form	undefined	empty ContactForm instance	ContactForm instance with POST data	Validated ContactForm instance

Key Moments - 3 Insights

Why does the form appear empty when first rendered?

At Step 2 in the execution_table, the form instance is created without any data, so the template shows empty input fields.

How does the form show user input after submission?

At Step 4, the form instance is created with POST data, so the template renders the form with the user's submitted values.

What happens if the form data is invalid?

At Step 6, the form is re-rendered with error messages, so the user can see what to fix and resubmit.

Visual Quiz - 3 Questions

Look at the execution_table, what is the form state at Step 2?

A Form with validation errors

B Form with user input 'Alice'

C Form with empty 'name' field

D No form instance created yet

💡 Hint

Check the 'Form State' column at Step 2 in the execution_table

At which step does the user submit the form data?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look for 'User submits form' in the 'Action' column of the execution_table

If the form data is invalid, what will the template show?

A Empty form fields

B Form with submitted data and error messages

C Success message

D No form rendered

💡 Hint

See Step 6 in the execution_table where errors are shown

Concept Snapshot

Define a form class in forms.py
Create a form instance in the view
Pass the form to the template context
Use {{ form }} in template to render HTML
User fills and submits form
View processes and validates submission

Full Transcript

In Django, you first define a form class with fields in forms.py. Then in your view, you create an instance of this form and pass it to the template. The template uses {{ form }} to render the form as HTML inputs. When the user fills the form and submits it, the view receives the data, creates a form instance with this data, and validates it. If valid, you can process the data; if not, the form is re-rendered with error messages so the user can fix mistakes.