English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Um aspecto importante de uma aplicação web é fornecer uma interface para o usuário. O HTML fornece a etiqueta <form> para projetar uma interface. Pode usar os elementos do formulário apropriados, como entrada de texto, rádio, seleção, etc.
Os dados de entrada do usuário são enviados ao script do lado do servidor na forma de uma mensagem de solicitação HTTP por meio dos métodos GET ou POST.
O script do lado do servidor deve recriar os elementos do formulário a partir dos dados da solicitação HTTP. Portanto, os elementos do formulário devem ser definidos duas vezes. - Uma vez é HTML, outra é script do lado do servidor. Outra desvantagem de usar formulários HTML é que é difícil (se não impossível) apresentar elementos de formulário dinamicamente. O HTML em si não pode validar a entrada do usuário.
Este é o WTForms, um pacote conveniente para renderização e validação de formulários flexíveis. Flask-A extensão do WTF fornece uma interface simples para a biblioteca WTForms.
Usando Flask-WTF, pode definir campos de formulário em scripts Python e apresentá-los usando modelos HTML. Também pode aplicar validação aos campos do WTF.
Vamos ver como este HTML gerado dinamicamente funciona.
Primeiro, é necessário instalar o Flask-Extensão do WTF.
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.oldtoolbag.com # Date : 2020-08-08 pip install flask-WTF
O pacote instalado contém uma classe Form, que deve ser usada como pai do formulário definido pelo usuário. O pacote WTforms contém definições de vários campos de formulário. A seguir, estão listados alguns campos de formulário padrão.
Número | Campo de formulário padrão | Descrição |
1 | TextField | Representa o elemento de formulário HTML <input type='text'> |
2 | BooleanField | Representa o elemento de formulário HTML <input type='checkbox'> |
3 | DecimalField | Campo de texto para exibir números decimais |
4 | IntegerField | Campo de texto para exibir números inteiros |
5 | RadioField | Representa o elemento de formulário HTML <input type='radio'> |
6 | SelectField | Representa o elemento de formulário de seleção |
7 | TextAreaField | Representa o elemento de formulário HTML <textarea> |
8 | PasswordField | Representa o elemento de formulário HTML <input type='password'> |
9 | SubmitField | Representa o elemento de formulário <input type='submit'> |
Por exemplo, pode-se projetar um formulário contendo campos de texto, conforme mostrado a seguir -
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.oldtoolbag.com # Date : 2020-08-08 from flask_wtf import Form from wtforms import TextField class ContactForm(Form): name = TextField("Nome do Aluno")
Além do campo name, um campo oculto de token CSRF também será criado automaticamente. Isso é para evitar ataques de falsificação de solicitações de site.
Ao renderizar, isso produzirá um script HTML equivalente, conforme mostrado a seguir.
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.oldtoolbag.com # Date : 2020-08-08 <input id="csrf_token" name="csrf_token" type="hidden"> /> <label for="name">Nome do Aluno</label><br> <input id="name" name="name" type="text" value=""> />
Classes de formulários definidas pelo usuário são usadas em aplicações Flask, e os formulários são apresentados em modelos.
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.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)
O pacote WTForms também contém classes de validador, que são muito úteis ao validar campos de formulários. A seguir está uma lista de validadores comuns.
Número | Classe de validador | Descrição |
1 | DataRequired | Verificação se a barra de entrada está vazia |
2 | Verificação se o texto no campo de entrada segue o convênio de ID de e-mail | |
3 | EndereçoIP | Verificação do endereço IP no campo de entrada |
4 | Tamanho | Verificação da comprimento da string no campo de entrada dentro do intervalo especificado |
5 | NumberRange | Validar um número no campo de entrada dentro de um intervalo específico |
6 | URL | Validar a URL inserida no campo de entrada |
Aplicar a regra de validação 'DataRequired' ao campo name do formulário de contato.
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.oldtoolbag.com # Date : 2020-08-08 nome = TextField("Nome do Estudante", [validators.Required("Por favor, insira seu nome.")])
A função validate() do objeto do formulário verifica os dados do formulário e lança um erro de validação quando falhar. As mensagens de erro são enviadas para o template. As mensagens de erro são apresentadas dinamicamente no template HTML.
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.oldtoolbag.com # Date : 2020-08-08 {% for message in form.name.errors %} {{ message }} {% endfor %}
O seguinte exemplo demonstra o conceito apresentado acima. O código do formulário de contato é o seguinte ( forms.py)。
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.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): nome = TextField("Nome do Estudante", [validators.Required("Por favor, insira seu nome.")]) Gênero = RadioField('Gênero', choices = [('M', 'Masculino'), ('F', 'Feminino')]) Endereço = TextAreaField("Endereço") email = TextField("E-mail", [validators.Required("Por favor, insira seu endereço de e-mail.")], validators.Email("Por favor, insira seu endereço de e-mail.")]) Idade = IntegerField("Idade") language = SelectField('Linguagem', choices = [('cpp', 'C',)++'), ('py', 'Python')]) submit = SubmitField("Enviar")
O validador é aplicado aos campos de nome e e-mail. A seguir está apresentado o script do aplicativo Flask ( formexample.py)。
# Filename : example.py # Copyright : 2020 By w3codebox # Author by : pt.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 : pt.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>Itens de Preenchimento</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>
Execute no shell Python formexample.py,e acesse o URL => http://localhost:5000/contact 。 O formulário de contato será exibido conforme mostrado a seguir.
Se houver informações de erro, a página será conforme mostrado a seguir -
Se não houver erros, será apresentado success.htmlO conteúdo da página, conforme mostrado a seguir -