Comment personnaliser le rendu de ses formulaires Django avec django-crispy-form ?
WePynaire
Discussion et questions
Objectifs
- Découvrir django-crispy-forms
- Approfondir la mise en forme des formulaires
- Séparer le form et la forme
Liens utiles
Le dépôt du WePynaire
Diapositives du WePynaire
$ mkdir .venv
$ pipenv install django
$ pipenv run django-admin startproject config .
$ pipenv run python manage.py startapp wepynaireCréation du projet
Configuration de Bootstrap 5 à l'aide de python-webpack-boilerplate
$ pipenv install python-webpack-boilerplate
$ pipenv shell # active l'environnement virtuel
$ python manage.py webpack_init
$ cd frontend
$ npm install # installer node.js au préalable depuis le site officiel
$ npm run build
Installation et config de python-webpack-boilerplate
nouveau
Configuration du répertoire des templates
Création d'un base.html
1. feuilles de style
2. scripts javascript
3. blocs standards
Créaction des modèles
from django.db import models
from django.conf import settings
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
"""Exemple d'utilisateur."""
class UserAddress(models.Model):
"""Modèle de liaison entre utilisateur et adresse."""
class Address(models.Model):
"""Représente une adresse postale."""
from django.db import models
from django.conf import settings
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
"""Exemple d'utilisateur."""
first_name = None
last_name = None
name = models.CharField(max_length=255, blank=True)
addresses = models.ManyToManyField(
"Address",
related_name="users",
through="UserAddress",
)
class UserAddress(models.Model):
"""Modèle de liaison entre utilisateur et adresse."""
class AdresseRoles(models.TextChoices):
HOME = "home", "Adresse de domicile"
INVOICE = "invoice", "Adresse de facturation"
DELIVERY = "delivery", "Adresse de livraison principale"
user = models.ForeignKey(
settings.AUTH_USER_MODEL, on_delete=models.CASCADE
)
address = models.ForeignKey("Address", on_delete=models.CASCADE)
address_role = models.CharField(
"role de l'adresse",
max_length=255,
choices=AdresseRoles.choices,
default=AdresseRoles.HOME,
)
created = models.DateTimeField(
"date de création", auto_now_add=True
)
updated = models.DateTimeField(
"date de mise à jour", auto_now=True
)
class Address(models.Models):
"""Représente une adresse postale."""
class Countries(models.TextChoices):
SWITZERLAND = "CH", "Suisse"
FRANCE = "F", "France"
BELGIUM = "B", "Belgique"
CANADA = "CAN", "Canada"
street = models.CharField("rue", max_length=255, blank=True)
street_number = models.CharField(
"numéro de la rue", max_length=6, blank=True
)
address_complement = models.CharField(
"complément d'adresse", max_length=255, blank=True
)
city = models.CharField("ville", max_length=100)
zip_code = models.CharField("numéro postal", max_length=6)
country = models.CharField(
"pays",
max_length=4,
choices=Countries.choices,
default=Countries.SWITZERLAND,
)
$ python manage.py makemigrations
$ python manage.py migrate$ python manage.py makemigrations
$ python manage.py migrateCréaction des formulaires
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
address_type = forms.ChoiceField(label="type de l'adresse")
class Meta:
model = Address
fields = (
"street",
"street_number",
"address_complement",
"city",
"zip_code",
"country",
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
Pour UserAddress
Les vues
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
...
def get(self, request, *args, **kwargs):
"""Réponds à l'affichage du formulaire."""
self.forms = self.get_forms()
return self.render_to_response(forms=self.forms)
def post(self, request, *args, **kwargs):
"""Réponds à la soumission du formulaire."""
self.forms = self.get_forms()
if self.all_valid():
return self.form_valid()
else:
return self.form_invalid()
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
...
form_classes = None
def get_forms(self):
return [
form(self.request.POST or None)
for form in self.form_classes
]
...
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
...
def all_valid(self):
"""Retourne True si tous les formulaires sont valides."""
if all(form.is_valid() for form in self.forms):
return True
return False
...
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
...
def form_valid(self):
"""Actions à entreprendre si tous les formulaires sont valides."""
return redirect(str(self.success_url))
def form_invalid(self):
"""Actions à entreprendre si un formulaire est invalide."""
return self.render_to_response(forms=self.forms)
...
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
template_name = "wepynaire/home.html"
form_classes = [UserCreationForm, AddressCreationForm]
success_url = "wepynaire:home"
def form_valid(self):
user_form, address_form = self.forms
user = user_form.save()
address = address_form.save()
address_type = address_form.cleaned_data.get("address_type")
UserAddress.objects.create(
user=user,
address=address,
address_role=address_type,
)
return super().form_valid()
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
template_name = "wepynaire/home.html"
form_classes = [UserCreationForm, AddressCreationForm]
success_url = "wepynaire:home"
def form_valid(self):
user_form, address_form = self.forms
user = user_form.save()
address = address_form.save()
address_type = address_form.cleaned_data.get("address_type")
UserAddress.objects.create(
user=user,
address=address,
address_role=address_type,
)
return super().form_valid()
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
template_name = "wepynaire/home.html"
form_classes = [UserCreationForm, AddressCreationForm]
success_url = "wepynaire:home"
def form_valid(self):
user_form, address_form = self.forms
user = user_form.save()
address = address_form.save()
address_type = address_form.cleaned_data.get("address_type")
UserAddress.objects.create(
user=user,
address=address,
address_role=address_type,
)
return super().form_valid()
home_view = HomeView.as_view()
from django.shortcuts import render, redirect
from django.views.generic import View
from .forms import UserCreationForm, AddressCreationForm
from .models import UserAddress
# Création d'une CBV simpliste pour gérer plusieurs formulaires
class MultiFormsView(View):
"""Vue générique simple gérant plusieurs formulaires."""
# Création de notre HomeView à l'aide de la CBV réutilisable
class HomeView(MultiFormsView):
"""Vue gérant la page d'accueil du site."""
template_name = "wepynaire/home.html"
form_classes = [UserCreationForm, AddressCreationForm]
success_url = "wepynaire:home"
def form_valid(self):
user_form, address_form = self.forms
user = user_form.save()
address = address_form.save()
address_type = address_form.cleaned_data.get("address_type")
UserAddress.objects.create(
user=user,
address=address,
address_role=address_type,
)
return super().form_valid()
home_view = HomeView.as_view()
le template home.html
$ python manage.py runserver
Installation de django-crispy-forms pour Bootstrap 5
1. Visiter la documentation de crispy-bootstrap5
2. Installer crispy-bootstrap5
$ pipenv install crispy-bootstrap53. Enregistrer les crispy-forms et crispy-bootstrap5 dans INSTALLED_APPS
4. Définir les constantes de config de crispy-forms
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<h1 class="row">Nouvelle inscription</h1>
<form method="post" class="row">
{% csrf_token %}
{% for form in forms %}
{{ form|crispy }}
{% endfor %}
<button type="submit" class="btn btn-primary">Soumettre</button>
</form>
</div>
{% endblock content %}home.html
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<h1 class="row">Nouvelle inscription</h1>
<form method="post" class="row">
{% csrf_token %}
{% for form in forms %}
{{ form|crispy }}
{% endfor %}
<button type="submit" class="btn btn-primary">Soumettre</button>
</form>
</div>
{% endblock content %}home.html
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<h1 class="row">Nouvelle inscription</h1>
<form method="post" class="row">
{% csrf_token %}
{% for form in forms %}
{{ form|crispy }}
{% endfor %}
<button type="submit" class="btn btn-primary">Soumettre</button>
</form>
</div>
{% endblock content %}home.html
- L'ordre des champs est imposé
- La mise en page est automatique mais rigide
Simple mais pas très flexible
Regardons plus loin !
Crispy FormHelper & Layouts
Lisons un peu de documentation
1. Instancier un FormHelper
2. Créer une mise en page (layout)
Instancions les FormHelper
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
address_type = forms.ChoiceField(label="Type de l'adresse")
class Meta:
model = Address
fields = (
...
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"street",
"street_number",
"address_complement",
"city",
"zip_code",
"country",
)
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
address_type = forms.ChoiceField(label="Type de l'adresse")
class Meta:
model = Address
fields = (
...
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"street",
"street_number",
"address_complement",
"city",
"zip_code",
"country",
)
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
address_type = forms.ChoiceField(label="Type de l'adresse")
class Meta:
model = Address
fields = (
...
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"street",
"street_number",
"address_complement",
"city",
"zip_code",
"country",
)
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
address_type = forms.ChoiceField(label="Type de l'adresse")
class Meta:
model = Address
fields = (
...
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"street",
"street_number",
"address_complement",
"city",
"zip_code",
"country",
)
from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth import forms as auth_forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Row, Column
from .models import UserAddress, Address
User = get_user_model()
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"name",
"username",
"password1",
"password2",
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
address_type = forms.ChoiceField(label="Type de l'adresse")
class Meta:
model = Address
fields = (
...
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
"street",
"street_number",
"address_complement",
"city",
"zip_code",
"country",
)
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<h1 class="row">Nouvelle inscription</h1>
<form method="post" class="row">
{% csrf_token %}
{% for form in forms %}
{% crispy form %}
{% endfor %}
<button
type="submit"
class="btn btn-primary"
>Soumettre</button>
</form>
</div>
{% endblock content %}
Personnalisons un peu ce formulaire
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
from crispy_forms.layout import Field
-
css_id
-
css_class
-
placeholder
-
hx_get
-
hx_target
-
...
Séparer la structure du formulaire et sa mise en page
- form_layouts.py: mise en forme des formulaires
- forms.py: définition des formulaires
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = UserCreationLayout()
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = AddressCreationLayout()class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = UserCreationLayout()
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = AddressCreationLayout()Des éléments de mise en page avancés
Différents frameworks CSS
La documentation de crispy-forms
https://django-crispy-forms.readthedocs.io/
WePynaire "Comment personnaliser le rendu de ses formulaires Django de manière poussée avec django-crispy-form ?"
By Thierry Chappuis
