WTForms es una biblioteca diseñada para facilitar la gestión del procesamiento de formularios. Maneja los datos enviados por el navegador muy fácilmente. En este artículo, discutiremos cómo crear un formulario de contacto usando WTForms.
Ventajas de WT-FORM:
- No tenemos que preocuparnos por los validadores.
- Prevención de la falsificación de requests entre sitios (CSRF) .
- WTForms vienen como clases, por lo que todo lo bueno viene de un formulario de objeto.
- No es necesario crear ningún elemento <label> o <input> manualmente usando HTML.
Instalación
Use la Terminal para instalar Flask-WTF.
pip install Flask-WTF
Implementación paso a paso
Paso 1: cree una clase que tenga todos los elementos que desee en su formulario en main.py.
Python3
from flask_wtf import FlaskForm from wtforms import StringField, validators, PasswordField, SubmitField from wtforms.validators import DataRequired, Email import email_validator class contactForm(FlaskForm): name = StringField(label='Name', validators=[DataRequired()]) email = StringField(label='Email', validators=[ DataRequired(), Email(granular_message=True)]) message= StringField(label='Message') submit = SubmitField(label="Log In")
Paso 2: crea el objeto del formulario y pasa el objeto como un parámetro en el render_template
Python3
@app.route("/", methods=["GET", "POST"])
def home():
cform = contactForm()
return render_template("contact.html", form=cform)
Paso 3: agregue la protección CSRF. Agrega una clave secreta.
app.secret_key = "any-string-you-want-just-keep-it-secret"
Paso 4: Agregue los campos en el ARCHIVO HTML contact.html.
{{ form.csrf_token }} is used to provide csrf protection.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Contact</title>
</head>
<body>
<div class="container">
<h1>Contact Us</h1>
<form method="POST" action="{{ url_for('home') }}">
{{ form.csrf_token }}
<p>
{{ form.name.label }}
<br>
{{ form.name }}
</p>
<p>
{{ form.email.label }}
<br>
{{ form.email(size=30) }}
</p>
<p>
{{ form.message.label }}
<br>
{{ form.message }}
</p>
{{ form.submit }}
</form>
</div>
</body>
</html>
Paso 5: Validación del Formulario y recepción de los datos.
Python3
@app.route("/", methods=["GET", "POST"])
def home():
cform = contactForm()
if cform.validate_on_submit():
print(f"Name:{cform.name.data},
E-mail:{cform.email.data},
message:{cform.message.data}")
else:
print("Invalid Credentials")
return render_template("contact.html", form=cform)
Código completo:
Python3
from flask import Flask, render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, validators, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email
import email_validator
app = Flask(__name__)
app.secret_key = "any-string-you-want-just-keep-it-secret"
class contactForm(FlaskForm):
name = StringField(label='Name', validators=[DataRequired()])
email = StringField(
label='Email', validators=[DataRequired(), Email(granular_message=True)])
message = StringField(label='Message')
submit = SubmitField(label="Log In")
@app.route("/", methods=["GET", "POST"])
def home():
cform=contactForm()
if cform.validate_on_submit():
print(f"Name:{cform.name.data}, E-mail:{cform.email.data},
message:{cform.message.data}")
return render_template("contact.html",form=cform)
if __name__ == '__main__':
app.run(debug=True)
Producción:
Name:Rahul Singh, E-mail:rahuls@gmail.com, message:This is Sample gfg Output!!!
Agregar Bootstrap
También podemos agregar el arranque al formulario anterior para que parezca interactivo. Para ello, utilizaremos la librería Flask-Bootstrap. Para instalar este módulo, escriba el siguiente comando en la terminal.
pip install Flask-Bootstrap
Paso 1: Crear base.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Paso 2: Modifica contact.html a
with single line {{ wtf.quick_form(form) }}
HTML
{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}
Contact Us
{% endblock %}
{% block content %}
<div class="container">
<h1>Contact Us</h1>
{{ wtf.quick_form(form) }}
</div>
{% endblock %}l>
Paso 3: MODIFICAR main.py
Es muy sencillo modificar el archivo .py. Solo tenemos que importar el módulo y agregar la siguiente línea en el código
Bootstrap(app)
Python3
from flask import Flask, render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, validators, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email
from flask_bootstrap import Bootstrap
import email_validator
app = Flask(__name__)
Bootstrap(app)
app.secret_key = "any-string-you-want-just-keep-it-secret"
class contactForm(FlaskForm):
name = StringField(label='Name', validators=[DataRequired()])
email = StringField(label='Email', validators=[DataRequired(), Email(granular_message=True)])
message = StringField(label='Message')
submit = SubmitField(label="Log In")
@app.route("/", methods=["GET", "POST"])
def home():
cform=contactForm()
if cform.validate_on_submit():
print(f"Name:{cform.name.data}, E-mail:{cform.email.data}, message:{cform.message.data}")
return render_template("contact.html",form=cform)
if __name__ == '__main__':
app.run(debug=True)
Producción:
Publicación traducida automáticamente
Artículo escrito por rajasethi056 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA