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.

Practice

1. What is the purpose of using {% csrf_token %} in a Django form template?

easy

A. To protect the form from Cross-Site Request Forgery attacks

B. To style the form fields automatically

C. To submit the form data to the server

D. To display error messages for the form

Solution

1. Step 1: Understand CSRF protection in Django

   Django uses {% csrf_token %} to add a hidden token to forms that helps prevent malicious attacks from other sites.

2. Step 2: Identify the role of the token in form security

   This token is checked on form submission to ensure the request is from the original site, protecting against CSRF attacks.

3. Final Answer:

   To protect the form from Cross-Site Request Forgery attacks -> Option A

4. Quick Check:

   CSRF token = security protection [OK]

Hint: CSRF token always means security against fake form submissions [OK]

Common Mistakes:

• Thinking it styles the form
• Confusing it with form submission action
• Assuming it shows errors

2. Which of the following is the correct way to render a Django form as paragraphs in a template?

easy

A. {{ form.as_p }}

B. {{ form.as_table }}

C. {{ form.render() }}

D. {% form.as_p %}

Solution

1. Step 1: Recall Django form rendering methods

   Django forms have built-in methods like as_p, as_table, and as_ul to render fields in different HTML formats.

2. Step 2: Identify the correct syntax for paragraph rendering

   The correct syntax to render form fields wrapped in paragraphs is {{ form.as_p }}. The other options are either wrong methods or incorrect template syntax.

3. Final Answer:

   {{ form.as_p }} -> Option A

4. Quick Check:

   Render form as paragraphs = {{ form.as_p }} [OK]

Hint: Use {{ form.as_p }} to render form fields in paragraphs [OK]

Common Mistakes:

• Using template tags {% %} instead of {{ }} for form rendering
• Calling non-existent render() method
• Confusing as_table with as_p

3. Given this template snippet:

<form method="post">
  {% csrf_token %}
  {{ form.username }}
  {{ form.password }}
  <button type="submit">Login</button>
</form>

What will be displayed for {{ form.username }} and {{ form.password }}?

medium

A. Plain text labels 'username' and 'password' only

B. Input fields for username and password

C. Empty strings because fields are not rendered with as_p

D. Error messages because form is not valid

Solution

1. Step 1: Understand rendering individual form fields

   Rendering {{ form.fieldname }} outputs the HTML input element only for that field, without the label.

2. Step 2: Confirm output for username and password fields

   Each field renders as an input box without its label, so both username and password fields will appear as input fields.

3. Final Answer:

   Input fields for username and password -> Option B

4. Quick Check:

   Individual field rendering = input fields [OK]

Hint: Rendering {{ form.field }} shows input field without label, not just text [OK]

Common Mistakes:

• Thinking {{ form.field }} shows only label text
• Assuming as_p is required for any output
• Confusing empty output with errors

4. You wrote this template code:

<form method="post">
  {{ form.as_p }}
</form>

But when submitting, you get a CSRF verification failed error. What is missing?

medium

A. You should use {{ form.as_table }} instead of as_p

B. You need to add method="get" instead of post

C. You must call form.is_valid() in the template

D. You forgot to include {% csrf_token %} inside the form

Solution

1. Step 1: Identify cause of CSRF verification failure

   Django requires a CSRF token in POST forms to verify requests. Missing {% csrf_token %} causes this error.

2. Step 2: Fix the template by adding CSRF token

   Insert {% csrf_token %} inside the form tags to include the hidden token for security.

3. Final Answer:

   You forgot to include {% csrf_token %} inside the form -> Option D

4. Quick Check:

   CSRF error = missing {% csrf_token %} [OK]

Hint: Always add {% csrf_token %} inside POST forms [OK]

Common Mistakes:

• Changing method to GET instead of adding token
• Trying to validate form in template
• Switching form rendering method without token

5. You want to customize a Django form display by showing each field with a label and input separately in your template. Which code snippet correctly does this?

hard

A. <form method="post">
{% csrf_token %}
<label for="name">Name:</label>
{{ form.name }}
<label for="email">Email:</label>
{{ form.email }}
<button type="submit">Send</button>
</form>

B. <form method="post">
{% csrf_token %}
{{ form.as_p }}
</form>

C. <form method="post">
{% csrf_token %}
{{ form.name.label_tag }}
{{ form.name }}
{{ form.email.label_tag }}
{{ form.email }}
<button type="submit">Send</button>
</form>

D. <form method="post">
{{ form.name.label }}
{{ form.name }}
{{ form.email.label }}
{{ form.email }}
<button type="submit">Send</button>
</form>

Solution

1. Step 1: Understand how to render labels and fields separately

   Django form fields have a label_tag method that outputs the label HTML correctly linked to the input.

2. Step 2: Compare options for correct label rendering

   <form method="post">
     {% csrf_token %}
     {{ form.name.label_tag }}
     {{ form.name }}
     {{ form.email.label_tag }}
     {{ form.email }}
     <button type="submit">Send</button>
   </form>

   uses {{ form.name.label_tag }} and {{ form.name }} which is the proper way to show label and input separately.

   <form method="post">
     {% csrf_token %}
     <label for="name">Name:</label>
     {{ form.name }}
     <label for="email">Email:</label>
     {{ form.email }}
     <button type="submit">Send</button>
   </form>

   uses manual labels which may not link properly.

   <form method="post">
     {{ form.name.label }}
     {{ form.name }}
     {{ form.email.label }}
     {{ form.email }}
     <button type="submit">Send</button>
   </form>

   uses label which is just text, not HTML label tag.

3. Final Answer:

   {{ form.field.label_tag }} {{ form.field }} -> Option C

4. Quick Check:

   Use label_tag for proper label HTML [OK]

Hint: Use {{ field.label_tag }} for correct label HTML [OK]

Common Mistakes:

• Using plain text labels without label_tag
• Forgetting csrf_token in form
• Using label instead of label_tag for labels