Campo por campo

Parte da seção Forms do Journey de Django da Coddy. Lição 8 de 20.

{{ form }} renderiza todos os campos da mesma forma, um abaixo do outro. Para colocar cada campo em uma caixa própria, renderize os campos um de cada vez.

Um formulário é uma lista de seus campos: {% for field in form %} os apresenta na ordem em que a classe os define. {{ field.as_field_group }} renderiza um campo com seu rótulo, seus erros e sua entrada. Uma página de cadastro com dois nomes lado a lado:

<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 }} sozinho renderiza apenas a entrada: sem rótulo e sem erro para explicar o que deu errado.

A folha de estilos já tem uma regra .field que transforma cada caixa em um cartão.

Desafio

Fácil

Em new_event.html, substitua {{ form }} por um loop pelos campos do formulário. Coloque cada campo em seu próprio <div class="field">, com seu rótulo, seus erros e seu campo de entrada.

Clique em Run, envie a data next friday e encontre o erro dentro da caixa da data.

Experimente você mesmo

{% 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 %}