100 Días de Código en Python — Día 60: Formularios HTML y solicitudes POST en Flask

📝 Contenido original del curso#

El blog del Día 59 funciona completo… salvo el formulario de contacto. Para arreglarlo hay que aprender cómo se envía un formulario HTML y cómo recibir sus datos en Flask. El objetivo del día: que, al llenar el formulario, el dueño del sitio reciba un correo con el nombre, el correo, el teléfono y el mensaje del visitante.

Prerequisitos: formularios HTML (Días 41 y 42), el blog del Día 59, envío de correo con smtplib (Día 32), condicionales en Jinja (Día 57).

📖 Hasta ahora, solo "leías" (adaptación)#

Todas tus rutas respondían a solicitudes para ver algo. Hoy, por primera vez, el navegador envía datos a tu servidor. Es el paso de un sitio "de solo lectura" a una aplicación que recibe información de las personas, con la responsabilidad que eso implica: validar lo que llega y cuidar esos datos.

📝 Ejercicio original del curso#

1. Crea un proyecto html-forms con main.py y templates/index.html.
2. Crea una aplicación Flask que sirva index.html, con un <h1> para comprobar que funciona.
3. Reto: crea en index.html un formulario como el de la imagen del curso: un campo para el nombre, uno para la contraseña y un botón "Ok".

📖 Explicación conceptual#

<form>
    <label for="username">Name</label>
    <input type="text" id="username">
    <label for="password">Password</label>
    <input type="password" id="password">
    <button type="submit">Ok</button>
</form>

• type="password" oculta lo que se escribe (¡pero no lo cifra!).
• <label for="..."> enlazado con el id del campo: al hacer clic en la etiqueta, el cursor va al campo, y los lectores de pantalla saben qué campo es. Es accesibilidad básica.

🎯 Objetivo de aprendizaje#

Hacer que un formulario envíe sus datos con POST a una ruta de Flask y leerlos con request.form.

📝 Ejercicio original del curso#

Al pulsar "Ok", no pasa nada. Para que el formulario envíe datos necesita dos atributos:

1. Reto: con la documentación de W3Schools sobre method y action, haz que el formulario envíe una solicitud POST a la ruta /login.
2. Cada campo necesita un atributo name: es la "etiqueta" con la que el servidor reconoce cada dato.
3. En main.py, una ruta que reciba el POST:

   @app.route("/login", methods=["POST"])
   def receive_data():
       return "Success"

methods recibe una lista, así que una ruta puede atender varios métodos: @app.route("/contact", methods=["GET", "POST"]).

4. Flask tiene un objeto request (¡no confundir con el módulo requests!) que da acceso a lo que llegó en la solicitud. 💪 Reto difícil: con la documentación de Flask (The Request Object), obtén el nombre y la contraseña y devuélvelos en un <h1>.

La solución (lección 428):

<form action="{{ url_for('receive_data') }}" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">Ok</button>
</form>

from flask import Flask, render_template, request

@app.route("/login", methods=["POST"])
def receive_data():
    name = request.form["username"]
    password = request.form["password"]
    return f"<h1>Name: {name}, Password: {password}</h1>"

El action puede ser "/login", pero "según dónde esté alojado tu servidor, esa ruta puede cambiar", así que es mejor generarla con url_for.

📖 Explicación conceptual#

El viaje de los datos:

<input name="username"> ──(el usuario escribe "ana")──▶ POST /login   cuerpo: username=ana&password=123
                                                              │
                                              Flask ──▶ request.form = {"username": "ana", "password": "123"}

• El name del HTML es la clave en request.form. El id no viaja al servidor.
• request.form se comporta como un diccionario.

Comportamientos verificados con Flask 3.1:

🛠️ Nota técnica: el reto devuelve la contraseña en pantalla solo para practicar. En una aplicación real nunca se muestra ni se guarda una contraseña tal como llega (el Día 68 aprenderás a guardarla con hash). Y como en el Día 55, devolver datos del usuario dentro de una f-string con HTML permite inyectar código: usa escape o, mejor, una plantilla.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: un formulario con nombre y color favorito que devuelva una página con fondo de ese color (usa <input type="color">).
• 🟡 Reto 2 — Ampliación: cambia el formulario a method="get" y la ruta a methods=["GET"]; lee los datos con request.args. ¿Qué ves en la barra de direcciones?
• 🟠 Reto 3 — Desafío: con request.form.get(...), muestra un mensaje amable si algún campo llega vacío, en lugar de un 400.
• 🔴 Reto 4 — Pensamiento computacional: con las herramientas de desarrollo (pestaña Red), envía el formulario y encuentra la solicitud POST. ¿Dónde están los datos? ¿Viajan cifrados en http://127.0.0.1? ¿Qué cambiaría con https://?

🎯 Objetivo de aprendizaje#

Atender la vista del formulario y su envío en una sola ruta, y mostrar un mensaje de confirmación con Jinja.

📝 Ejercicio original del curso#

