WTF de Flask

Un aspecto importante de una aplicación web es proporcionar a los usuarios una interfaz de usuario. HTML proporciona una etiqueta <form> para diseñar una interfaz. Se pueden usar adecuadamente los elementos del formulario, como entrada de texto, radio, selecciones, etc.

Los datos de entrada del usuario se envían al script del lado del servidor en forma de mensaje de solicitud HTTP mediante el método GET o POST.

El script del lado del servidor debe reconstruir los elementos del formulario a partir de los datos de la solicitud HTTP. Por lo tanto, los elementos del formulario deben definirse dos veces. - Una vez es HTML, y otra vez el script del lado del servidor. Otra desventaja de usar formularios HTML es que es difícil (si no imposible) presentar elementos de formulario de manera dinámica. HTML en sí mismo no puede validar la entrada del usuario.

Este es WTForms, un lugar conveniente para obtener una biblioteca flexible de formularios, renderización y validación. Flask-La extensión de WTF proporciona una interfaz simple para esta biblioteca de WTForms.

Usando Flask-WTF, se puede definir campos de formulario en scripts de Python y presentarlos utilizando plantillas HTML. También se puede aplicar validación a los campos de WTF.

Veamos cómo funciona esta generación dinámica de HTML.

Primero, es necesario instalar Flask-Extensión de WTF.

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
pip install flask-WTF

El paquete de software instalado contiene una clase Form, que debe usarse como el padre del formulario definido por el usuario. El paquete WTforms contiene definiciones de varios campos de formulario. A continuación, se enumeran algunos campos de formulario estándar.

Por ejemplo, se puede diseñar un formulario que contiene campos de texto, como se muestra a continuación -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
from flask_wtf import Form
　from wtforms import TextField
　class ContactForm(Form):
　　　　　name = TextField("Nombre del Estudiante")

Además del campo name, se creará automáticamente un campo oculto de token CSRF. Esto es para evitar ataques de falsificación de solicitudes cross-site.

Al renderizar, esto generará un script HTML equivalente, como se muestra a continuación.

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
<input id="csrf_token" name="csrf_token" type="hidden">　/>
　<label for="name">Nombre del Estudiante</label><br>
　<input id="name" name="name" type="text" value="">　/>

Las clases de formularios definidas por el usuario se utilizan en aplicaciones Flask, y los formularios se presentan con plantillas.

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
from flask import Flask, render_template
　from forms import ContactForm
　app = Flask(__name__)
　app.secret_key = 'clave de desarrollo'
　@app.route('/contact'
　def contacto():
　　　　　form = ContactForm()
　　　　　return render_template('contact.html', form = form)
　if __name__ == '__main__':
　　　　　app.run(debug = True)

El paquete WTForms también contiene clases de validador, que son muy útiles al validar campos de formulario. A continuación se muestra una lista de validadores comunes.

Aplicar la regla de validación 'DataRequired' al campo 'name' del formulario de contacto.

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
name = TextField("Nombre del Estudiante", [validators.Required("Por favor, ingrese su nombre.")])

La función validate() del objeto del formulario verifica los datos del formulario y lanza un error de validación cuando falla. Los mensajes de error se envían al plantilla. En el plantilla HTML, los mensajes de error se presentan de manera dinámica.

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
{% for mensaje in form.name.errors %}
　　　　{{ message }}
　{% endfor %}

El siguiente ejemplo demuestra los conceptos proporcionados anteriormente. El código del formulario de contacto es el siguiente ( forms.py)。

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　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("Nombre del Estudiante", [validators.Required("Por favor, ingrese su nombre.")])
　　　　　Género = RadioField('Género', choices = [('M', 'Hombre'), ('F', 'Mujer')])
　　　　　Dirección = TextAreaField("Dirección")
　　　　　email = TextField("Correo", [validators.Required("Por favor, ingrese su dirección de correo electrónico.")])
　　　　　　　validators.Email("Por favor, ingrese su dirección de correo electrónico."))
　　　　　Edad = IntegerField("Edad")
　　　　　language = SelectField('Idioma', choices = [('cpp', 'C'))++'), ('py', 'Python')])
　　　　　submit = SubmitField("Enviar")

El validador se aplica a los campos de nombre y correo electrónico. A continuación, se muestra el script de la aplicación Flask ( formexample.py)。

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
from flask import Flask, render_template, request, flash
　from forms import ContactForm
　app = Flask(__name__)
　app.secret_key = 'clave de desarrollo'
　@app.route('/contacto', métodos = ['GET', 'POST'])
　def contacto():
　　　　　form = ContactForm()
　　　　　if request.method == 'POST':
　　　　　　　　if form.validate() == False:
　　　　　　　　　　　flash('Todos los campos son obligatorios.')
　　　　　　　　　　　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)

el script de la plantilla( contact.html) como se muestra a continuación -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
<html>
　<head>
　<meta http-equivalente="Contenido-Tipo" contenido="text/html; carácter=utf-8"　/>
　<title> Ejemplo Flask</title>
　</head>
　　　　<body>
　　　　　　<h2　estilo = "text-alineación: centro;">Formulario de contacto</h2>
　　　　　　　{% for mensaje in form.name.errors %}
　　　　　　　　　　<div>{{ mensaje }}</</div>
　　　　　　　{% endfor %}
　　　　　　　{% for mensaje in form.email.errors %}
　　　　　　　　　　<div>{{ mensaje }}</</div>
　　　　　　　{% endfor %}
　　　　　　　<form action = "http://localhost:5000/contact" método = post>
　　　　　　　　　　<fieldset>
　　　　　　　　　　　　　<legend>Entradas</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>

Ejecute en el shell de Python formexample.py, y acceda a la URL => http://localhost:5000/contacto. El formulario de contacto se mostrará como se muestra a continuación.

Si hay información de error, la página se mostrará como se muestra a continuación -

Si no hay errores, se presentará success.htmlEl contenido de la página, como se muestra a continuación -