Wie man Formulare mit django-crispy-forms gestaltet

Der beste Weg, Django zu beherrschen, besteht darin, es zur Entwicklung von Full-Stack-Anwendungen zu verwenden. Sie werden auf viele faszinierende Funktionen stoßen, wenn Sie mit dem Framework arbeiten. Eine davon ist das Rendern von Formularen in Vorlagen mit knusprigen Formularen.

Die Verwendung von django-crispy-forms ist eine von vielen Möglichkeiten, wie Sie Formulare in Django rendern können. Die Abhängigkeit ermöglicht es Ihnen, Formulare in Vorlagen zu erstellen, ohne HTML-Code schreiben zu müssen. Sie können ganz einfach wiederverwendbare Layouts erstellen, ohne Formularcode schreiben zu müssen.

Sie können mehr erfahren, indem Sie die Bibliothek installieren, dann konfigurieren und damit ein Registrierungsformular erstellen.

Wie django-crispy-forms funktioniert

Der django-crispy-forms-Bibliothek enthält integrierten HTML-Code, den Sie an Ihre Bedürfnisse anpassen können. Es enthält einen Filter namens

|knusprig die div-basierte Formulare in der Vorlage rendert.

Der {% knusprig %} tags rendert Formulare gemäß einem bestimmten Setup. django-crispy-forms funktioniert gut mit anderen Template-Abhängigkeiten wie Bootstrap und Tailwind CSS.

Mal sehen, wie das in einer Vorlage funktioniert.

Installieren Sie Crispy Forms

Beginnen Sie mit Erstellen eines Django-Projekts und app. Installieren Sie dann die neueste Version von django-crispy-forms mit Pipenv mit dem folgenden Befehl:

pipenv Installieren Django-Crispy-Formen

Eine erfolgreiche Installation sieht wie im Bild unten aus:

Konfigurieren Sie django-crispy-forms in den Einstellungen

Nach der Installation müssen Sie Crispy Forms als Abhängigkeit in den Projekteinstellungen registrieren. Durch die Registrierung steht die Crispy Forms-Bibliothek allen Apps im Projekt zur Verfügung.

Im Projekt settings.py Datei, fügen Sie die Zeichenfolge hinzu 'crispy_forms':

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'meine App',
'knusprige_formen',
]

Erstellen Sie ein Formular

Sie müssen Ihr Registrierungsformular mit dem integrierten Django-Benutzererstellungsformular synchronisieren, um die Authentifizierung zu unterstützen.

Das eingebaute Django-Benutzerauthentifizierung System behandelt allgemeine Anforderungen wie das Überprüfen von Passwörtern und das Erteilen von Berechtigungen.

Das System übernimmt auch die Formularvalidierung für Sie. So können Sie Formulare erstellen, ohne sich um die Validierung kümmern zu müssen. Wenn Sie die Formularvalidierung in anderen Frameworks durchgeführt haben, wissen Sie, wie umständlich dies sein kann. Nicht mit Django.

Das Authentifizierungsmodul hat a Benutzer Modell oder Objekt. Der Benutzer Objekt ist die Hauptkomponente des Benutzerauthentifizierungssystems. Es verwaltet Berechtigungen, authentifiziert registrierte Benutzerprofile, Zugriffskontrolle und vieles mehr.

Der UserCreationForm verwendet die eingebaute Benutzer widersprechen, neue Benutzer zu registrieren. Sie erbt von der ModelForm-Klasse.

Importieren Sie zunächst Formulare aus dem Django-Formularmodul. Importieren Sie dann die UserCreationForm aus django.contrib.auth.forms. Importieren Sie auch die eingebaute Benutzer Modell aus django.contrib.auth.models. Importieren Sie dann die Feldeingaben aus Django ModelForm.

aus Django importieren Formen
ausDjango.Beitrag.auth.FormenimportierenUserCreationForm
ausDjango.Beitrag.auth.ModelleimportierenBenutzer
aus django.forms importieren ModelForm, TextInput, EmailInput, ImageField, Textarea

Erstellen Sie als Nächstes ein Registrierungsobjekt mit dem Namen Benutzerformular registrieren. Es dauert die UserCreationForm als Argument. Ergänzen Sie die Benutzer Objektfelder wie E-Mail-Authentifizierung, Benutzername und zwei Passwörter.

KlasseBenutzerformular registrieren(UserCreationForm):
 E-Mail = Formulare. EmailField (max_length=254, help_text='Erforderlich. Geben sie eine gültige E-Mail-Adresse an.')
KlasseMeta:
 Modell = Benutzer
 Felder = ('Nutzername', 'Email', 'Passwort1', 'Passwort2')

Diese Felder sind die primären Attribute eines Benutzers im Registrierungsformular. Sie sind obligatorische Eingaben, die Benutzer ausfüllen müssen, damit das System sie authentifizieren kann.

Erstellen Sie eine Ansichtsfunktion

