Django Forms 5: Styling met CSS

Django Forms biedt basisfunctionaliteit voor gegevensinvoer, maar het is belangrijk om formulieren te stylen om de gebruikerservaring te verbeteren. In dit artikel kijken we naar hoe we Django Forms kunnen stylen met CSS en praktische voorbeelden.

1. Basis HTML-formulieren en Django Forms

1.1 Basisuitvoer van Django Forms

Django Forms genereert standaard automatisch HTML. De basisuitvoer is als volgt:

• as_p: Wikkelt elk veld in een <p> tag.
• as_table: Rendert elk veld in een <tr> tag.
• as_ul: Wikkelt elk veld in een <li> tag.

Voorbeeld: Basisuitvoer

class ExampleForm(forms.Form):
    name = forms.CharField(label="Je naam")
    email = forms.EmailField(label="Je email")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Verstuur</button>
</form>

De bovenstaande code wordt weergegeven in de standaardstijl gewikkeld in de <p> tag.

2. Formulieren stylen met CSS

2.1 Toepassing van stijl met de attrs eigenschap en Bootstrap

Met de attrs eigenschap kun je CSS-klassen rechtstreeks aan HTML-tags toevoegen. Dit maakt het eenvoudig om CSS-frameworks zoals Bootstrap toe te passen.

Voorbeeld: Bootstrap-stijl toepassen met attrs

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je gebruikersnaam in'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je wachtwoord in'
        })
    )

Rendering van formulieren in de template

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

Voorbeeld van de resulterende HTML

<input type="text" name="username" class="form-control" placeholder="Voer je gebruikersnaam in">
<input type="password" name="password" class="form-control" placeholder="Voer je wachtwoord in">

2.2 Formulierstyling met Bootstrap

Voorbeeld: Bootstrap-stijl toepassen

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je gebruikersnaam in'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je wachtwoord in'
        })
    )

Rendering van het formulier in de template

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

Resultaat scherm

• De formulierenvelden en knoppen met Bootstrap-stijl worden gerenderd.

3. Gebruik van Django FormHelper en bibliotheken

3.1 Introductie tot django-crispy-forms

django-crispy-forms biedt betere styling en lay-outbeheer voor Django Forms.

Installatie

pip install django-crispy-forms

Instellingen

Voeg het volgende toe aan settings.py:

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

Formulierdefinitie

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

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Je email")

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

Let op

django-crispy-forms is handig voor eenvoudige formulierstyling, maar als de initializer __init__ niet goed is ingesteld, kunnen er te veel debug-logboeken ontstaan. Zorg ervoor dat je op dit punt let als je de logbestanden schoon wilt houden. Dit is aan te raden voor ontwikkelaars die debug-logboeken uitzetten of niet geven om rommelige logboeken, maar persoonlijk ben ik niet dol op deze stijl van styling. Om debugginglogs te vermijden moet je de initializer perfect instellen, wat betekent dat je in de broncode moet duiken, en dat leidt me ertoe om liever op een andere manier te styliseren.

Gebruik in de template

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

4. Praktijkvoorbeeld: Ledenregistratie formulierstyling

4.1 Formulierdefinitie

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je gebruikersnaam in'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je email in'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Voer je wachtwoord in'
        })
    )

4.2 Rendering in de template

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Gebruikersnaam</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">Email</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Wachtwoord</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">Aanmelden</button>
</form>

5. Conclusie

Met Django Forms en CSS kun je de gebruikerservaring aanzienlijk verbeteren. Van basisstyling met attrs tot geavanceerde styling met Bootstrap en bibliotheken zoals django-crispy-forms, probeer verschillende methoden toe te passen. Vergeet niet dat je bij het gebruik van django-crispy-forms aandacht moet besteden aan de instelling van de __init__ initializer om te voorkomen dat je logbestanden rommelig worden! 

In het volgende artikel zullen we het geavanceerd gebruik van Django Forms behandelen.