Displaying forms in templates in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Django template snippet?

Given a Django form passed to the template as form, what will this template code render?

<form method="post">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit">Submit</button>
</form>

A A form with each field wrapped in <p> tags, including labels and inputs, plus a submit button.

B A plain text list of form field names without inputs or labels.

C Only the submit button without any form fields.

D An error message because {{ form.as_p }} is invalid syntax.

💡 Hint

Think about what form.as_p does in Django templates.

The form.as_p method renders each form field wrapped in <p> tags with labels and inputs. The CSRF token is included for security, and the submit button is rendered as expected.

📝 Syntax

intermediate

Which template code correctly displays form errors for a Django form?

You want to show all non-field errors and field-specific errors in your Django template. Which option correctly does this?

A

{% if form.errors %}
  <ul>
    {% for error in form.non_field_errors %}
      <li>{{ error }}</li>
    {% endfor %}
    {% for field in form %}
      {% for error in field.errors %}
        <li>{{ field.label }}: {{ error }}</li>
      {% endfor %}
    {% endfor %}
  </ul>
{% endif %}

B

{% for error in form.errors %}
  <p>{{ error }}</p>
{% endfor %}

C {{ form.errors }}

D

{% if form.errors %}
  <div>Errors found</div>
{% endif %}

💡 Hint

Consider how to access non-field errors and field errors separately.

Option A explicitly loops over non-field errors and then each field's errors, displaying them with labels. Other options either show raw errors or do not separate them properly.

🔧 Debug

advanced

Why does this Django template raise a TemplateSyntaxError?

Consider this template snippet:

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

What causes the error?

A The form tag is missing an action attribute, causing error.

B CSRF token tag is misplaced and causes error.

C Missing closing curly brace in {{ form.as_table }}, causing syntax error.

D Using form.as_table is deprecated and causes error.

💡 Hint

Check the syntax of the template variable tags carefully.

The variable tag {{ form.as_table } is missing a closing curly brace '}}'. This causes Django to raise a TemplateSyntaxError. The other parts are valid and do not cause errors.

❓ state_output

advanced

What is the value of the variable form_field_value after rendering this template snippet?

Given a Django form with a field named username and initial value guest, what will form_field_value be after this template renders?

{% with form.username.value as form_field_value %}
  {{ form_field_value }}
{% endwith %}

A Raises a TemplateSyntaxError

B An empty string ""

C None

D "guest"

💡 Hint

Remember how Django form fields expose their current value in templates.

The form.username.value returns the current value of the username field, which is "guest" as set initially. The with tag assigns it to form_field_value correctly.

🧠 Conceptual

expert

Which option best explains why using {{ form }} directly in a Django template might not render the form as expected?

When you pass a Django form to a template and use {{ form }} without calling as_p, as_table, or as_ul, what happens?

A It renders the form fields as a default HTML table layout automatically.

B It renders the form fields as a string representation, which includes HTML tags for inputs and labels.

C It renders the form fields as plain text without HTML tags, so no inputs or labels appear.

D It raises a TemplateSyntaxError because the form must be rendered with a method.

💡 Hint

Think about what the default string representation of a Django form object is.

Using {{ form }} calls the form's __str__ method, which renders the form as HTML with inputs and labels in a default layout (usually a table). It does not raise an error and is not plain text.

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