Formularios de búsqueda — Python: Desarrollo web con Flask

• ¿Qué es un formulario HTML?
• Estructura de un formulario
• Métodos de envío: GET vs POST
• Tipos de campos de formulario (<input>)
• Atributos importantes y cómo se usan
• ¿Qué hace el servidor con esos datos?
• Mantener el campo de búsqueda con el último valor

¿Te has preguntado cómo buscar recetas o productos en una página? Vamos a construir ese sistema juntos, usando formularios HTML y un poco de código del lado del servidor

¿Qué es un formulario HTML?

Pero hoy lo vamos a usar para buscar o filtrar contenido, sin modificar nada.

Un ejemplo real: en RecetasGratis.net puedes buscar recetas usando una barra como esta:

📎 Enlace: Recetas de cocina

Y así se implementa en HTML algo parecido:

<form action="/buscar-recetas" method="get">
  <input type="search" required name="q" placeholder="¿Qué quieres cocinar hoy?">
</form>

Estructura de un formulario

Vamos a ver qué significa cada parte:

Métodos de envío: GET vs POST

Cuando defines un formulario, debes decirle cómo enviar los datos:

• get: Envía los datos como parte de la URL. Ideal para búsquedas y filtros porque puedes compartir el enlace.
• post: Envía los datos "por dentro", como si los escondiera. Se usa cuando se crean o modifican datos, como cuando alguien se registra.

En el ejemplo de búsqueda, usamos get porque no estamos cambiando nada, solo consultando.

Por ejemplo:
Si escribes "arepas" y envías el formulario con get, el navegador irá a esta URL:

/buscar-recetas?q=arepas

Esa URL puede compartirse, guardar en favoritos, etc.

Tipos de campos de formulario (<input>)

El elemento <input> es súper versátil. Dependiendo del atributo type, puede comportarse de distintas formas. Aquí te dejo una tabla con algunos:

Atributos importantes y cómo se usan

Todos los campos en un formulario (excepto los botones) deben tener el atributo name, porque con ese nombre vamos a acceder a la información en el servidor.

<form action="/buscar-recetas" method="get">
  <input type="search" name="q" required>
</form>

Si alguien busca “tacos de carne”, el servidor recibe:

q=tacos%20de%20carne

¿Qué hace el servidor con esos datos?

Imagínate que tienes un sitio de recetas. El formulario manda la palabra clave, y el servidor filtra las recetas que la contienen.

En Python con Flask podría verse así:

@app.route('/buscar-recetas')
def buscar():
    q = request.args.get('q')
    recetas_filtradas = filtrar_por_nombre(q)
    return render_template('resultados.html', recetas=recetas_filtradas, busqueda=q)

Mantener el campo de búsqueda con el último valor

Buena práctica: mostrar lo que la persona escribió, así puede refinar su búsqueda sin empezar de cero.

Paso 1: enviar el valor al template

return render_template('resultados.html', recetas=recetas_filtradas, busqueda=q)

Paso 2: usar ese valor en el campo

<form action="/buscar-recetas" method="get">
  <input type="search" name="q" value="{{ busqueda }}">
  <input type="submit" value="Buscar">
</form>

De esta forma, cuando se recargue la página con los resultados, el campo seguirá mostrando lo que la persona escribió antes.

Trabajo independiente

1. Crea una plantilla para mostrar usuarios en templates/users/index.html.
2. Agrega al archivo example.py el siguiente diccionario.

users = [
    {'id': 1, 'name': 'mike'},
    {'id': 2, 'name': 'mishel'},
    {'id': 3, 'name': 'adel'},
    {'id': 4, 'name': 'keks'},
    {'id': 5, 'name': 'kamila'}
]

1. Configura el manejador de la ruta /users y muestra los nombres de los usuarios del arreglo en la página /users.
2. Implementa en la página /users un formulario de búsqueda, donde se pueda ingresar parte del nombre del usuario para buscarlo. El formulario debe enviarse a la misma página.
3. Ajusta el manejador /users para que realice el filtrado de los nombres.
4. Prueba filtrar usuarios. La búsqueda mi debe devolver tres nombres: mike, mishel y kamila.

Aplicación de referencia