Entendendo o Flask WTF
O Flask WTF simplifica a criação, validação e renderização de formulários, permitindo que você se concentre mais na construção da funcionalidade principal de seus aplicativos da web .
Neste artigo, exploraremos o Flask WTF em detalhes e aprenderemos como usá-lo em nossos aplicativos Flask. Um dos desafios que os desenvolvedores enfrentam ao criar aplicativos da Web é lidar com dados de formulário, como entrada do usuário. Flask WTF é uma extensão do Flask que facilita o manuseio de dados de formulário e sua validação.
O que é Flask WTF?
Flask WTF é uma extensão do Flask que adiciona suporte para manipulação de formulários ao seu aplicativo Flask. Ele é construído sobre o pacote WTForms, que é uma biblioteca flexível de validação e renderização de formulários para desenvolvimento da Web em Python.
Com o Flask WTF, você pode criar formulários HTML rapidamente , validar os dados enviados pelos usuários e renderizar mensagens de erro quando necessário. O Flask WTF também vem com proteção integrada contra ataques comuns de aplicativos da web, como Cross-Site Request Forgery (CSRF).
Ao construir um aplicativo da web, você precisa criar uma interface de usuário que permita aos usuários interagir com ele. O HTML oferece uma tag <form> , que você pode utilizar para criar essa interface. No formulário, você pode incluir vários elementos, como entrada de texto, botões de opção e menus suspensos.
Depois que o usuário insere suas informações no formulário, elas são enviadas para o script do lado do servidor como uma mensagem de solicitação HTTP usando o método GET ou POST.
Quando um usuário envia dados por meio de um formulário, eles são enviados como uma mensagem de solicitação HTTP para o script do lado do servidor. O script então precisa recriar os elementos do formulário usando esses dados. Isso significa que os elementos do formulário devem ser definidos duas vezes: uma vez no código HTML e novamente no script do lado do servidor.
Ao usar formulários HTML para seu aplicativo da Web, você pode encontrar algumas desvantagens. Uma delas é que o script do lado do servidor precisa recriar os elementos do formulário a partir dos dados da solicitação HTTP. Isso significa que você deve definir os elementos do formulário duas vezes – primeiro no HTML e depois novamente no script do lado do servidor. Além disso, pode ser desafiador ou mesmo impossível renderizar os elementos do formulário dinamicamente ao usar HTML. Outra desvantagem é que o HTML não oferece uma forma integrada de validar a entrada de um usuário.
Usando Flask WTF
Com o Flask WTF, você pode facilmente definir campos de formulário em seu código Python e renderizá-los usando um modelo HTML. Isso elimina a necessidade de definir os elementos do formulário duas vezes, conforme exigido em HTML. Além disso, o Flask WTF permite aplicar validação aos campos do formulário.
WTForms é uma biblioteca flexível que permite renderização dinâmica e validação de formulários. A extensão Flask WTF fornece uma interface conveniente para usar WTForms em seu aplicativo web Flask.
Se você estiver interessado em ver como o Flask WTF pode ajudá-lo a gerar HTML dinamicamente, continue lendo.
Para começar, você precisará instalar a extensão Flask WTF:
pip install flask-WTF
Após a instalação, você pode começar a definir seus formulários criando um formulário definido pelo usuário que herda da classe Form fornecida pelo pacote Flask WTF.
Para definir os campos do formulário, você pode usar as várias definições de campo disponíveis no pacote WTForms. Existem vários campos de formulário padrão disponíveis, como campo de texto, campo de senha, campo de caixa de seleção, entre outros.
| Campos de formulário padrão | Visão geral |
| Campo de texto | Representa <input type = 'text'> elemento de formulário HTML |
| BooleanField | Representa <input type = 'checkbox'> elemento de formulário HTML |
| DecimalField | Campo de texto para exibir o número com decimais |
| IntegerField | TextField para exibição de número inteiro |
| RadioField | Representa <input type = ' radio '> elemento de formulário HTML |
| SelectField | Representa o elemento de formulário selecionado |
| TextAreaField | Representa < testarea > elemento de formulário html |
| PasswordField | Representa <input type = ' password '> elemento de formulário HTML |
| Enviar campo | Representa <input type = ' submit '> elemento de formulário |
Uma instância de um campo de texto pode ser adicionada a um formulário conforme mostrado abaixo:
from flask_wtf import Form
from wtforms import TextField
class Registration_Form(Form):
employee_name = TextField("Employee Name")
Ao usar a biblioteca WTForms, um campo oculto é criado automaticamente para o token CSRF, além do campo 'nome'. Isso serve para proteger contra ataques de falsificação de solicitação entre sites. O script HTML resultante após a renderização conterá ambos os campos a seguir.
<input id = "csrf_token" name = "csrf_token" type = "hidden" /> <label for = "employee_name">Employee Name</label><br> <input id = "employee_name" name = "employee_name" type = "text" value = "" />
A renderização de um formulário usando uma classe de formulário definida pelo usuário pode ser obtida em um aplicativo Flask usando um modelo.
from flask import Flask, render_template
from regform import Registration_Form
app = Flask(__name__)
app.secret_key = 'development key'
@app.route('/registration')
def reg():
form = Registration_Form()
return render_template('registration.html', form = form)
if __name__ == '__main__':
app.run(debug = True)
O pacote WTForms vem equipado com uma classe validadora que pode ser utilizada para aplicar a validação aos campos do formulário. Vários validadores comumente usados estão incluídos na lista a seguir.
| Classes de validadores | Visão geral |
| Dados obrigatórios | Isso verifica se o campo de entrada não possui nenhum valor ou conteúdo. |
| Este validador verifica se o texto digitado no campo está no formato de um endereço de e-mail. | |
| Endereço de IP | Valida se o campo de entrada contém um endereço IP válido. |
| Comprimento | Este validador verifica se o comprimento do texto no campo de entrada está dentro de um intervalo especificado. |
| Number Range | Este validador verifica se o número inserido em um campo de entrada está dentro do intervalo especificado. |
| URL | Verifica se o texto no campo de entrada segue as convenções de uma URL. |
Vamos aplicar a regra de validação ' DataRequired ' ao campo nome no formulário de contato.
employee_name = TextField("Employee Name",[validators.Required("Please enter your name.")])
Quando você chama a função validar() no objeto de formulário, ela verifica os dados do formulário e exibe os erros de validação, se houver. Se a validação falhar, as mensagens de erro serão enviadas para o modelo. Você pode exibir dinamicamente essas mensagens de erro no modelo HTML.
{% for message in form.name.errors %}
{{ message }}
{% endfor %}
O exemplo dado mostra como usar os conceitos discutidos anteriormente. Abaixo está o design de um formulário de registro no arquivo regform.py .
from flask_wtf import Form
from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField,SelectField
from wtforms import validators, ValidationError
class ContactForm(Form):
employee_name = TextField("Employee Name",[validators.Required("Please enter your name.")])
Gender = RadioField('Gender', choices = [('M','Male'),('F','Female')])
Address = TextAreaField("Address")
email = TextField("Email",[validators.Required("Please enter your email address."),
validators.Email("Please enter your email address.")])
Age = IntegerField("age")
language = SelectField('Job Posts', choices = [('cpp', 'C++'),
('py', 'Python'), ('java', 'Java'), ('php', 'PHP')])
submit = SubmitField("Send")
Os campos Nome e Email têm validadores adicionados a eles. Aqui está um exemplo de um script de aplicativo Flask (main.py).
from flask import Flask, render_template, request, flash
from regform import Registration_Form
app = Flask(__name__)
app.secret_key = 'development key'
@app.route('/reg', methods = ['GET', 'POST'])
def registration():
regform = Registration_Form()
if request.method == 'POST':
if regform.validate() == False:
flash('All fields are required.')
return render_template('registration.html', form = regform)
else:
return render_template('save.html')
# elif request.method == 'GET':
# return render_template('registration.html', form = regform)
if __name__ == '__main__':
app.run(debug = True)
O conteúdo do arquivo registration.html, que contém o script para o modelo, é mostrado abaixo.
<!doctype html>
<html>
<body>
<h2 style = "text-align: center;">Registration Form</h2>
{% for message in form.employee_name.errors %}
<div>{{ message }}</div>
{% endfor %}
{% for message in form.email.errors %}
<div>{{ message }}</div>
{% endfor %}
<form action = "http://localhost:5000/reg" method = post>
<fieldset>
<legend>Registration Form</legend>
{{ form.csrf_token }}
<div style = font-size:20px; font-weight:bold; margin-left:150px;>
{{ form.employee_name.label }}<br>
{{ form.employee_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.job.label }}<br>
{{ form.job }}
<br>
{{ form.submit }}
</div>
</fieldset>
</form>
</body>
</html>
Execute main.py no shell do Python e acesse a URL http://localhost:5000/reg. Será exibido o formulário para contato, conforme abaixo.
Se houver algum erro, a página da Web aparecerá da seguinte maneira.
Quando não houver erros, a página da Web chamada ' save.html ' será exibida.
Benefícios
- O Flask-WTF permite que os desenvolvedores criem e validem facilmente formulários HTML usando classes e métodos Python, reduzindo a necessidade de codificação HTML manual.
- Ele fornece um conjunto robusto de métodos de validação para campos de entrada de formulário, como campos obrigatórios, validação de e-mail, limites de tamanho e muito mais.
- Ele inclui suporte integrado para manipulação segura de formulários, incluindo proteção CSRF ( Cross-Site Request Forgery ) e prevenção XSS (Cross-Site Scripting).
- Os formulários Flask WTF podem ser facilmente reutilizados em diferentes visualizações e modelos, facilitando a manutenção da consistência em um aplicativo.
- O Flask WTF funciona perfeitamente com outras extensões do Flask, como Flask-SQLAlchemy , Flask-Login e Flask-Bootstrap , permitindo uma funcionalidade ainda maior no desenvolvimento de aplicativos da web.
Conclusão
Você pode se beneficiar do Flask WTF ao desenvolver aplicativos Flask que envolvem manipulação de formulários. Ao usar o Flask WTF, você pode simplificar o processo de definição e validação de formulários, além de garantir maior segurança contra ataques de falsificação de solicitação entre sites. Com geração automática de formulários e menos código para escrever e manter, você pode desenvolver seu aplicativo Flask com mais rapidez e facilidade. No geral, se você precisar lidar com formulários em seu aplicativo Flask, o Flask WTF é uma ferramenta valiosa que pode ajudá-lo a atingir seus objetivos com eficiência e eficácia.
