Django Forms bietet grundlegende Funktionen zur Dateneingabe, aber es ist wichtig, die Formulare zu stylen, um die Benutzererfahrung zu verbessern. In diesem Beitrag werden wir uns anschauen, wie man Django Forms mit CSS gestaltet und einige praktische Beispiele betrachten.

1. Grundlagen von HTML-Formularen und Django Forms

1.1 Grundlegende Ausgabeformate von Django Forms

Django Forms erzeugen standardmäßig automatisch HTML. Die grundlegenden Ausgabeformate sind:

• as_p: Umschließt jedes Feld mit einem <p>-Tag.
• as_table: Rendert jedes Feld mit einem <tr>-Tag.
• as_ul: Umschließt jedes Feld mit einem <li>-Tag.

Beispiel: Grundlegendes Ausgabeformat

class ExampleForm(forms.Form):
    name = forms.CharField(label="Ihr Name")
    email = forms.EmailField(label="Ihre E-Mail")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Einreichen</button>
</form>

Der obige Code wird im grundlegenden Stil ausgegeben, wobei die Felder mit <p>-Tags umschlossen sind.

2. Styling von Formularen mit CSS

2.1 Anwendung von Styles mithilfe der attrs-Eigenschaft und Bootstrap

Mit der attrs-Eigenschaft können Sie CSS-Klassen direkt zu HTML-Tags hinzufügen. Dadurch können CSS-Frameworks wie Bootstrap problemlos angewendet werden.

Beispiel: Anwendung von Bootstrap-Styles mit attrs

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihren Benutzernamen ein'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihr Passwort ein'
        })
    )

Rendering von Formularen im Template

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Benutzername</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Passwort</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Einreichen</button>
</form>

Beispiel für das resultierende HTML

<input type="text" name="username" class="form-control" placeholder="Geben Sie Ihren Benutzernamen ein">
<input type="password" name="password" class="form-control" placeholder="Geben Sie Ihr Passwort ein">

2.2 Formular-Styling in Kombination mit Bootstrap

Beispiel: Anwendung von Bootstrap-Styles

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihren Benutzernamen ein'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihr Passwort ein'
        })
    )

Rendering des Formulars im Template

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Benutzername</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Passwort</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Einreichen</button>
</form>

Ergebnisansicht

• Die Formularfelder und Schaltflächen, die mit Bootstrap-Styles versehen sind, werden gerendert.

3. Nutzung von Django FormHelper und Bibliotheken

3.1 Einführung in django-crispy-forms

django-crispy-forms bietet eine bessere Gestaltung und Layout-Verwaltung für Django Forms.

Installation

pip install django-crispy-forms

Konfiguration

Fügen Sie Folgendes zu settings.py hinzu:

INSTALLED_APPS += [
    'crispy_forms',
]
CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5"]
CRISPY_TEMPLATE_PACK = 'bootstrap5'

Formulardefinition

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Ihre E-Mail")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Einreichen'))

Hinweis

django-crispy-forms ist nützlich für einfache Formularstile, aber wenn die Initialisierungsmethode __init__ nicht richtig konfiguriert wird, kann die Template-Debug-Logdatei übermäßig groß werden. Wenn Sie die Protokolldateien sauber halten möchten, sollten Sie dies beachten. Es wird empfohlen für Entwickler, die mit Debug-Protokollierung arbeiten oder es ihnen nicht wichtig ist, dass die Protokolle unordentlich sind. Persönlich mag ich diesen Stil der Gestaltung jedoch nicht. Um die Erstellung von Debug-Protokollen zu vermeiden, muss die Initialisierungsmethode perfekt eingerichtet werden, was tiefere Analysen des Quellcodes erfordert; in solchen Fällen bin ich eher geneigt, andere Styling-Methoden zu verwenden.

Verwendung im Template

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
</form>

4. Praktisches Beispiel: Styling eines Registrierungsformulars

4.1 Formulardefinition

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihren Benutzernamen ein'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihre E-Mail ein'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Geben Sie Ihr Passwort ein'
        })
    )

4.2 Rendering im Template

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Benutzername</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">E-Mail</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Passwort</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">Registrieren</button>
</form>

5. Fazit

Durch die Kombination von Django Forms und CSS können Sie die Benutzererfahrung erheblich verbessern. Probieren Sie verschiedene Methoden aus, von den grundlegenden Stilen mit attrs bis hin zu fortgeschrittenem Styling mit Bootstrap und django-crispy-forms. Und denken Sie daran, dass Sie bei der Verwendung von django-crispy-forms auf die Konfiguration der __init__-Methode achten sollten, um die Protokolldateien sauber zu halten! 

Im nächsten Beitrag werden wir uns mit den fortgeschrittenen Anwendungen von Django Forms befassen.