WTF Flask

Un aspect important d'une application web est de fournir à l'utilisateur une interface utilisateur. HTML fournit une balise <form> pour concevoir une interface. Les éléments de formulaire, tels que les entrées de texte, les boutons radio, les sélecteurs, peuvent être utilisés de manière appropriée.

Les données d'entrée de l'utilisateur sont soumises au script côté serveur sous forme de message de requête HTTP par les méthodes GET ou POST.

Le script côté serveur doit recréer les éléments de formulaire à partir des données de la requête http. Donc, en réalité, les éléments de formulaire doivent être définis deux fois - C'est l'HTML, puis le script côté serveur. Un autre inconvénient de l'utilisation de formulaires HTML est qu'il est difficile (si ce n'est impossible) de présenter dynamiquement des éléments de formulaire. HTML ne peut pas valider l'entrée de l'utilisateur.

C'est WTForms, un endroit pratique pour les formulaires flexibles, la mise en page et la validation, Flask-L'extension WTF fournit une interface simple pour cette bibliothèque WTForms.

Utilisation de Flask-WTF, on peut définir des champs de forme dans des scripts Python et les présenter avec des templates HTML. On peut également appliquer des validations aux champs WTF.

Laissons voir maintenant comment ce HTML généré dynamiquement fonctionne.

Tout d'abord, il faut installer Flask-Extension WTF.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
pip install flask-WTF

Le paquet installé contient une classe Form, qui doit être utilisée comme parent de la forme définie par l'utilisateur. Le paquet WTforms contient des définitions de divers champs de forme. Voici quelques champs de forme standard.

Par exemple, un formulaire contenant un champ de texte peut être conçu comme suit -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
from flask_wtf import Form
　from wtforms import TextField
　class ContactForm(Form):
　　　　　name = TextField("Nom de l'Étudiant")

En plus du champ name, un champ de jeton CSRF caché est automatiquement créé. Cela vise à prévenir les attaques de falsification de requêtes croisées.

Au moment du rendu, cela génère un script HTML équivalent, comme suit.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
<input id="csrf_token" name="csrf_token" type="hidden">　/>
　<label for="name">Nom de l'Étudiant</label><br>
　<input id="name" name="name" type="text" value="">　/>

Les classes de formulaires définies par l'utilisateur sont utilisées dans les applications Flask, et les formulaires sont présentés via des templates.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
from flask import Flask, render_template
　from　forms　import　ContactForm
　app　=　Flask(__name__)
　app.secret_key　=　'development　key'
　@app.route('/contact')
　def　contact():
　　　　　form　=　ContactForm()
　　　　　return　render_template('contact.html',　form　=　form)
　if　__name__　==　'__main__':
　　　　　app.run(debug　=　True)

Le paquet WTForms contient également des classes de validateurs, très utiles pour la validation des domaines de formulaires. La liste suivante montre les validateurs couramment utilisés.

Appliquer la règle de validation 'DataRequired' au champ 'name' du formulaire de contact.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
name = TextField("Nom de l'étudiant", [validators.Required("Veuillez saisir votre nom.")])

La fonction validate() de l'objet du formulaire vérifie les données du formulaire et lève une erreur de validation en cas d'échec. Le message d'erreur est envoyé au template. Dans le template HTML, le message d'erreur est affiché dynamiquement.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
{%　for　message　in　form.name.errors　%}
　　　　{{ message }}
　{%　endfor　%}

L'exemple suivant illustre les concepts mentionnés précédemment. Le code du formulaire de contact est le suivant : ( forms.py)。

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
from flask_wtf import Form
　from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField, SelectField
　from wtforms import validators, ValidationError
　class ContactForm(Form):
　　　　　name = TextField("Nom de l'étudiant", [validators.Required("Veuillez saisir votre nom.")])
　　　　　Gender = RadioField('Sexe', choices = [('M', 'Homme'), ('F', 'Femme')])
　　　　　Address = TextAreaField("Adresse")
　　　　　email = TextField("Email", [validators.Required("Veuillez saisir votre adresse e-mail.")],
　　　　　　　validators.Email("Veuillez saisir votre adresse e-mail.")])
　　　　　Age = IntegerField("Âge")
　　　　　language = SelectField('Langue', choices = [('cpp', 'C'))++'), ('py', 'Python')])
　　　　　submit = SubmitField("Soumettre")

Le validateur s'applique aux champs de nom et d'email. Ci-dessous est le script de l'application Flask : ( formexample.py)。

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
from　flask　import　Flask,　render_template,　request,　flash
　from　forms　import　ContactForm
　app　=　Flask(__name__)
　app.secret_key　=　'development　key'
　@app.route('/contact',　methods　=　['GET',　'POST'])
　def　contact():
　　　　　form　=　ContactForm()
　　　　　if　request.method　==　'POST':
　　　　　　　　if　form.validate()　==　False:
　　　　　　　　　　　flash('Tous les champs sont obligatoires.')
　　　　　　　　　　　return　render_template('contact.html',　form　=　form)
　　　　　　　　else:
　　　　　　　　　　　return　render_template('success.html')
　　　　　elif　request.method　==　'GET':
　　　　　　　　　　　return　render_template('contact.html',　form　=　form)
　if　__name__　==　'__main__':
　　　　　app.run(debug　=　True)

script de modèle( contact.html)如下所示 -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
<html>
　<head>
　<meta　http-equiv="Content-Type"　content="text/html;　charset=utf-8"　/>
　<title>Exemple Flask</title>
　</head>
　　　　<body>
　　　　　　<h2　style　=　"text-align:　center;">Formulaire de contact</h2>
　　　　　　　{%　for　message　in　form.name.errors　%}
　　　　　　　　　　<div>{{　message　}}</div>
　　　　　　　{%　endfor　%}
　　　　　　　{%　for　message　in　form.email.errors　%}
　　　　　　　　　　<div>{{　message　}}</div>
　　　　　　　{%　endfor　%}
　　　　　　　<form　action　=　"http://localhost :5000/contact"　method　=　post>
　　　　　　　　　　<fieldset>
　　　　　　　　　　　　　<legend>Remplir les éléments</legend>
　　　　　　　　　　　　　{{　form.hidden_tag()　}}
　　　　　　　　　　　　　<div style = font-size :20px; font-weight:bold; margin-left :150px;>
　　　　　　　　　　　　　　　　{{　form.name.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.name　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Gender.label　}}　{{　form.Gender　}}
　　　　　　　　　　　　　　　　{{　form.Address.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Address　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.email.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.email　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Age.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Age　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.language.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.language　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.submit　}}
　　　　　　　　　　　　　</div>
　　　　　　　　　　</fieldset>
　　　　　　　</form>
　　　　</body>
　</html>

Exécutez dans le shell Python formexample.py, et accédez à l'URL => http ://localhost :5000/contact . Le formulaire de contact s'affichera comme suit.

S'il y a des informations d'erreur, la page sera comme suit -

S'il n'y a pas d'erreurs, il sera présenté success.htmlLe contenu de la page, comme suit -