Uma vez que estilizar formulários com django-crispy-forms

A melhor maneira de dominar o Django é usá-lo para desenvolver aplicativos full-stack. Você encontrará muitos recursos fascinantes ao trabalhar com a estrutura. Uma delas é porquê renderizar formulários em templates usando crispy forms.

Usar django-crispy-forms é uma das muitas maneiras de renderizar formulários no Django. A submissão permite gerar formulários em modelos sem grafar código HTML. Você pode gerar facilmente layouts reutilizáveis ​​sem o incômodo de grafar código de formulário.

Você pode aprender mais instalando a livraria, configurando-a e usando-a para gerar um formulário de registro.

Uma vez que funciona o django-crispy-forms

A livraria django-crispy-forms vem com código HTML encravado que você pode personalizar de conformidade com suas necessidades. Inclui um filtro chamado | crocante que renderiza formulários baseados em div no padrão.

o {% crocantes %} Tag renderizará formulários de conformidade com uma formato específica. django-crispy-forms funciona muito com outras dependências de template porquê Bootstrap e Tailwind CSS.

Vamos ver porquê isso funciona em um padrão.

Instalar Crispy Forms

Comece criando um projeto e aplicativo Django. Em seguida, instale a versão mais recente do django-crispy-forms usando o Pipenv com o seguinte comando:

pipenv install django-crispy-forms

Uma instalação bem-sucedida se parecerá com a imagem inferior:

Configure django-crispy-forms nas configurações

Posteriormente a instalação, você deve registrar crispy forms porquê submissão nas configurações do projeto. Ao registrá-lo, a livraria crispy forms estará disponível para todos os apps do projeto.

No projeto settings.py registo, adicione a string ‘crispy_forms’:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
'crispy_forms',
]

Fabricar um formulário

Você precisa sincronizar seu formulário de registro com o formulário de geração de usuário integrado do Django para ajudar na autenticação.

O sistema integrado de autenticação de usuário do Django lida com requisitos comuns, porquê validação de senhas e emissão de permissões.

O sistema também lida com a validação do formulário para você. Assim, você pode gerar formulários sem o incômodo de mourejar com a validação por conta própria. Se você já fez a validação de formulário em outras estruturas, saberá porquê isso pode ser complicado. Não com Django.

O módulo de autenticação possui um Do utilizador padrão ou objeto. o Do utilizador objeto é o principal componente do sistema de autenticação do usuário. Ele lida com permissões, autenticando perfis de usuários registrados, controle de aproximação e muito mais.

o UserCreationForm usa o encravado Do utilizador objeto de registro de novos usuários. Ele herda da classe ModelForm.

Primeiro, importe formulários do módulo de formulário do Django. Em seguida, importe o UserCreationForm a partir de django.contrib.auth.forms. Outrossim, importe o encravado Do utilizador padrão de django.contrib.auth.models. Em seguida, importe as entradas de campo do Django ModelForm.

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django.forms import ModelForm, TextInput, EmailInput,ImageField, Textarea

Em seguida, crie um objeto de registro chamado RegisterUserForm. leva o UserCreationForm porquê argumento. Adicione o Do utilizador campos de objeto, porquê autenticação de e-mail, nome de usuário e duas senhas.

class RegisterUserForm(UserCreationForm):
email = forms.EmailField(max_length=254, help_text='Required. Enter a valid email address.')
class Meta:
model = User
fields = ('username', 'email', 'password1', 'password2')

Esses campos são os atributos principais de um usuário no formulário de registro. São entradas obrigatórias que os usuários devem preencher para que o sistema as autentique.

Fabricar uma Função de Visualização

Em seguida, você criará uma função de visualização para o formulário de registro. Primeiro, importe a função render, muito porquê o RegisterUserForm de forms.py. Em seguida, importe o Do utilizador padrão de django.contrib.auth.models.

A função de exibição chamada register leva o RegisterUserForm. Ele irá renderizá-lo no register.html padrão.

from django.shortcuts import render,
from django.http import HttpResponse,Http404
from .forms import RegisterUserForm
from django.contrib.auth.models import User
def register(request):
form=RegisterUserForm
context={'form':form}
return render(request,'register.html',context)

Fabricar caminho de URL

Crie um caminho de URL para o register.html padrão. Essa URL é o caminho para a função de exibição que você acabou de gerar. Dê-lhe o nome registropara que você possa usar o nome para chamá-lo em um padrão.

from django.urls import path
from . import views
urlpatterns=[
path ('register', views.register, name='register'),
]

Carregar em um padrão

Agora que você tem a visualização e o caminho da URL, pode gerar o register.html padrão na pasta do aplicativo. Você usará django-crispy-forms para renderizar o RegisterUserForm.

No register.html padrão, estenda o base.html. o base.html contém os links do Bootstrap que você usará para estilizar o formulário de registro. Em seguida, carregue o django-crispy-forms com o register.html usando tags de padrão.

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container" style="">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card" style="color:black;">
<div class="card-body">
<h5 class="card-title"><a>Register to be a member</a> <span style="float:right">Are you a member? <a href="#" class="text-primary">Login now</a></span></h5>
<div class="card-text">
<form action="" method="POST" novalidate>
{% csrf_token %}
{crispy}
<button type="submit" class="btn btn-primary btn-sm"> Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

O formulário inclui o csrf_token, que protege o processo de registro de hackers. Renderize o formulário com o mesmo nome de variável da função view. Em seguida, adicione o |crocantes filtrar para o Django {{Formato}} variável. Isso tornará o formulário porquê um formulário crocante.

Execute o servidor. Em seguida, verifique o aplicativo em um navegador em http://127.0.0.1:8000/register. Você deve ver o formulário exibido conforme ilustrado inferior:

Você rendeu um formulário de registro usando formulários crocantes! Observe que o Django adicionou validação involuntariamente ao formulário. Isso inclui requisitos porquê permissões de nome de usuário e senha.

Para ter um sistema de letreiro completo, adicione a lógica de autenticação à função de visualização. Você também pode juntar uma página de login para conectar usuários registrados. Os usuários devem atender aos requisitos de autenticação para entrar no aplicativo.

A livraria django-crispy-forms permite renderizar formulários validados de forma rápida e fácil. A validação de dados garante que você tenha dados precisos de seus usuários.

Os dados são úteis na notícia com os usuários e na estudo das métricas de desempenho.

Por que usar django-crispy-forms?

Usar a livraria crispy forms para renderizar formulários no Django é um ótimo exemplo de porquê empregar o princípio DRY. django-crispy-forms cria componentes reutilizáveis ​​que você pode renderizar em templates.

Eles vêm com código HTML encravado. O código evitará o incômodo de estruturar e validar formulários. Os formulários Crispy fornecem uma tag e um filtro que renderiza os formulários em um formato div. Eles também fornecem a capacidade de configurar e controlar o HTML renderizado.

django-crispy-forms funciona muito com o sistema de autenticação Django. Você pode gerar um sistema de autenticação para verificar seus usuários sem grafar muito código.