Flask WTF

Одной из важнейших сторон веб-приложения является предоставление пользователям интерфейса. HTML предоставляет тег<form>, который используется для создания интерфейса. Можно использовать элементы формы, такие как ввод текста, радио, выбор и т.д.

Данные ввода пользователя передаются серверному скрипту в виде сообщения HTTP запроса через методы GET или POST.

Серверный скрипт должен заново создать элементы формы из данных HTTP запроса. Поэтому фактически элементы формы должны быть определены дважды - один раз в HTML, и один раз в серверном скрипте. Другим недостатком HTML формы является то, что трудно (если не невозможно) динамически представить элементы формы. Сам HTML не может валидировать ввод пользователя.

Вот иWTForms, удобная библиотека для рендеринга, validations и гибких форм. Расширение Flask-WTF предоставляет простой интерфейс для этой библиотеки WTForms.

С помощью Flask-WTF можно определить поля форм в скрипте на Python и представить их с помощью шаблонов HTML. Также можно применить валидацию к полям WTF.

Давайте посмотрим, как работает динамическое создание HTML.

Сначала необходимо установить расширение Flask-WTF.

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

Установленный пакет программного обеспечения содержит класс Form, который должен использоваться в качестве родительского класса для пользовательских форм. Пакет WTforms содержит определения различных полей форм. Ниже перечислены некоторые стандартные поля форм.

Например, можно создать форму, содержащую текстовое поле, например -

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.oldtoolbag.com
# Date : 2020-08-08
from flask_wtf import Form
　from wtforms import TextField
　class ContactForm(Form):
　　　　　name = TextField("Имя Студента")

Кроме поля name, автоматически создается скрытое поле CSRF-токена. Это делается для предотвращения атак подмены запросов между сайтами.

При рендеринге это produces эквивалентный HTML-скрипт, например.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.oldtoolbag.com
# Date : 2020-08-08
<input id="csrf_token" name="csrf_token" type="hidden" />
　<label for="name">Имя Студента</label><br>
　<input id="name" name="name" type="text" value="" />

Классы форм, определяемые пользователем, используются в приложениях Flask, и формы представлены шаблонами.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.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)

Пакет WTForms также содержит классы валидаторов, которые очень полезны при проверке полей форм. Вот список常用的 валидаторов.

Приложение валидационного правила 'DataRequired' к полю name контактной формы.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.oldtoolbag.com
# Date : 2020-08-08
name = TextField("Name Of Student",[validators.Required("Please enter your name.")])

Функция validate() объекта формы проверяет данные формы и выбрасывает ошибку проверки, если она не успешна. Сообщение об ошибке отправляется в шаблон. В HTML-шаблоне сообщения об ошибках динамически отображаются.

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

Данный пример демонстрирует приведенные выше концепции. Код формы контактов представлен следующим образом: forms.py)。

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.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("Имя студента",[validators.Required("Пожалуйста, введите ваше имя.")])
　　　　　Gender = RadioField('Пол', choices = [('M','Мужской'),('F','Женский')])
　　　　　Address = TextAreaField("Адрес")
　　　　　email = TextField("Email",[validators.Required("Пожалуйста, введите ваш адрес электронной почты.")])
　　　　　　　validators.Email("Пожалуйста, введите ваш адрес электронной почты.")])
　　　　　Age = IntegerField("Возраст")
　　　　　language = SelectField('Язык', choices = [('cpp', 'C++'), ('py', 'Python')])
　　　　　submit = SubmitField("Подтвердить")

Валидатор применяется к полям имени и электронной почты. Ниже приведен скрипт приложения Flask: formexample.py)。

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.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('All fields are required.')
　　　　　　　　　　　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)

скрипт шаблона ( contact.html) как показано ниже -

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ru.oldtoolbag.com
# Date : 2020-08-08
<html>
　<head>
　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　<title>Пример Flask</title>
　</head>
　　　　<body>
　　　　　　<h2 style = "text-align: center;">Контактная форма</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>Заполните поля</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>

Запустите в Python shell formexample.pyи перейти по URL => http://localhost:5000/contact . Форма контакта будет выглядеть так.

Если есть сообщения об ошибках, страница будет выглядеть так -

Если нет ошибок, будет отображено success.htmlСодержание страницы, например -