Der Kern von Django Forms sind Felder und Widgets. Felder dienen dazu, Eingabedaten zu validieren und zu verarbeiten, während Widgets die HTML-Elemente definieren, die für die Darstellung dieser Felder verwendet werden. In diesem Artikel werden wir die wichtigsten Felder und Widgets sowie Anpassungsmöglichkeiten im Detail betrachten.

1. Django Forms Felder

1.1 Was sind Felder?

Felder sind die grundlegenden Komponenten in Django Forms zur Definition und Validierung von Daten.

• Sie validieren die eingegebenen Daten, bevor sie in cleaned_data gespeichert werden.
• Jedes Feld ist mit einem HTML-Eingabetyp verknüpft.

Hauptfeldtypen

Grundlagen der Feldverwendung

from django import forms

class ExampleForm(forms.Form):
    name = forms.CharField(max_length=50, required=True, label="Ihr Name")
    email = forms.EmailField(required=True, label="Ihre E-Mail")
    age = forms.IntegerField(required=False, min_value=1, label="Ihr Alter")

2. Django Forms Widgets

2.1 Was sind Widgets?

Widgets sind Elemente, die in Django Forms verwendet werden, um jedes Feld in HTML darzustellen.

• Sie definieren die HTML-Tags und Attribute des Feldes.
• Beispiel: CharField verwendet standardmäßig das Widget TextInput.

Hauptwidgettypen

2.2 Felder und ID-Attribute

Django Forms fügt beim Rendern in HTML automatisch ein einzigartiges id Attribut zu jedem Feld hinzu. Dieses Attribut wird im Format id_<fieldname> erstellt.

• Beispiel: Wenn der Feldname name ist, lautet die id im gerenderten <input> Tag id_name.
• Dieses id Attribut ist im Template in den folgenden Fällen nützlich:
  • JavaScript: Um ein bestimmtes Feld auszuwählen und dynamisch zu verarbeiten.
  • Label Tag: Um mit <label for="id_name"> zu verknüpfen.

Beispiel: Verwendung von Feld und ID-Attribut

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

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

3. Anpassung von Feldern und Widgets

3.1 Anpassung von Feldeigenschaften

Django Forms ermöglicht es, die Attribute von HTML-Elementen mit attrs zu ändern.

Beispiel: Änderung der Feldeigenschaften

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

3.2 Erstellen von benutzerdefinierten Widgets

Je nach Bedarf können Sie benutzerdefinierte Widgets erstellen.

Beispiel: Erstellen eines benutzerdefinierten Widgets

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. Praxisbeispiel: Erstellen eines gestylten Formulars

4.1 Bootstrap-Anwendung

Bei Verwendung von Bootstrap können Sie jedem Feld die class='form-control' hinzufügen, um das Styling anzupassen.

Beispiel: Bootstrap gestyltes Formular

class BootstrapForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Geben Sie Ihren Namen ein'})
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'Geben Sie Ihre E-Mail ein'})
    )

4.2 Benutzerdefinierte CSS und Formular Styling

Durch das Hinzufügen einer CSS-Datei können Sie das Styling des Formulars weiter verfeinern.

Beispiel: Template verbunden mit CSS

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Ihr Name</label>
        <input type="text" class="form-control" id="id_name" name="name">
    </div>
    <div class="form-group">
        <label for="id_email">Ihre E-Mail</label>
        <input type="email" class="form-control" id="id_email" name="email">
    </div>
    <button type="submit" class="btn btn-primary">Absenden</button>
</form>

5. Fazit

Die Felder und Widgets von Django Forms spielen eine entscheidende Rolle bei der Verarbeitung und Validierung von Daten sowie bei der Gestaltung der Benutzeroberfläche. Neben den standardmäßig vorhandenen Feldern und Widgets können Sie diese ebenfalls anpassen, um Formulare zu erstellen, die ideal zu Ihrem Projekt passen.

Im nächsten Artikel werden wir tiefer auf Validierung und Anpassung von Formularen eingehen.