Field by Field

Part of the Forms section of Coddy's Django journey. Lesson 8 of 20.

{{ form }} draws every field the same way, one under the other. To put each field in a box of your own, draw the fields one at a time.

A form is a list of its fields: {% for field in form %} gives them in the order the class declares them. {{ field.as_field_group }} draws one field with its label, its errors and its input. A sign-up page with two names side by side:

<div class="row">
    <div class="half">{{ form.first_name.as_field_group }}</div>
    <div class="half">{{ form.last_name.as_field_group }}</div>
</div>

{{ form.email }} on its own draws only the input: no label, and no error to say what went wrong.

The stylesheet already has a .field rule that turns each box into a card.

Challenge

Easy

In new_event.html, replace {{ form }} with a loop over the form's fields. Put each field in its own <div class="field">, with its label, its errors and its input.

Press Run, send the date next friday, and find the error inside the date's box.

Try it yourself

{% extends "events/base.html" %}

{% block title %}Add an event{% endblock %}

{% block content %}
<h1>Add an event</h1>
<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Add event</button>
</form>
{% endblock %}