la programmation

Guide Complet WTForms Flask

Dernière mise à jour: 27/02/2024
5 minutes de lecture

Lorsque vous travaillez avec des applications Flask, la gestion des formulaires HTML est une composante essentielle pour interagir avec les utilisateurs. WTForms est une bibliothèque Python populaire qui simplifie la création et la validation des formulaires Web dans les applications Flask. Dans ce guide, nous explorerons en profondeur l’utilisation de WTForms pour manipuler les formulaires HTML dans les applications Flask.

Articles similaires

Installation de WTForms

Avant de commencer à utiliser WTForms, vous devez l’installer dans votre environnement Python. Vous pouvez le faire via pip, le gestionnaire de paquets Python, en exécutant la commande suivante dans votre terminal :

bash
pip install WTForms

Assurez-vous également d’avoir Flask installé dans votre environnement, car nous allons l’utiliser conjointement avec WTForms pour créer des applications web Flask.

Importation et Initialisation

Pour utiliser WTForms dans votre application Flask, vous devez l’importer et initialiser un objet Form. Voici un exemple de code pour importer WTForms et initialiser un formulaire de base :

python
from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'votre_clé_secrète'

class MonFormulaire(FlaskForm):
    nom = StringField('Nom')
    email = StringField('Email')
    soumettre = SubmitField('Soumettre')

@app.route('/', methods=['GET', 'POST'])
def index():
    formulaire = MonFormulaire()
    if formulaire.validate_on_submit():
        # Traitement des données du formulaire
        nom_utilisateur = formulaire.nom.data
        email_utilisateur = formulaire.email.data
        # Effectuer d'autres opérations comme l'enregistrement en base de données
    return render_template('index.html', formulaire=formulaire)

if __name__ == '__main__':
    app.run(debug=True)

Création de Formulaires

Dans l’exemple ci-dessus, nous avons créé un formulaire simple avec deux champs : nom et email. Ces champs sont des instances de différentes classes de champs fournies par WTForms (StringField dans ce cas). Vous pouvez également utiliser d’autres types de champs tels que IntegerField, BooleanField, DateField, etc., selon les besoins de votre formulaire.

Rendu du Formulaire

Une fois que vous avez créé votre formulaire, vous devez le rendre dans votre modèle HTML à l’aide de la fonction render_template de Flask. Voici à quoi cela pourrait ressembler dans votre modèle HTML (index.html) :

html
html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Formulairetitle>
head>
<body>
    <h1>Mon Formulaireh1>
    <form method="POST" action="">
        {{ formulaire.hidden_tag() }}
        {{ formulaire.nom.label }} {{ formulaire.nom(size=20) }} <br><br>
        {{ formulaire.email.label }} {{ formulaire.email(size=20) }} <br><br>
        {{ formulaire.soumettre() }}
    form>
body>
html>

Dans ce modèle, nous utilisons les balises Jinja2 pour afficher les champs du formulaire. La balise {{ formulaire.hidden_tag() }} est utilisée pour inclure un jeton CSRF caché qui protège votre application contre les attaques de falsification de requête inter-sites (CSRF). Les autres balises {{ formulaire.nom.label }}, {{ formulaire.nom }}, etc., rendent les balises de label et les champs de saisie correspondants dans le formulaire.

Validation des Données du Formulaire

WTForms facilite également la validation des données soumises par l’utilisateur. Vous pouvez ajouter des validateurs aux champs du formulaire pour vous assurer que les données saisies sont dans le bon format. Par exemple, vous pouvez définir des validateurs pour vérifier si un champ est requis, s’il s’agit d’une adresse e-mail valide, etc.

python
from wtforms.validators import DataRequired, Email