Als Nächstes erstellen Sie eine Ansichtsfunktion für das Registrierungsformular. Importieren Sie zunächst die Renderfunktion sowie die Benutzerformular registrieren aus forms.py. Importieren Sie dann die Benutzer Modell aus django.contrib.auth.models.

Die Ansichtsfunktion mit dem Namen register übernimmt die Benutzerformular registrieren. Es wird es auf dem rendern registrieren.html Vorlage.

aus django.shortcuts importieren machen,
aus django.http importieren HttpAntwort, Http404
aus .Formen importieren Benutzerformular registrieren
ausDjango.Beitrag.auth.ModelleimportierenBenutzer
defregistrieren(Anfrage):
 form=RegisterUserForm
 Kontext={'form':form}
 zurück rendern (Anfrage,'registrieren.html',Kontext)

URL-Pfad erstellen

Erstellen Sie einen URL-Pfad für die registrieren.html Vorlage. Diese URL ist der Pfad für die soeben erstellte Ansichtsfunktion. Geben Sie ihm den Namen registrieren, sodass Sie den Namen verwenden können, um ihn in einer Vorlage aufzurufen.

aus django.urls importieren Weg
aus. importieren Ansichten
URL-Muster=[
 Weg ('registrieren', Ansichten.register, name='registrieren'),
]

Laden Sie eine Vorlage

Nachdem Sie nun die Ansicht und den URL-Pfad haben, können Sie die erstellen registrieren.html Vorlage im App-Ordner. Sie werden django-crispy-forms verwenden, um die zu rendern Benutzerformular registrieren.

Im registrieren.html Vorlage, erweitern Sie die basis.html. Der basis.html enthält die Bootstrap-Links Sie verwenden, um das Registrierungsformular zu gestalten. Laden Sie dann die django-crispy-forms mit der register.html unter Verwendung von Template-Tags.

{% erweitert 'basis.html' %}
{% lade knusprige_forms_tags %}
{% Inhalt blockieren %}
<div-Klasse="Container" Stil="">
<div-Klasse="Reihe">
<div-Klasse="col-md-2"></div>
<div-Klasse="col-md-8">
<div-Klasse="Karte" Stil="Farbe: Schwarz;">
<div-Klasse="Kartenkörper">
<h5 Klasse="Kartentitel"><A>Registrieren Sie sich als Mitglied</A><Span-Stil ="schweben rechts">Bist du ein Mitglied? <ein href="#" Klasse="Text-primär">Jetzt einloggen</A></span></h5>
<div-Klasse="Kartentext">
<form action="" Methode="POST" novalidieren>
 {% csrf_token %}
 {{ Form|knusprig}}
<Schaltflächentyp="einreichen" Klasse="btn btn-primär btn-sm"> Registrieren</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% Endblock %}

Das Formular enthält die csrf_token, die den Registrierungsprozess vor Hackern schützt. Rendern Sie das Formular mit demselben Variablennamen wie in der Ansichtsfunktion. Fügen Sie dann das | hinzuknusprig Filter zum Django {{form}} Variable. Dadurch wird die Form als knusprige Form wiedergegeben.

Führen Sie den Server aus. Überprüfen Sie dann die App in einem Browser unter http://127.0.0.1:8000/register. Sie sollten das unten dargestellte Formular sehen:

Sie haben ein Registrierungsformular mit Crispy Forms gerendert! Beachten Sie, dass Django dem Formular automatisch eine Validierung hinzugefügt hat. Dazu gehören Anforderungen wie Berechtigungen für Benutzername und Passwort.

Um ein vollständiges Anmeldesystem zu haben, fügen Sie der Ansichtsfunktion eine Authentifizierungslogik hinzu. Sie können auch eine Anmeldeseite hinzufügen, um registrierte Benutzer anzumelden. Benutzer sollten Authentifizierungsanforderungen erfüllen müssen, um sich bei der App anzumelden.

Mit der django-crispy-forms-Bibliothek können Sie validierte Formulare schnell und einfach rendern. Die Validierung von Daten stellt sicher, dass Sie genaue Daten von Ihren Benutzern haben.

Die Daten sind praktisch, wenn Sie mit Benutzern kommunizieren und Leistungskennzahlen analysieren.

Warum Django-Crispy-Formulare verwenden?

Die Verwendung der Crispy Forms-Bibliothek zum Rendern von Formularen in Django ist ein großartiges Beispiel für die Anwendung des DRY-Prinzips. django-crispy-forms erstellt wiederverwendbare Komponenten, die Sie in Vorlagen rendern können.

Sie kommen mit eingebautem HTML-Code. Der Code erspart Ihnen den Aufwand, Formulare zu strukturieren und zu validieren. Crispy Forms stellt ein Tag und einen Filter bereit, die Formulare in einem Div-Format rendern. Sie bieten auch die Möglichkeit, das gerenderte HTML zu konfigurieren und zu steuern.

django-crispy-forms funktioniert gut mit dem Django-Authentifizierungssystem. Sie können ein Authentifizierungssystem erstellen, um Ihre Benutzer zu verifizieren, ohne viel Code schreiben zu müssen.