Gestion des formulaires Flask
Dans Flask, la gestion des formulaires est une exigence courante lors de la création d'applications web.
La gestion des données de formulaire implique de recevoir, valider et traiter les formulaires soumis par l'utilisateur. Flask fournit des capacités de base de gestion des formulaires, mais il est généralement associé à l'extension Flask-WTF pour simplifier les opérations et la validation des formulaires.
- Gestion de base des formulaires: Utiliser
request.formObtenir les données de formulaire. - Utiliser Flask-WTF: Combiner WTForms pour la gestion et la validation des formulaires afin de simplifier les opérations sur les formulaires.
- Validation de formulaire: Utiliser des validateurs pour garantir la validité des données de formulaire.
- Téléversement de fichier: Gérer les téléversements de fichiers et enregistrer les fichiers.
- Protection CSRF: Assurer que les formulaires sont protégés contre les attaques de falsification de requête intersites.
1. Gestion de formulaire de base
Flask fournit un moyen direct de gérer les données de formulaire, en utilisant l'objet request pour récupérer les données soumises.
Créer un formulaire HTML
Code du fichier templates/form.html:
Exemple
<html>
<head>
<title>Exemple de formulaire</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">Nom :</label>
<input type="text" id="name" name="name">
<br>
<label for="email">E-mail :</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</forme>
</body>
</html>
action="../submit": Les données du formulaire sont soumises au chemin /submit.
method="post": Utilisez la méthode POST pour soumettre les données.
Traitement des données du formulaire
Code du fichier app.py :
Exemple
app = Flask(__name__)
@app.route('/')
def form():
return render_template('form.html')
@app.route('/submit', methods=['POST'])
def submit():
name = request.form.get('name')
email = request.form.get('email')
return f'Name: {name}, Email: {email}'
if __name__ == '__main__':
app.run(debug=True)
request.form.get('name')etrequest.form.get('email'): Récupérez les données du formulaire soumises.
2. Utilisez l'extension Flask-WTF
Flask-WTF est une extension qui encapsule WTForms, offrant des fonctionnalités de gestion et de validation de formulaires, ce qui rend le traitement des formulaires plus concis et puissant.
Installer Flask-WTF
pip install flask-wtfConfigurer Flask-WTF
Code du fichier app.py :
Exemple
from flask_wtf import FlaskForm
from wtforms import StringField, EmailField, SubmitField
from wtforms.validators import DataRequired, Email
app = Flask(__name__)
app.secret_key = 'your_secret_key' # Requis pour la protection des formulaires
class MyForm(FlaskForm):
name = StringField('Name', validators=[DataRequired()])
email = EmailField('Email', validators=[DataRequired(), E-mail()])
submit = SubmitField('Submit')
@app.route('/', methods=['GET', 'POST'])
def form():
form = MyForm()
if form.validate_on_submit():
name = form.name.data
email = form.email.data
return f'Name: {name}, Email: {email}'
return render_template('form.html', form=form)
if __name__ == '__main__':
app.run(debug=True)
Créez des modèles pour prendre en charge les formulaires Flask-WTF.
Code du fichier templates/form.html:
Exemple
<html>
<head>
<title>Exemple de formulaire</title>
</head>
<body>
<form method="post">
{{ form.hidden_tag() }}
<div>
{{ form.name.label }}<br>
{{ form.name(size=32) }}
</div>
<div>
{{ form.email.label }}<br>
{{ form.email(size=32) }}
</div>
<div>
{{ form.submit() }}
</div>
</forme>
</body>
</html>
{{ form.hidden_tag() }}: Générer un champ caché pour protéger le formulaire contre les attaques CSRF.
{{ form.name.label }}et{{ form.name(size=32) }}: Afficher les champs du formulaire et leurs libellés.
3. Validation du formulaire
Flask-WTF et WTForms offrent de riches fonctionnalités de validation de formulaire. Vous pouvez utiliser des validateurs intégrés ou des validateurs personnalisés pour garantir la validité des données du formulaire.
Exemple
from wtforms.validators import DataRequired, Email, Longueur
class MyForm(FlaskForm):
name = StringField('Name', validators=[
DataRequired(), Length(min=1, max=50)
])
email = EmailField('Email', validators=[
DataRequired(), Email()
])
submit = SubmitField('Submit')
DataRequired(): Vérifier que le champ n'est pas vide.Length(min=1, max=50): Limiter la longueur minimale et maximale d'une chaîne.Email(): Vérifier si le champ est une adresse e-mail valide.
4. Téléversement de fichier
Flask prend également en charge la gestion du téléversement de fichiers. Les fichiers téléversés peuvent être récupérés viarequest.filesVisitez.
Créer un formulaire de téléversement de fichier
templates/upload.html code du fichier :
Exemple
<html>
<head>
<title>Téléverser un fichier</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Fichier :</label>
<input type="file" id="file" name="file">
<br>
<input type="submit" value="Téléverser">
</forme>
</body>
</html>
enctype="multipart/form-data": Spécifiez le type d'encodage des données de formulaire pour prendre en charge les téléversements de fichiers.
Gestion des téléversements de fichiers
Code du fichier app.py :
Exemple
app = Flask(__name__)
app.secret_key = 'your_secret_key'
@app.route('/upload', methods=['POST'])
def upload():
file = request.files.get('file')
if file:
filename = file.filename
file.save(f'uploads/{filename}')
return f'Fichier téléversé avec succès : {filename}'
return 'Aucun fichier téléversé'
if __name__ == '__main__':
app.run(debug=True)
request.files.get('file'): Récupère l'objet fichier téléversé.
file.save(f'uploads/{filename}')Enregistre le fichier dans le répertoire spécifié.
5. Protection CSRF
Flask-WTF fournit automatiquement une protection CSRF pour les formulaires. Vous devez configurer une clé secrète pour activer la protection CSRF, et inclure un jeton CSRF caché dans le modèle.
Configurer la protection CSRF
app.secret_key = 'your_secret_key'
Ajouter le jeton CSRF dans le modèle :
Exemple
{{ form.hidden_tag() }}
<!-- Champs de formulaire ici -->
</forme>