1. Descarga los archivos de inicio: son el blog del Día 59 con un contact.html simplificado para que sea más fácil conectarlo con main.py.
2. Agrega a main.py una ruta "/form-entry" que reciba los datos.
3. Reto: que el servidor imprima en la terminal lo que el usuario escribió y devuelva un <h1> "Successfully sent your message".
4. Reto: combina /contact y /form-entry en una sola ruta /contact que haga algo distinto según el método (GET o POST). Pistas: cambia el action de contact.html y usa request.method.
5. Reto: en lugar de devolver un <h1> suelto, haz que el propio <h1> de contact.html diga "Successfully sent message". Pista: {% if %} de Jinja.

📖 Explicación conceptual#

🛠️ Nota técnica (verificado): en el contact.html original de Clean Blog, los campos tienen id pero no name, el formulario depende de SB Forms (data-sb-form-api-token) y el botón tiene la clase disabled. Por eso el curso entrega uno simplificado. Si trabajas con el original, debes: quitar data-sb-form-api-token y el script sb-forms-latest.js, agregar action y method="post" al <form>, agregar name a cada campo y quitar disabled del botón.

La solución combinada (verificada):

@app.route("/contact", methods=["GET", "POST"])
def contact():
    if request.method == "POST":
        data = request.form
        print(data["name"], data["email"], data["phone"], data["message"])
        return render_template("contact.html", msg_sent=True)
    return render_template("contact.html", msg_sent=False)

<form action="{{ url_for('contact') }}" method="post">
    ...
</form>

{% if msg_sent %}
    <h1>Successfully sent your message</h1>
{% else %}
    <h1>Contact Me</h1>
{% endif %}

• La misma URL muestra el formulario (GET) y lo procesa (POST).
• msg_sent es un booleano que decide qué título mostrar.

📖 Validar lo que llega (adaptación)#

El atributo required en el HTML impide enviar campos vacíos… desde el navegador. Pero cualquiera puede enviar un POST sin pasar por tu formulario (con requests.post, Día 37). La validación real se hace en el servidor:

nombre = request.form.get("name", "").strip()
if not nombre:
    return render_template("contact.html", msg_sent=False, error="Escribe tu nombre")

El Día 61 verás una herramienta que hace esto de forma ordenada: WTForms.

📖 Un detalle profesional: POST/Redirect/GET (adaptación)#

Si después de enviar el formulario presionas F5, el navegador pregunta si quieres reenviar los datos: ¡se mandaría otro correo! La solución habitual es redirigir después de un POST exitoso:

from flask import redirect, url_for

    if request.method == "POST":
        ...
        return redirect(url_for("contact", enviado=1))

La recarga ya no repite el envío. (redirect lo usarás mucho desde el Día 63.)

⚠️ Errores frecuentes#

📝 Ejercicio original del curso#

Con lo aprendido en el Día 32, haz que el formulario de contacto envíe un correo al dueño del sitio con los datos del visitante. Puede que necesites repasar las lecciones de smtplib.

📖 Explicación conceptual#

La forma del Día 32 construye el mensaje como una cadena y usa sendmail:

def send_email(name, email, phone, message):
    email_message = f"Subject:New Message\n\nName: {name}\nEmail: {email}\nPhone: {phone}\nMessage:{message}"
    with smtplib.SMTP(SERVIDOR, PUERTO) as connection:
        connection.sendmail(REMITENTE, DESTINATARIO, email_message)

🛠️ Nota técnica (verificado con Python 3.14): si el visitante escribe una sola tilde o una ñ (por ejemplo, "María" o "¿Qué tal?"), sendmail falla:

1

UnicodeEncodeError: 'ascii' codec can't encode character '\xed' in position 32

porque convierte la cadena a ASCII. En español esto ocurre casi siempre. La solución es construir el correo con la clase EmailMessage de la biblioteca estándar, que codifica el asunto y el cuerpo en UTF-8 (verificado: el asunto "Nuevo mensaje de María" llega como =?utf-8?q?Mar=C3=ADa?= y se muestra bien):

import os
import smtplib
from email.message import EmailMessage

SERVIDOR = os.environ.get("SMTP_SERVIDOR", "localhost")
PUERTO = int(os.environ.get("SMTP_PUERTO", "8025"))
DESTINATARIO = os.environ.get("CORREO_DUENO", "dueno@blog.local")


def send_email(name, email, phone, message):
    correo = EmailMessage()
    correo["Subject"] = f"Nuevo mensaje de {name}"
    correo["From"] = "formulario@blog.local"
    correo["To"] = DESTINATARIO
    correo["Reply-To"] = email          # al responder, le escribes al visitante
    correo.set_content(f"Nombre: {name}\nCorreo: {email}\nTeléfono: {phone}\n\n{message}")
    with smtplib.SMTP(SERVIDOR, PUERTO) as conexion:
        conexion.send_message(correo)

