Ein Formular erstellen

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

Die Seite unter /events/new/ schreibt jedes Label und jedes Eingabefeld von Hand, und EventForm führt dieselben Felder noch einmal auf. Ein Formular kann sich selbst rendern: Übergib es an das Template und schreibe {{ form }} innerhalb des <form>-Tags. Eine Kontaktseite:

<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Send</button>
</form>

{{ form }} schreibt für jedes Feld ein Label und ein Eingabefeld, und zwar in der Reihenfolge, in der die Klasse sie deklariert. Jedes Eingabefeld erhält den name des Feldes und eine id wie id_email, sodass das Label darauf verweist. Das Formular-Tag, das Token und die Schaltfläche bleiben dir überlassen.

Ein Formular, in das noch nichts eingetragen wurde, ist die Klasse, die ohne Daten aufgerufen wird: ContactForm(). Django kennzeichnet erforderliche Eingabefelder außerdem mit required, sodass der Browser ein leeres Feld abfängt, bevor es gesendet wird. Das Datumsfeld ist jetzt einfacher Text, weil Django ein DateField als Text darstellt. Gib Datumsangaben wie 2031-12-05 ein.

Aufgabe

Einfach

Lass EventForm seine eigenen Felder zeichnen.

Übergib in new_event eine leere EventForm als form an die Vorlage.
Ersetze in new_event.html die drei Beschriftungen und Eingabefelder durch {{ form }}, das sie für dich ausgibt. Behalte das Formular-Tag, das Token, die Schaltfläche und die Fehlermeldung bei.

Füge ein Ereignis mit dem Datum 2031-12-05 hinzu: Django hat alle Beschriftungen ausgegeben und du landest auf der Seite des Ereignisses.

Probier es selbst

{% extends "events/base.html" %}

{% block title %}Add an event{% endblock %}

{% block content %}
<h1>Add an event</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<form method="post">
    {% csrf_token %}
    <label for="title">Title</label>
    <input id="title" name="title">
    <label for="date">Date</label>
    <input id="date" name="date" type="date">
    <label for="place">Place</label>
    <input id="place" name="place">
    <button type="submit">Add event</button>
</form>
{% endblock %}