Displaying forms in templates in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a form in a Django template.

Django

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

Drag options to blanks, or click blank then click option'

Ashow

Brender

Cas_p

Ddisplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'render' or 'show' on the form object.

Forgetting to include the CSRF token.

Use as_p to render the form fields wrapped in paragraph tags for easy styling.

2fill in blank

medium

Complete the code to include the CSRF token in the form.

Django

<form method="post">
  [1]
  {{ form.as_p }}
  <button type="submit">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

A{% csrf_token %}

B{% csrf %}

C{{ csrf_token }}

D{% token_csrf %}

Attempts:

3 left

💡 Hint

Common Mistakes

Using double curly braces instead of template tags.

Misspelling the tag name.

The correct tag to include CSRF protection in Django templates is {% csrf_token %}.

3fill in blank

hard

Fix the error in the template code to correctly display form errors.

Django

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

Drag options to blanks, or click blank then click option'

Aerror_messages

Berror

Cerror_list

Derrors

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'error' which does not exist.

Trying to access non-existent attributes like 'error_list'.

The correct attribute to display form errors in Django templates is errors.

4fill in blank

hard

Fill both blanks to render the form fields as a table and include the submit button.

Django

<form method="post">
  {% csrf_token %}
  {{ form.[1] }}
  <button type="[2]">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

Aas_table

Bsubmit

Cbutton

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Using as_p instead of as_table when a table layout is needed.

Setting button type to button which does not submit the form.

Use as_table to render form fields in a table layout and set the button type to submit to send the form.

5fill in blank

hard

Fill all three blanks to display form fields as an unordered list, add a CSS class to the form, and set the button type.

Django

<form method="post" class="[1]">
  {% csrf_token %}
  {{ form.[2] }}
  <button type="[3]">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

Aform-style

Bas_ul

Csubmit

Dform-class

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid CSS class names or missing the class attribute.

Using as_p or as_table instead of as_ul.

Setting button type to button or reset instead of submit.

Use form-class as the CSS class name, as_ul to render form fields as a list, and submit for the button type.