Feld für Feld

Teil des Abschnitts Formulare der Django-Journey von Coddy. Lektion 8 von 20.

{{ form }} zeichnet jedes Feld auf dieselbe Weise, eins unter dem anderen. Um jedes Feld in eine eigene Box zu setzen, zeichne die Felder einzeln.

Ein Formular ist eine Liste seiner Felder: {% for field in form %} gibt sie in der Reihenfolge aus, in der die Klasse sie definiert. {{ field.as_field_group }} zeichnet ein Feld mit seinem Label, seinen Fehlermeldungen und seinem Eingabefeld. Eine Registrierungsseite mit zwei Namen nebeneinander:

<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 }} zeichnet für sich allein nur das Eingabefeld: kein Label und keine Fehlermeldung, die erklärt, was schiefgelaufen ist.

Das Stylesheet enthält bereits eine .field-Regel, die jede Box in eine Karte verwandelt.

Aufgabe

Einfach

Ersetze in new_event.html {{ form }} durch eine Schleife über die Felder des Formulars. Füge jedes Feld mit seiner Beschriftung, seinen Fehlermeldungen und seinem Eingabefeld in ein eigenes <div class="field"> ein.

Klicke auf „Ausführen“, gib als Datum next friday ein und suche den Fehler im Datumsfeld.

Probier es selbst

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