El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Creación y Manejo de Formularios

Siguiente ►
►

En este módulo, aprenderemos cómo crear y manejar formularios en Flask. Los formularios son una parte esencial de cualquier aplicación web, ya que permiten a los usuarios interactuar con la aplicación y enviar datos. Flask facilita el manejo de formularios a través de la extensión Flask-WTF, que se basa en la biblioteca WTForms.

Contenido

  1. Instalación de Flask-WTF
  2. Creación de un Formulario
  3. Renderización de Formularios en Plantillas
  4. Manejo de Datos del Formulario
  5. Ejercicio Práctico
  6. Solución del Ejercicio
  7. Conclusión

Instalación de Flask-WTF

Para empezar a trabajar con formularios en Flask, primero necesitamos instalar la extensión Flask-WTF. Puedes hacerlo utilizando pip:

pip install Flask-WTF

Creación de un Formulario

Una vez que tenemos Flask-WTF instalado, podemos crear un formulario. Los formularios en Flask se definen como clases que heredan de FlaskForm. Aquí hay un ejemplo de un formulario simple de inicio de sesión:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')

Explicación del Código

  • FlaskForm: La clase base para todos los formularios en Flask-WTF.
  • StringField: Un campo de texto.
  • PasswordField: Un campo de texto que oculta la entrada del usuario.
  • SubmitField: Un botón de envío.
  • DataRequired: Un validador que asegura que el campo no esté vacío.

Renderización de Formularios en Plantillas

Para mostrar el formulario en una plantilla HTML, necesitamos pasar una instancia del formulario a la plantilla y luego renderizarlo. Aquí hay un ejemplo de cómo hacerlo:

Código del Servidor

from flask import Flask, render_template, redirect, url_for
from forms import LoginForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        return redirect(url_for('success'))
    return render_template('login.html', form=form)

@app.route('/success')
def success():
    return "Login Successful!"

if __name__ == '__main__':
    app.run(debug=True)

Plantilla HTML (login.html)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Explicación del Código

  • form.hidden_tag(): Genera un campo oculto para proteger contra ataques CSRF.
  • form.username.label: Muestra la etiqueta del campo de texto.
  • form.username(size=32): Renderiza el campo de texto con un tamaño específico.
  • form.username.errors: Muestra los errores de validación para el campo de texto.

Manejo de Datos del Formulario

Cuando el formulario se envía, Flask-WTF valida los datos y los pone a disposición en la instancia del formulario. En el ejemplo anterior, usamos form.validate_on_submit() para verificar si el formulario fue enviado y si los datos son válidos.

Ejemplo de Manejo de Datos

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        username = form.username.data
        password = form.password.data
        # Aquí puedes agregar la lógica para manejar los datos del formulario
        return redirect(url_for('success'))
    return render_template('login.html', form=form)

Ejercicio Práctico

Ejercicio

Crea un formulario de registro de usuario que incluya los siguientes campos:

  • Nombre de usuario
  • Correo electrónico
  • Contraseña
  • Confirmación de contraseña

Asegúrate de validar que:

  • Todos los campos son obligatorios.
  • El correo electrónico tiene un formato válido.
  • La contraseña y la confirmación de contraseña coinciden.

Solución del Ejercicio

Formulario de Registro

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, EqualTo

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Register')

Código del Servidor

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        username = form.username.data
        email = form.email.data
        password = form.password.data
        # Aquí puedes agregar la lógica para manejar los datos del formulario
        return redirect(url_for('success'))
    return render_template('register.html', form=form)

Plantilla HTML (register.html)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.confirm_password.label }}<br>
            {{ form.confirm_password(size=32) }}<br>
            {% for error in form.confirm_password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Conclusión

En esta sección, hemos aprendido cómo crear y manejar formularios en Flask utilizando Flask-WTF. Hemos cubierto la instalación de Flask-WTF, la creación de formularios, la renderización de formularios en plantillas y el manejo de datos del formulario. Además, hemos realizado un ejercicio práctico para reforzar los conceptos aprendidos.

En el próximo módulo, profundizaremos en la validación de formularios utilizando WTForms, lo que nos permitirá asegurar que los datos ingresados por los usuarios cumplan con ciertos criterios antes de ser procesados.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo Web con Flask

Módulo 1: Introducción a Flask

Módulo 2: Conceptos Básicos de Flask

Módulo 3: Formularios y Entrada de Usuario

Módulo 4: Integración de Bases de Datos

Módulo 5: Autenticación de Usuarios

Módulo 6: Conceptos Avanzados de Flask

Módulo 7: APIs RESTful con Flask

Módulo 8: Despliegue y Producción

Módulo 9: Pruebas y Mejores Prácticas

Módulo 10: Extensiones y Ecosistema de Flask

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados