.. _crispy_forms: .. index:: single: schöne Formulare single: Crispy Forms Einführung single: Formhelper Schönere Formulare mit Crispy Forms ************************************ Ein fast unverzichtbares Package in Django ist ``Crispy Forms``, vor allem, wenn man an schönem Formular Layout interessiert ist. Die Installation hatten wir schon in einem früheren Kapitel beschrieben. In diesem Kapitel wollen wir das Package näher beleuchten und uns ein paar Features ansehen. Template Packs =============== Vorab: Wir hatten Crispy Forms bereits mit dem Template Pack für das Bootstrap-Framework genutzt, da wir in diesem Projekt auch auf ``Bootstrap5`` setzen. Aber es werden von Haus aus noch viele andere CSS-Frameworks unterstützt, zum Beispiel das modernere ``Bulma`` oder ``TailwindCSS``. ``django-crispy-forms`` lässt sich also in fast jedes CSS-Framework einbinden. Eine Übersicht der Template Packs, die Crispy Forms bietet, findet sich in der Doku: ``_ Der Crispy Template-Filter =============================== Bisher hatten wir Crispy Forms in einer Variante kennengelernt, die dem Package eigentlich nicht gerecht wird, aber trotzdem schon mächtig genug war, die Darstellung des Formulars deutlich zu verbessern: der ``Crispy Template Filter``. Zur Erinnerung, so in etwa sah das aus: .. code-block:: html+django {% load crispy_forms_tags %}
{{ form|crispy }}
Wir nutzen bisher das ``Pipe``-Symbol, um die ``form``-Variable an den Filter ``crispy`` zu übergeben. Crisyp Forms kann natürlich deutlich mehr. Der Crispy Formhelper ========================== Die ``FormHelper``-Klasse gibt uns eine pythonische Möglichkeit an die Hand, das Layout und die Eigenschaften unserer Formularer so anzupassen, wie wir das wünschen. Und zwar ohne viel HTML-Code direkt in die Templates schreiben zu müssen. Öffnen wir nun die ``event_manager/events/forms.py`` und passen das Formular für das Event-Model etwas an. .. code-block:: python from django import forms from crispy_forms.helper import FormHelper class EventForm(forms.ModelForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.helper = FormHelper() class Meta: model = Event exclude = ("category", "author") Den ``FormHelper`` haben wir aus ``crispy_forms.helper`` importiert. Der FormHelper in Action ------------------------- Um nun eine Instanz der ``FormHelper``-Klasse zu erstellen, mussten wir die ``__init__`` Methode überschrieben, damit erstmal die ``__init__`` Methode der Elternklasse ausgeführt werden kann. In unserer überschriebenen ``__init__`` erstellen wir mit ``self.helper = FormHelper()`` eine Instanz des FormHelpers. Mit dem ``FormHelper`` können wir zum Beispiel die CSS-Klasse des Formulars definieren, welches später im Template gerendert wird, ohne in das HTML händisch eingreifen zu müssen. Den Submit-Button müssen wir nicht -wie vorher- im Formular angeben, sondern machen das bequem mit ``add_input`` von hier aus. Zusätzlich haben wir noch die HTTP-Methode im Formular auf ``POST`` gesetzt, wie das für Web-Formulare üblich ist: .. code-block:: python [..] from crispy_forms.helper import FormHelper from crispy_forms.layout import Submit class EventForm(forms.ModelForm): def __init__(self, *args, **kwargs): [..] self.helper = FormHelper() self.helper.form_method = 'POST' self.helper.form_id = 'event_form' self.helper.add_input(Submit('submit', 'Formular absenden')) Darüberhinaus wird uns auch der HTML ``form``-Tag gerendert. Um den Form-Helper nun zu nutzen, müssen wir das Template für das Event-Formular anpassen. Den FormHelper im Formular nutzen ----------------------------------- Um den Formhelper jetzt zu nutzen, öffnen wir die Template-Datei ``events/templates/events/event_form.html`` und tragen den folgenden Code ein: .. rli:: https://raw.githubusercontent.com/realcaptainsolaris/event_manager_code/main/templates/events/event_form_template_4.html :language: html+django Wie wir sehen können, wurde das Template deutlich entschlackt. Alle HTML-Tags, die wir vorher manuell in das Template geschrieben haben wie zum Beispiel ``
`` oder ``