Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
dev:python:flask:flask_formulaires_wtforms [2025/02/27 20:33] – yoann | dev:python:flask:flask_formulaires_wtforms [2025/03/09 13:57] (Version actuelle) – yoann | ||
---|---|---|---|
Ligne 9: | Ligne 9: | ||
Ici on utilise le paquet Flask-WTF qui intègre la bibliothèque WTForms au micro framework Flask. | Ici on utilise le paquet Flask-WTF qui intègre la bibliothèque WTForms au micro framework Flask. | ||
+ | ===== Initialiser l' | ||
- | Initialisation du projet : | + | Création d'un dépôt git pour le projet |
<code bash> | <code bash> | ||
Ligne 17: | Ligne 18: | ||
git branch -m main | git branch -m main | ||
- | # Création de l' | + | # Création de l' |
python3 -m venv venv | python3 -m venv venv | ||
source venv/ | source venv/ | ||
Ligne 64: | Ligne 65: | ||
A ce stade la commande doit lancer le serveur web et afficher un message du type : | A ce stade la commande doit lancer le serveur web et afficher un message du type : | ||
+ | |||
< | < | ||
* Serving Flask app ' | * Serving Flask app ' | ||
Ligne 80: | Ligne 82: | ||
- | Pour la mise en forme, on utilise le template CSS Spectre | + | Pour la mise en forme, on utilise le framework |
+ | |||
+ | |||
+ | ===== Création du formulaire ===== | ||
+ | |||
+ | * Pour créer un formulaire, on définit une classe héritant de **FlaskForm**. | ||
+ | * Chaque attribut de la notre classe représentant un champ de formulaire sera un objet héritant de la classe de base '' | ||
+ | * L' | ||
+ | |||
+ | |||
+ | <code python> | ||
+ | from flask_wtf import FlaskForm | ||
+ | from wtforms import EmailField, SubmitField | ||
+ | from wtforms.fields.simple import BooleanField | ||
+ | |||
+ | class NewsLetterForm(FlaskForm): | ||
+ | |||
+ | email = EmailField(label=' | ||
+ | news_letter = BooleanField(label=" | ||
+ | submit_button = SubmitField(label=' | ||
+ | </ | ||
+ | |||
+ | Comme illustré ci-dessus, le constructeur des objets héritant de la classe de base '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | La liste exhaustive des paramètres est disponible dans la documentation [[https:// | ||
+ | |||
+ | |||
+ | Quelques objets représentant les champs de base des formulaires : | ||
+ | |||
+ | * **StringField** : Champ type texte ; | ||
+ | * **TextAreaField** : | ||
+ | * **SelectField** : | ||
+ | * **BooleanField** : Champ de type checkbox ; | ||
+ | * **PasswordField** | ||
+ | * **HiddenField** : Champ masqué ; | ||
+ | * **SubmitField** : Bouton soumission du formulaire ; | ||
+ | |||
+ | |||
+ | Champs plus spécifiques : | ||
+ | * **EmailField** ; | ||
+ | * **TelField** ; | ||
+ | * **URLField** ; | ||
+ | * **TimeField** ; | ||
+ | * **ColorField** ; | ||
+ | * **IntegerField** : Saisie d'un nombre entier; | ||
+ | * **IntegerRangeField** | ||
+ | * **FloatField** | ||
+ | * **DecimalRangeField** ; | ||
+ | * **FileField** | ||
+ | |||
+ | |||
+ | |||
+ | ===== filters ===== | ||
+ | |||
+ | Les filtres permettent de traiter (en amont de la validation), | ||
+ | |||
+ | * Retirer les espaces en début et fin de saisie ; | ||
+ | * Passer la saisie en majuscule, en minuscule ; | ||
+ | * Arrondir etc. | ||
+ | |||
+ | |||
+ | <code python> | ||
+ | from flask_wtf import FlaskForm | ||
+ | from wtforms import StringField | ||
+ | |||
+ | class RegisterForm(FlaskForm): | ||
+ | |||
+ | lastname = StringField(label=' | ||
+ | | ||
+ | | ||
+ | |||
+ | </ | ||
+ | |||
+ | Ci-dessus, on utilise les filtres pour retirer les espaces autour de la saisie et la passer en majuscules. | ||
+ | |||
+ | ===== validators ===== | ||
+ | |||
+ | Les **validators** permettent de contrôler la saisie de l' | ||
+ | |||
+ | |||
+ | <code python> | ||
+ | from flask_wtf import FlaskForm | ||
+ | from wtforms import StringField | ||
+ | from wtforms.validators import DataRequired, | ||
+ | |||
+ | class RegisterForm(FlaskForm): | ||
+ | |||
+ | email = StringField(label=' | ||
+ | </ | ||
+ | |||
+ | Ici on instancie deux validators pour contraindre la saisie de l' | ||
+ | * Le champs ne doit pas être vide, | ||
+ | * La saisie doit respecter le formalisme d'un email. | ||
+ | |||
+ | Dans ce cas, peut également utiliser l' | ||
+ | |||
+ | <code python> | ||
+ | from flask_wtf import FlaskForm | ||
+ | from wtforms import EmailField | ||
+ | |||
+ | |||
+ | class RegisterForm(FlaskForm): | ||
+ | |||
+ | email = EmailField(label=' | ||
+ | </ | ||
+ | |||
+ | Il existe de nombreux validators citons par exemple **DataRequired**, | ||
+ | |||
+ | * Ici la [[https:// | ||
+ | |||
+ | ===== Validation ===== | ||
+ | |||
+ | C'est la fonction contrôleur qui se charge de valider le formulaire retourné en méthode POST | ||
===== Références ===== | ===== Références ===== | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | + | * [[https:// |
+ | * [[https:// | ||
* https:// | * https:// | ||
* https:// | * https:// | ||
* Vidéo [[https:// | * Vidéo [[https:// | ||
* https:// | * https:// | ||
+ | * https:// | ||
+ | |||