Django Forms 3: Velden en Widgets

De kern van Django Forms zijn velden (Field) en widgets (Widget). Velden hebben de rol van het valideren en verwerken van invoergegevens, terwijl widgets de HTML-elementen definiëren die deze velden renderen. In dit artikel bekijken we de belangrijkste velden en widgets, evenals hoe je ze kunt aanpassen.

1. Velden van Django Forms

1.1 Wat zijn velden?

Velden zijn de basiscomponenten die gegevens definiëren en valideren in Django Forms.

• Ze valideren de gegevens die de gebruiker invoert voordat ze worden opgeslagen in cleaned_data.
• Elk veld is gekoppeld aan een HTML-inputtype.

Belangrijkste veldtypes

Basisgebruik van velden

from django import forms

class ExampleForm(forms.Form):
    name = forms.CharField(max_length=50, required=True, label="Uw Naam")
    email = forms.EmailField(required=True, label="Uw Email")
    age = forms.IntegerField(required=False, min_value=1, label="Uw Leeftijd")

2. Widgets van Django Forms

2.1 Wat zijn widgets?

Widgets zijn de elementen die worden gebruikt wanneer elk veld in Django Forms als HTML wordt gerenderd.

• Ze definiëren de HTML-tags en attributen van de velden.
• Bijvoorbeeld: CharField gebruikt standaard de TextInput widget.

Belangrijkste widgettypes

2.2 Velden en ID-attributen

Django Forms voegt automatisch een unieke id attribuut toe aan elk veld wanneer ze als HTML worden gerenderd. Dit attribuut wordt gegenereerd in het formaat id_<fieldname>.

• Bijvoorbeeld: als de veldnaam name is, dan is de id van de gerenderde <input> tag id_name.
• Dit id attribuut is nuttig in sjablonen voor:
  • JavaScript: om specifieke velden te selecteren en dynamisch te verwerken.
  • Label-tags: om te verbinden met <label for="id_name">.

Voorbeeld: Velden en het gebruik van ID-attributen

<form method="post">
    {% csrf_token %}
    <label for="id_name">Naam:</label>
    <input type="text" id="id_name" name="name">

    <script>
        document.getElementById('id_name').addEventListener('input', function() {
            console.log(this.value);
        });
    </script>
</form>

3. Aanpassen van velden en widgets

3.1 Aanpassen van veldattributen

Django Forms stelt je in staat om HTML-elementattributen te wijzigen met attrs.

Voorbeeld: Wijzig veldattributen

class CustomForm(forms.Form):
    username = forms.CharField(
        max_length=100,
        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'
        })
    )

3.2 Aanmaken van een aangepaste widget

Je kunt ook aangepaste widgets maken en gebruiken naar behoefte.

Voorbeeld: Aangepaste widget aanmaken

from django.forms.widgets import TextInput

class CustomTextInput(TextInput):
    template_name = 'custom_widgets/custom_text_input.html'

class CustomForm(forms.Form):
    custom_field = forms.CharField(widget=CustomTextInput())

4. Praktijkvoorbeeld: Gecoördineerde formulier maken

4.1 Toepassing van Bootstrap

Bij gebruik van Bootstrap kun je class='form-control' toevoegen aan elk veld om het op te maken.

Voorbeeld: Bootstrap opmaakformulier

class BootstrapForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Vul uw naam in'})
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'Vul uw email in'})
    )

4.2 Aangepaste CSS en formulier opmaak

Door een CSS-bestand toe te voegen kun je de stijl van het formulier verder verfijnen.

Voorbeeld: Sjabloon gekoppeld aan CSS

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Uw Naam</label>
        <input type="text" class="form-control" id="id_name" name="name">
    </div>
    <div class="form-group">
        <label for="id_email">Uw Email</label>
        <input type="email" class="form-control" id="id_email" name="email">
    </div>
    <button type="submit" class="btn btn-primary">Verzenden</button>
</form>

5. Conclusie

De velden en widgets van Django Forms zijn cruciaal voor het verwerken en valideren van gegevens, en voor het samenstellen van de gebruikersinterface. Naast de standaard beschikbare velden en widgets kun je ze aanpassen om formulieren te ontwerpen die passen bij jouw project.

In het volgende artikel zullen we dieper ingaan op validatie en het aanpassen van formulieren.