Le cœur de Django Forms réside dans les Champs (Field) et les Widgets. Les champs jouent un rôle dans la validation et le traitement des données d'entrée, tandis que les widgets définissent les éléments HTML utilisés pour rendre ces champs. Dans cet article, nous examinerons en détail les principaux champs et widgets, ainsi que les méthodes de personnalisation.

1. Champs Django Forms

1.1 Qu'est-ce qu'un champ ?

Un champ est un élément de base qui définit et valide les données dans Django Forms.

• Il valide les données saisies par l'utilisateur avant de les stocker dans cleaned_data.
• Chaque champ est mappé à un type d'entrée HTML.

Types de champs principaux

Utilisation de base des champs

from django import forms

class ExampleForm(forms.Form):
    name = forms.CharField(max_length=50, required=True, label="Votre Nom")
    email = forms.EmailField(required=True, label="Votre Email")
    age = forms.IntegerField(required=False, min_value=1, label="Votre Âge")

2. Widgets Django Forms

2.1 Qu'est-ce qu'un widget ?

Un widget est un élément utilisé pour rendre chaque champ en HTML dans Django Forms.

• Il définit les balises et attributs HTML du champ.
• Ex : CharField utilise par défaut le widget TextInput.

Types de widgets principaux

2.2 Champs et attribut ID

Django Forms ajoute automatiquement un attribut id unique à chaque champ lorsqu'il est rendu en HTML. Cet attribut est généré au format id_<nomduchamp>.

• Ex : si le nom du champ est name, la balise <input> rendue aura id comme id_name.
• Cet attribut id est utile dans les templates dans les cas suivant :
  • JavaScript : sélection de champs spécifiques pour un traitement dynamique.
  • Balise Label : lien suivant <label for="id_name">.

Exemple : Utilisation de champs et d'attribut ID

<form method="post">
    {% csrf_token %}
    <label for="id_name">Nom:</label>
    <input type="text" id="id_name" name="name">

    <script>
        document.getElementById('id_name').addEventListener('input', function() {
            console.log(this.value);
        });
    </script>
</form>

3. Personnalisation des champs et widgets

3.1 Personnalisation des attributs de champ

Django Forms permet de modifier les attributs des éléments HTML en utilisant attrs.

Exemple : Modification des attributs du champ

class CustomForm(forms.Form):
    username = forms.CharField(
        max_length=100,
        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'
        })
    )

3.2 Création de widgets personnalisés

Vous pouvez également créer des widgets personnalisés selon vos besoins.

Exemple : Création d'un widget personnalisé

from django.forms.widgets import TextInput

class CustomTextInput(TextInput):
    template_name = 'custom_widgets/custom_text_input.html'

class CustomForm(forms.Form):
    custom_field = forms.CharField(widget=CustomTextInput())

4. Cas pratiques : Créer un formulaire stylisé

4.1 Application de Bootstrap

Lors de l'utilisation avec Bootstrap, vous pouvez ajouter class='form-control' à chaque champ pour le styliser.

Exemple : Formulaire stylisé avec Bootstrap

class BootstrapForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Entrez votre nom'})
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'Entrez votre email'})
    )

4.2 CSS personnalisé et stylisation des formulaires

Vous pouvez ajouter un fichier CSS pour affiner davantage le style du formulaire.

Exemple : Template lié au CSS

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Votre Nom</label>
        <input type="text" class="form-control" id="id_name" name="name">
    </div>
    <div class="form-group">
        <label for="id_email">Votre Email</label>
        <input type="email" class="form-control" id="id_email" name="email">
    </div>
    <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

5. Conclusion

Les champs et les widgets de Django Forms jouent un rôle clé dans le traitement et la validation des données, ainsi que dans la composition de l'interface utilisateur. En plus des champs et widgets fournis par défaut, vous pouvez personnaliser pour concevoir des formulaires adaptés à vos projets.

Dans le prochain article, nous aborderons plus en profondeur la validation et la personnalisation des formulaires.