Campo por campo

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

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

Um formulário é uma lista de seus campos: {% for field in form %} os fornece na ordem em que a classe os declara. {{ field.as_field_group }} exibe um campo com seu rótulo, seus erros e sua entrada. Uma página de inscrição 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 exibe apenas a entrada: sem rótulo e sem erro para dizer 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 sua entrada.

Preencha o título e o local e informe a próxima sexta-feira como data: “Insira uma data válida.” aparece dentro do cartão 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 %}