Champ par champ

Fait partie de la section Formulaires du Journey Django de Coddy. Leçon 8 sur 20.

{{ form }} affiche chaque champ de la même manière, l’un sous l’autre. Pour placer chaque champ dans son propre encadré, affiche les champs un par un.

Un formulaire est une liste de ses champs : {% for field in form %} les fournit dans l’ordre dans lequel la classe les déclare. {{ field.as_field_group }} affiche un champ avec son libellé, ses erreurs et son entrée. Une page d’inscription avec deux noms côte à côte :

<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 }} tout seul affiche uniquement le champ de saisie : pas de libellé, ni de message d’erreur indiquant ce qui n’a pas fonctionné.

La feuille de style comporte déjà une règle .field qui transforme chaque encadré en carte.

Défi

Facile

Dans new_event.html, remplacez {{ form }} par une boucle sur les champs du formulaire. Placez chaque champ dans son propre <div class="field">, avec son libellé, ses erreurs et son champ de saisie.

Cliquez sur Run, envoyez la date next friday et repérez l’erreur dans la zone de la date.

Essayez vous-même

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