python

Procesar formulario con Flask

Hoy vamos a ver cómo trabajar con los formularios web en Flask para introducir datos y enviarlos de tal manera que Flask pueda procesarlos.

Procesar formulario usando Python y Flask

Para ello vamos a usar el módulo request y acceder a request.form.get, usando también render_template para renderizar las vistas.

Recomendados

Si no sabes Flask, mira una pequeña introducción.

En caso de que quieras ver cómo funcionan las plantillas y en dónde van ubicadas, mira este post.

Nota: recuerda que las vistas van dentro de la carpeta templates.

La vista del formulario

El formulario es muy simple, solo necesitamos la edad y el nombre del usuario. A cada input debemos ponerle el atributo name, pues a través del mismo vamos a acceder desde Flask.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Formulario con Flask</title>
    </head>
    <body>
        <form method="POST" action="{{url_for('procesar')}}">
            <input name="nombre" required type="text" placeholder="Nombre">
            <br><br>
            <input name="edad" required type="number" placeholder="Edad">
            <br><br>
            <input type="submit" value="Enviar">
        </form>
    </body>
</html>

El método será POST y el action la ruta que devuelva url_for, que no hace otra cosa más que indicar la URL que seguir para una función definida en las rutas, ya veremos en el ejemplo cómo es, por ahora recuerda que la ruta se llama procesar.

Tenemos dos campos, uno con el nombre edad y otro con el nombre nombre.

La app de flask

Para acceder a este formulario en Flask hay que definir algunas rutas. El código de la app queda como se ve a continuación:

"""
Formularios con Flask

https://parzibyte.me/blog
"""
from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/')
def inicio():
    return render_template("formulario.html")


@app.route('/procesar', methods=['POST'])
def procesar():
    nombre = request.form.get("nombre")
    edad = request.form.get("edad")
    return render_template("mostrar.html", nombre=nombre, edad=edad)


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8000, debug=True)

En la ruta inicio simplemente mostramos el formulario; la magia y el procesamiento del formulario están aquí:

@app.route('/procesar', methods=['POST'])
def procesar():
    nombre = request.form.get("nombre")
    edad = request.form.get("edad")
    return render_template("mostrar.html", nombre=nombre, edad=edad)

La función de la ruta es procesar, justo como lo definimos en el formulario. El único método que acepta es POST, pues ese método se usará en en el formulario.

Para acceder a los datos del formulario invocamos a request.form.get("nombre")

Finalmente renderizamos otra vista pasándole los datos que acabamos de obtener. La vista en cuestión es:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Mostrar resultados</title>
    </head>
    <body>
        <strong>Nombre: </strong>{{nombre}}
        <br>
        <strong>Edad: </strong>{{edad}}
    </body>
</html>

Accedemos a los valores que pasamos desde la ruta y los mostramos.

Demostración de procesamiento de formulario con Flask

Al ejecutar la app y visitar el resultado en el navegador, se ve lo de la imagen que está al inicio del post:

Lo sé, algo simple, pero es para ejemplificar. Con esto ya podemos crear formularios más robustos, tal vez con un diseño más bonito.

Después, podemos usar Flask para conectarnos a una base de datos y guardar datos de los usuarios.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.