Champ par champ

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

{{ form }} affiche tous les champs de la même manière, les uns sous les autres. Pour placer chaque champ dans une boîte de votre choix, affichez les champs un par un.

Un formulaire est une liste de ses champs : {% for field in form %} les fournit dans l’ordre où 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 }} 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 contient déjà une règle .field qui transforme chaque boîte en carte.

Défi

Facile

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

Renseigne le titre et le lieu, puis indique vendredi prochain comme date : « Enter a valid date. » apparaît dans la carte 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 %}