• Con el servidor local de aiosmtpd no hacen falta starttls() ni login(). Con Gmail u otro proveedor real sí (Día 32), y la contraseña de aplicación va en un .env, nunca en el código.
• Reply-To evita un error común: poner el correo del visitante en From. Muchos servidores rechazan correos cuyo From no les pertenece.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: envía también una copia de confirmación al visitante ("Recibimos tu mensaje").
• 🟡 Reto 2: si el correo falla, muestra "No pudimos enviar tu mensaje, inténtalo más tarde" en lugar de un error 500.
• 🟠 Reto 3: guarda cada mensaje también en mensajes.csv (fecha, nombre, correo, mensaje), por si el correo falla.
• 🔴 Reto 4: evita el spam: agrega un campo oculto (honeypot) que las personas no ven; si llega con texto, es un robot y no se envía nada. Explica por qué funciona.

Problema#

El formulario de contacto del blog no envía nada: los lectores no tienen cómo comunicarse con el autor.

Objetivo#

Que /contact muestre el formulario (GET), lo procese (POST), envíe un correo con los datos y confirme el envío en la misma página.

Requisitos funcionales#

1. Una sola ruta /contact con GET y POST.
2. Campos con name: name, email, phone, message.
3. Validación en el servidor: nombre, correo y mensaje obligatorios.
4. Correo con EmailMessage al servidor local (aiosmtpd).
5. Título "Mensaje enviado" o mensaje de error según el caso.

Restricciones técnicas#

• action con url_for.
• Configuración del correo en variables de entorno o .env, con valores por defecto para el servidor local.
• Ningún error 500 en los casos de prueba.

Planificación#

1. Comprender. 2. Entradas: los 4 campos. 3. Procesos: validar → enviar correo → confirmar. 4. Salidas: la página y el correo. 5. Dividir: ruta, validación, send_email. 6. Diseñar la tabla de casos. 7. Implementar. 8. Probar. 9. Corregir. 10. Mejorar.

Construcción paso a paso#

• Versión 1: /form-entry que imprime los datos (paso 3 del curso).
• Versión 2: ruta única /contact con request.method.
• Versión 3: msg_sent en la plantilla.
• Versión 4: validación en el servidor.
• Versión final: correo con EmailMessage y manejo de errores.

Pruebas#

(Con python -m aiosmtpd -n -l localhost:8025 corriendo en otra terminal.)

🧪 Prueba y depuración#

import requests
from flask import Flask, render_template

@app.route("/contact")
def contact():
    if requests.method == "post":
        send_email(requests.form["name"])
        return render_template("contact.html", msg_send=True)
    return render_template("contact.html")

Encuentra cuatro problemas: requests en lugar de request (y sin importarlo de flask), la ruta no acepta POST, el método se compara en minúsculas y la variable se llama msg_send pero la plantilla usa msg_sent.

⭐ Extensión del proyecto#

• Mostrar los datos del visitante en la página de confirmación ("Gracias, María").
• Un campo "asunto" con una lista desplegable (<select>) que cambie el asunto del correo.

Situación#

El consejo estudiantil quiere un buzón de sugerencias en línea, con opción de enviar anónimamente.

Requisitos#

1. Formulario con categoría (<select>: Infraestructura, Convivencia, Académico, Otro), sugerencia (<textarea>) y una casilla "Enviar de forma anónima" (<input type="checkbox">). Si no es anónimo, pide nombre y curso.
2. Validación en el servidor: sugerencia de 20 a 500 caracteres; nombre obligatorio si no es anónimo.
3. Cada sugerencia se guarda en sugerencias.csv y se envía por correo (servidor local) al consejo.
4. Una página /estadisticas (GET) que muestre cuántas sugerencias hay por categoría.

Decisiones que debes tomar (y justificar)#

• ¿Qué significa realmente anónimo? ¿Guardas la hora exacta? ¿La dirección IP (request.remote_addr)?
• Una casilla sin marcar no se envía en el formulario. ¿Cómo lo detectas en request.form?

Casos de prueba#

• Sugerencia anónima: el CSV y el correo no contienen nombre.
• Sugerencia de 10 caracteres: error y nada se guarda.
• /estadisticas refleja las sugerencias guardadas.

Conceptuales#

1. ¿Qué hacen los atributos action y method de un formulario?
2. ¿Qué papel cumple el atributo name? ¿Viaja el id al servidor?
3. ¿Qué diferencia hay entre request y requests?
4. ¿Cuándo usarías GET y cuándo POST?
5. ¿Por qué no basta con required en el HTML?

Análisis de código#

@app.route("/buscar")
def buscar():
    termino = request.args.get("q", "")
    return f"Buscaste: {escape(termino)}"

¿Qué muestra /buscar?q=cactus? ¿Y /buscar?

Predicción#

Una ruta tiene methods=["POST"]. ¿Qué código de estado ves si escribes su URL en el navegador? ¿Y si envías el formulario sin uno de los campos que el código lee con corchetes?

Depuración#

<form action="/contact" method="post">
  <input type="text" id="name">
  <button type="submit">Enviar</button>
</form>

El servidor responde 400 al enviar. ¿Por qué?

Modificación#

Cambia el formulario de /login para que, si la contraseña tiene menos de 8 caracteres, la página muestre un aviso en lugar de los datos.

Creación#

Crea una calculadora de IMC: un formulario con peso y estatura que, con POST, muestre el resultado en la misma página ({% if %}), validando que ambos sean números positivos.