Django Forms 5편 : CSS를 활용한 스타일링

Django Forms fournit des fonctionnalités de saisie de données de base, mais il est important de styliser les formulaires pour améliorer l'expérience utilisateur. Dans cet article, nous examinerons comment décorer les Django Forms avec CSS et des cas pratiques.

1. Formulaire HTML de base et Django Forms

1.1 Méthode de sortie de base des Django Forms

Django Forms génère automatiquement du HTML par défaut. La méthode de sortie de base est la suivante :

as_p : enveloppe chaque champ avec la balise <p>.
as_table : rend chaque champ avec la balise <tr>.
as_ul : enveloppe chaque champ avec la balise <li>.

Exemple : Méthode de sortie de base

class ExampleForm(forms.Form):
    name = forms.CharField(label="Votre Nom")
    email = forms.EmailField(label="Votre Email")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Soumettre</button>
</form>

Le code ci-dessus sera affiché avec un style de base enveloppé par des balises <p>.

2. Stylisation des formulaires avec CSS

A visually engaging webpage mockup displaying a stylish Django form integrated with CSS and Bootstrap

2.1 Application de styles avec l'attribut `attrs` et Bootstrap

En utilisant l'attribut attrs, vous pouvez ajouter directement des classes CSS aux balises HTML. Cela permet d'appliquer facilement des frameworks CSS comme Bootstrap.

Exemple : Application des styles Bootstrap avec `attrs`

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre nom d'utilisateur'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre mot de passe'
        })
    )

Rendu du formulaire dans le modèle

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Nom d'utilisateur</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Mot de passe</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

Exemple de HTML de résultat

<input type="text" name="username" class="form-control" placeholder="Entrez votre nom d'utilisateur">
<input type="password" name="password" class="form-control" placeholder="Entrez votre mot de passe">

2.2 Stylisation des formulaires avec Bootstrap

Exemple : Application des styles Bootstrap

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre nom d'utilisateur'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre mot de passe'
        })
    )

Rendu du formulaire dans le modèle

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Nom d'utilisateur</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Mot de passe</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

Résultat

Les champs et les boutons du formulaire rendus avec le style Bootstrap.

3. Utilisation de Django FormHelper et des bibliothèques

3.1 Introduction à `django-crispy-forms`

django-crispy-forms propose une meilleure gestion de la stylisation et des mises en page pour les Django Forms.

Installation

pip install django-crispy-forms

Configuration

Ajoutez ce qui suit dans settings.py :

INSTALLED_APPS += [
    'crispy_forms',
]
CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5"]
CRISPY_TEMPLATE_PACK = 'bootstrap5'

Définition du formulaire

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Votre Email")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Soumettre'))

Points à noter

django-crispy-forms est utile pour des styles de formulaire simples, mais si la méthode d'initialisation __init__ n'est pas correctement configurée, les journaux de débogage des modèles peuvent être excessifs. Si vous souhaitez garder le fichier journal bien rangé, il faut faire attention à ce point. Je le recommande aux développeurs qui désactivent les logs de débogage ou qui ne se soucient pas du désordre dans les logs, mais personnellement, je n'aime pas beaucoup cette méthode de stylisation. Pour éviter la génération de logs de débogage, il faut configurer parfaitement la méthode d'initialisation, et cela nécessite d'analyser le code source, plutôt que de simplement utiliser une autre méthode de stylisation.

Utilisation dans le modèle

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
</form>

4. Cas pratique : Stylisation d'un formulaire d'inscription

4.1 Définition du formulaire

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre nom d'utilisateur'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre email'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Entrez votre mot de passe'
        })
    )

4.2 Rendu dans le modèle

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Nom d'utilisateur</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">Email</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Mot de passe</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">S'inscrire</button>
</form>

5. Conclusion

En utilisant Django Forms et CSS, vous pouvez grandement améliorer l'expérience utilisateur. Explorez différentes méthodes, du stylage de base avec attrs à des styles avancés avec des bibliothèques comme Bootstrap et django-crispy-forms. N'oubliez pas qu'en utilisant django-crispy-forms, il faut faire attention à la configuration de la méthode d'initialisation pour garder les fichiers journaux propres~!

Dans le prochain article, nous aborderons des utilisations avancées de Django Forms.