class MonFormulaire(FlaskForm):
    nom = StringField('Nom', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    soumettre = SubmitField('Soumettre')

Dans cet exemple, nous avons ajouté deux validateurs au champ « nom » : DataRequired pour s’assurer qu’il est requis et Email pour vérifier qu’il s’agit d’une adresse e-mail valide.

Traitement des Données du Formulaire

Une fois que l’utilisateur soumet le formulaire, vous pouvez accéder aux données saisies à l’aide des propriétés data des champs du formulaire. Dans la fonction de vue, vous pouvez récupérer ces données et les utiliser comme vous le souhaitez, par exemple, pour les enregistrer en base de données ou les utiliser pour effectuer d’autres opérations.

python
if formulaire.validate_on_submit():
    nom_utilisateur = formulaire.nom.data
    email_utilisateur = formulaire.email.data
    # Effectuer d'autres opérations comme l'enregistrement en base de données

Conclusion

Dans ce guide, nous avons exploré l’utilisation de la bibliothèque WTForms pour gérer les formulaires HTML dans les applications Flask. Nous avons vu comment créer des formulaires, les rendre dans des modèles HTML, valider les données soumises par l’utilisateur et traiter ces données dans nos vues. WTForms offre une solution simple et efficace pour gérer les interactions utilisateur dans vos applications web Flask, en vous permettant de créer rapidement des formulaires robustes et sécurisés. Utilisez ces connaissances pour améliorer l’expérience utilisateur de vos applications Flask en intégrant des formulaires dynamiques et conviviaux.

Plus de connaissances

Bien sûr, plongeons plus en profondeur dans l’utilisation de WTForms avec Flask !

Personnalisation des Champs de Formulaire

WTForms offre une grande flexibilité pour personnaliser l’apparence et le comportement des champs de formulaire. Vous pouvez spécifier des attributs supplémentaires tels que les classes CSS, les attributs HTML personnalisés, les messages d’erreur personnalisés, etc.

Par exemple, pour ajouter une classe CSS à un champ de formulaire, vous pouvez le faire lors de sa création dans la classe de formulaire :

python
class MonFormulaire(FlaskForm):
    nom = StringField('Nom', render_kw={"class": "form-control"})
    email = StringField('Email', render_kw={"class": "form-control"})
    soumettre = SubmitField('Soumettre', render_kw={"class": "btn btn-primary"})

De même, pour spécifier des messages d’erreur personnalisés, vous pouvez utiliser l’argument validators dans la définition du champ et spécifier les messages à l’aide de l’objet Length ou Email :

python
from wtforms.validators import Length, Email

class MonFormulaire(FlaskForm):
    nom = StringField('Nom', validators=[Length(min=2, max=20, message="Veuillez saisir un nom entre 2 et 20 caractères")])
    email = StringField('Email', validators=[Email(message="Veuillez saisir une adresse e-mail valide")])
    soumettre = SubmitField('Soumettre')

Utilisation de Champs Complexes

Outre les champs de formulaire simples comme StringField et SubmitField, WTForms propose une gamme de champs complexes pour traiter des données plus spécifiques. Par exemple, le champ TextAreaField est utilisé pour les zones de texte multilignes, le champ SelectField est utilisé pour les menus déroulants, et le champ BooleanField est utilisé pour les cases à cocher.

Voici un exemple d’utilisation de certains de ces champs complexes :

python
from wtforms import TextAreaField, SelectField, BooleanField

class MonFormulaire(FlaskForm):
    bio = TextAreaField('Biographie')
    ville = SelectField('Ville', choices=[('paris', 'Paris'), ('londres', 'Londres'), ('new_york', 'New York')])
    abonnement_newsletter = BooleanField('S\'abonner à la newsletter')
    soumettre = SubmitField('Soumettre')

Création de Formulaires Dynamiques

Parfois, vous devrez créer des formulaires dynamiques où le contenu des champs dépend des choix précédents de l’utilisateur ou des données extraites de la base de données. Vous pouvez réaliser cela en définissant les choix du champ à l’aide de fonctions dynamiques.

Voici un exemple de création dynamique de champs dans WTForms :

python
from wtforms import SelectField

class MonFormulaire(FlaskForm):
    pays = SelectField('Pays', choices=[])

# Dans la vue Flask
@app.route('/creation_dynamique', methods=['GET', 'POST'])
def creation_dynamique():
    formulaire = MonFormulaire()
    formulaire.pays.choices = [(p.id, p.nom) for p in Pays.query.all()]
    return render_template('creation_dynamique.html', formulaire=formulaire)

Dans cet exemple, les choix du champ « pays » sont dynamiquement remplis à partir d’une base de données en utilisant SQLAlchemy.

Gestion des Erreurs de Validation

Lorsque les utilisateurs saisissent des données invalides dans un formulaire, WTForms fournit des mécanismes pour afficher des messages d’erreur appropriés à côté des champs concernés dans le modèle HTML. Vous pouvez accéder à ces messages d’erreur via la propriété errors du champ.

Voici comment vous pourriez les afficher dans votre modèle HTML :

html
{% for champ, erreurs in formulaire.errors.items() %}
    {% for erreur in erreurs %}
        <div class="alert alert-danger">{{ erreur }}div>
    {% endfor %}
{% endfor %}

Cela affichera les messages d’erreur dans une boîte d’alerte rouge à côté des champs concernés dans le formulaire.

Conclusion

En utilisant WTForms avec Flask, vous pouvez facilement créer et gérer des formulaires HTML dans vos applications web Python. Que ce soit pour des formulaires simples de contact ou des formulaires complexes avec des fonctionnalités avancées, WTForms offre une solution flexible et robuste pour répondre à vos besoins. Avec les fonctionnalités de personnalisation, la validation des données, la création dynamique de formulaires et la gestion des erreurs, WTForms vous permet de développer des interfaces utilisateur interactives et conviviales pour vos applications Flask.

Dernière mise à jour: 27/02/2024
5 minutes de lecture
Bouton retour en haut de la page