Hur man stylar formulär med django-krispiga-former

Det bästa sättet att bemästra Django är att använda den för att utveckla full-stack-applikationer. Du kommer att stöta på många fascinerande funktioner när du arbetar med ramverket. En av dem är hur man renderar formulär i mallar med krispiga formulär.

Att använda django-crispy-forms är ett av många sätt du kan rendera formulär i Django. Beroendet gör att du kan skapa formulär i mallar utan att skriva HTML-kod. Du kan enkelt bygga återanvändbara layouter utan att behöva skriva formulärkod.

Du kan lära dig mer genom att installera biblioteket, sedan konfigurera det och använda det för att skapa ett registreringsformulär.

Hur django-crispy-forms fungerar

De django-crispy-forms-biblioteket kommer med inbyggd HTML-kod som du kan anpassa efter dina behov. Den innehåller ett filter som heter | krispiga som återger div-baserade formulär i mallen.

De {% Krispig %}

tags kommer att rendera formulär enligt en specifik setup.django-crispy-forms fungerar bra med andra mallberoenden som Bootstrap och Tailwind CSS.

Låt oss se hur det fungerar i en mall.

Installera Crispy Forms

Börja med skapa ett Django-projekt och app. Installera sedan den senaste versionen av django-crispy-forms med Pipenv med följande kommando:

pipenv Installera django-krispiga-former

En lyckad installation kommer att se ut som på bilden nedan:

Konfigurera django-crispy-forms i inställningarna

Efter installationen måste du registrera krispiga formulär som ett beroende i projektinställningarna. Genom att registrera det blir det krispiga formulärbiblioteket tillgängligt för alla appar i projektet.

I projektet settings.py fil, lägg till strängen "crispy_forms":

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'minapp',
'krispiga_former',
]

Skapa ett formulär

Du måste synkronisera ditt registreringsformulär med det inbyggda Django-formuläret för att skapa användare för att hjälpa till med autentisering.

Den inbyggda Django användarautentisering systemet hanterar vanliga krav som validering av lösenord och utfärdande av behörigheter.

Systemet hanterar även formulärvalidering åt dig. Så du får skapa formulär utan att behöva hantera validering själv. Om du har gjort formulärvalidering i andra ramverk så vet du hur krångligt det kan vara. Inte med Django.

Autentiseringsmodulen har en Användare modell eller föremål. De Användare objekt är huvudkomponenten i användarautentiseringssystemet. Den hanterar behörigheter, autentisering av registrerade användares profiler, åtkomstkontroll och mycket mer.

De UserCreationForm använder den inbyggda Användare invända mot att registrera nya användare. Den ärver från klassen ModelForm.

Importera först formulär från Django-formulärmodulen. Importera sedan UserCreationForm från django.contrib.auth.forms. Importera också den inbyggda Användare modell från django.contrib.auth.models. Importera sedan fältindata från django ModelForm.

från django importera formulär
fråndjango.contrib.auth.formulärimporteraUserCreationForm
fråndjango.contrib.auth.modellerimporteraAnvändare
från django.forms importera ModelForm, TextInput, EmailInput, ImageField, Textarea

Skapa sedan ett registreringsobjekt med namnet RegisterUserForm. Det tar UserCreationForm som ett argument. Lägg till Användare objektfält som e-postautentisering, användarnamn och två lösenord.

klassRegisterUserForm(UserCreationForm):
 e-post = formulär. EmailField (max_length=254, help_text='Nödvändig. Ange en giltig e-postadress.')
klassMeta:
 modell = Användare
 fält = ('Användarnamn', 'e-post', 'lösenord1', 'lösenord2')

Dessa fält är de primära attributen för en användare på registreringsformuläret. De är obligatoriska indata som användarna måste fylla i för att systemet ska kunna autentisera dem.

Skapa en visningsfunktion

Därefter skapar du en visningsfunktion för registreringsformuläret. Importera först renderingsfunktionen samt RegisterUserForm från forms.py. Importera sedan Användare modell från django.contrib.auth.models.

Visningsfunktionen med namnet register tar RegisterUserForm. Det kommer att återge det på register.html mall.

från django.shortcuts importera framställa,
från django.http importera HttpResponse, Http404
från .formulär importera RegisterUserForm
fråndjango.contrib.auth.modellerimporteraAnvändare
defRegistrera(begäran):
 form=RegisterUserForm
 sammanhang={'form':form}
 returnera render (begäran,'register.html',sammanhang)

Skapa URL-sökväg

Skapa en webbadresssökväg för register.html mall. Denna URL är sökvägen för visningsfunktionen du just skapade. Ge det namnet Registrera, så att du kan använda namnet för att anropa det på en mall.

från django.urls importera väg
från. importera vyer
urlpatterns=[
 väg ('Registrera', views.register, namn='Registrera'),
]

Ladda på en mall

Nu när du har vyn och URL-sökvägen kan du skapa register.html mall i app-mappen. Du kommer att använda django-crispy-forms för att rendera RegisterUserForm.

I den register.html mall, förlänga base.html. De base.html innehåller Bootstrap länkar du kommer att använda för att utforma registreringsformuläret. Ladda sedan django-crispy-forms med register.html med malltaggar.

{% sträcker sig 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div klass="behållare" stil="">
<div klass="rad">
<div klass="kol-md-2"></div>
<div klass="kol-md-8">
<div klass="kort" stil="svart färg;">
<div klass="kortkropp">
<h5 klass="kort-titel"><a>Registrera dig för att bli medlem</a><span stil="flyta: höger">Är du medlem? <a href="#" klass="text-primär">Logga in nu</a></span></h5>
<div klass="kort-text">
<form action="" metod="POSTA" novalidate>
 {% csrf_token %}
 {{ form|crispy}}
<knapptyp="Skicka in" klass="btn btn-primär btn-sm"> Registrera</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% slutblock %}

Blanketten innehåller csrf_token, som skyddar registreringsprocessen från hackare. Rendera formuläret med samma variabelnamn som i vyfunktionen. Lägg sedan till |Krispig filtrera till Django {{form}} variabel. Detta kommer att göra formen som krispig form.

Kör servern. Kontrollera sedan appen i en webbläsare på http://127.0.0.1:8000/register. Du bör se formuläret som visas nedan:

Du har återgett ett registreringsformulär med krispiga formulär! Observera att Django automatiskt lade till validering i formuläret. Dessa inkluderar krav som användarnamn och lösenordsbehörigheter.

För att ha ett komplett registreringssystem, lägg till autentiseringslogik till visningsfunktionen. Du kan också lägga till en inloggningssida för att logga in registrerade användare. Användare måste uppfylla autentiseringskrav för att logga in på appen.

Django-crispy-forms-biblioteket låter dig snabbt och enkelt återge validerade formulär. Validering av data säkerställer att du har korrekt data från dina användare.

Uppgifterna kommer väl till pass när man kommunicerar med användare och analyserar prestandamått.

Varför använda django-krispiga-former?

Att använda krispiga formulärbiblioteket för att rendera formulär i Django är ett bra exempel på hur man tillämpar DRY-principen. django-crispy-forms skapar återanvändbara komponenter som du kan rendera i mallar.

De kommer med inbyggd HTML-kod. Koden kommer att spara dig besväret med att strukturera och validera formulär. Krispiga formulär ger en tagg och ett filter som återger formulär i ett div-format. De ger också möjlighet att konfigurera och kontrollera den renderade HTML-koden.

django-crispy-forms fungerar bra med Django-autentiseringssystemet. Du kan skapa ett autentiseringssystem för att verifiera dina användare utan att skriva mycket kod.