Cum să stilați formele cu django-crispy-forms

Cel mai bun mod de a stăpâni Django este să-l folosești pentru a dezvolta aplicații full-stack. Veți întâlni multe caracteristici fascinante atunci când lucrați cu cadrul. Unul dintre ele este modul de redare a formularelor în șabloane folosind forme crocante.

Utilizarea django-crispy-forms este una dintre multele moduri prin care puteți reda formulare în Django. Dependența vă permite să creați formulare în șabloane fără a scrie cod HTML. Puteți construi cu ușurință machete reutilizabile fără bătaia de cap de a scrie codul de formular.

Puteți afla mai multe instalând biblioteca, apoi configurând-o și folosind-o pentru a crea un formular de înregistrare.

Cum funcționează django-crispy-forms

The biblioteca django-crispy-forms vine cu cod HTML încorporat pe care îl puteți personaliza în funcție de nevoile dvs. Include un filtru numit |crocantă care redă forme bazate pe div în șablon.

The {% crocant %} tags va reda formularele în funcție de o anumită configurație.django-crispy-forms funcționează bine cu alte dependențe de șablon, cum ar fi Bootstrap și Tailwind CSS.

Să vedem cum funcționează într-un șablon.

Instalați Crispy Forms

Începe prin crearea unui proiect Django și aplicația. Apoi instalați cea mai recentă versiune de django-crispy-forms folosind Pipenv cu următoarea comandă:

pipenv instalare django-crocante-forme

O instalare reușită va arăta ca în imaginea de mai jos:

Configurați django-crispy-forms în Setări

După instalare, trebuie să înregistrați formularele crocante ca dependență în setările proiectului. Prin înregistrarea acesteia, biblioteca de formulare crocante va fi disponibilă pentru toate aplicațiile din proiect.

În proiect setări.py fișier, adăugați șirul „forme_crocante”:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'aplicația mea',
'forme_crocante',
]

Creați un formular

Trebuie să vă sincronizați formularul de înregistrare cu formularul de creare a utilizatorilor Django încorporat pentru a ajuta la autentificare.

Încorporat Autentificarea utilizatorului Django sistemul gestionează cerințe comune, cum ar fi validarea parolelor și eliberarea permisiunilor.

Sistemul se ocupă și de validarea formularelor pentru dvs. Așadar, puteți crea formulare fără bătaia de cap de a gestiona singur validarea. Dacă ați făcut validarea formularelor în alte cadre, veți ști cât de greoaie poate fi. Nu cu Django.

Modulul de autentificare are un Utilizator model sau obiect. The Utilizator obiectul este componenta principală a sistemului de autentificare a utilizatorului. Se ocupă de permisiuni, autentificarea profilurilor utilizatorilor înregistrați, controlul accesului și multe altele.

The UserCreationForm folosește cel încorporat Utilizator obiect pentru a înregistra noi utilizatori. Moștenește din clasa ModelForm.

Mai întâi, importați formulare din modulul de formulare Django. Apoi, importați UserCreationForm din django.contrib.auth.forms. De asemenea, importați încorporat Utilizator model de la django.contrib.auth.models. Apoi importați intrările câmpului din django ModelForm.

din django import forme
dindjango.contribuire.auth.formeimportUserCreationForm
dindjango.contribuire.auth.modeleimportUtilizator
din django.forme import ModelForm, TextInput, EmailInput, ImageField, Textarea

Apoi, creați un obiect de înregistrare numit RegisterUserForm. Este nevoie de UserCreationForm ca argument. Adaugă Utilizator câmpuri obiect, cum ar fi autentificarea e-mailului, numele de utilizator și două parole.

clasăRegisterUserForm(UserCreationForm):
 email = formulare. EmailField (lungime_max.=254, text_ajutor='Necesar. Introduceți o adresă de email validă.')
clasăMeta:
 model = Utilizator
 câmpuri = ('nume de utilizator', 'e-mail', 'parola1', 'parola2')

Aceste câmpuri sunt atributele principale ale unui utilizator din formularul de înregistrare. Sunt intrări obligatorii pe care utilizatorii trebuie să le completeze pentru ca sistemul să le autentifice.

Creați o funcție de vizualizare

Apoi, veți crea o funcție de vizualizare pentru formularul de înregistrare. Mai întâi, importați funcția de randare, precum și RegisterUserForm din forme.py. Apoi importați Utilizator model de la django.contrib.auth.models.

Funcția de vizualizare numită register preia RegisterUserForm. O va reda pe register.html șablon.

din django.comenzi rapide import face,
din django.http import HttpResponse, Http404
din .forme import RegisterUserForm
dindjango.contribuire.auth.modeleimportUtilizator
defInregistreaza-te(cerere):
 form=RegisterUserForm
 context={'formă':formă}
 returnare randare (cerere,'register.html',context)

Creați calea URL

Creați o cale URL pentru register.html șablon. Această adresă URL este calea pentru funcția de vizualizare pe care tocmai ați creat-o. Da-i numele Inregistreaza-te, astfel încât să puteți folosi numele pentru a-l invoca pe un șablon.

din django.urls import cale
din. import vederi
urlpatterns=[
 cale ('Inregistreaza-te', views.register, name='Inregistreaza-te'),
]

Încărcați pe un șablon

Acum că aveți vizualizarea și calea URL, puteți crea register.html șablon în folderul aplicației. Veți folosi django-crispy-forms pentru a reda RegisterUserForm.

În register.html șablon, extindeți baza.html. The baza.html conţine Linkuri bootstrap veți folosi pentru a modela formularul de înregistrare. Apoi încărcați django-crispy-forms cu register.html folosind etichete șablon.

{% se extinde 'baza.html' %}
{% încărcare crispy_forms_tags %}
{% block content %}
<div class="recipient" stil="">
<div class="rând">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card" stil="culoarea neagra;">
<div class="card-corp">
<clasa h5="card-titlu"><A>Înregistrează-te pentru a fi membru</A><span style="plutire: dreapta">Ești membru? <a href="#" clasa="text-primar">Conectați-vă acum</A></span></h5>
<div class="card-text">
<form action="" metoda="POST" nuvalidate>
 {% csrf_token %}
 {{ formă|crocantă}}
<tip de buton="Trimite" clasa="btn btn-primar btn-sm"> Inregistreaza-te</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

Formularul include csrf_token, care protejează procesul de înregistrare împotriva hackerilor. Redați formularul cu același nume de variabilă ca în funcția de vizualizare. Apoi adăugați |crocant filtru pentru Django {{formă}} variabil. Acest lucru va face forma ca o formă crocantă.

Rulați serverul. Apoi, verificați aplicația într-un browser la http://127.0.0.1:8000/register. Ar trebui să vedeți formularul afișat așa cum este ilustrat mai jos:

Ați redat un formular de înregistrare folosind formulare crocante! Observați că Django a adăugat automat validarea formularului. Acestea includ cerințe precum permisiunile pentru numele de utilizator și parola.

Pentru a avea un sistem complet de înregistrare, adăugați logica de autentificare la funcția de vizualizare. De asemenea, puteți adăuga o pagină de conectare pentru a vă conecta utilizatorii înregistrați. Utilizatorii ar trebui să îndeplinească cerințele de autentificare pentru a se conecta la aplicație.

Biblioteca django-crispy-forms vă permite să redați rapid și ușor formularele validate. Validarea datelor vă asigură că aveți date exacte de la utilizatorii dvs.

Datele sunt utile atunci când comunicați cu utilizatorii și analizați valorile de performanță.

De ce să folosiți django-crispy-forms?

Utilizarea bibliotecii de formulare crocante pentru a reda formulare în Django este un exemplu excelent de aplicare a principiului DRY. django-crispy-forms creează componente reutilizabile pe care le puteți reda în șabloane.

Vin cu cod HTML încorporat. Codul vă va scuti de necazul structurii și validării formularelor. Formularele crocante oferă o etichetă și un filtru care redă formularele într-un format div. Ele oferă, de asemenea, capacitatea de a configura și controla HTML redat.

django-crispy-forms funcționează bine cu sistemul de autentificare Django. Puteți crea un sistem de autentificare pentru a vă verifica utilizatorii fără a scrie mult cod.