13-formularios en Node.js

mayo 22, 2025

Cómo funcionan los formularios en Node.js y Express con `express.urlencoded`

Cuando envías datos desde un formulario HTML en una aplicación web, estos pueden viajar de dos formas principales:

GET: Los datos se envían en la URL (ej: ?nombre=Juan&email=juan@example.com).
POST: Los datos se envían en el cuerpo (body) de la petición HTTP (ocultos en la solicitud).

Express, por defecto, no puede leer directamente los datos de un formulario enviado por POST. Aquí es donde entra express.urlencoded, un middleware que procesa los datos enviados desde formularios HTML.

1. ¿Qué hace `express.urlencoded()`?

Es un middleware de Express que:

Decodifica los datos enviados desde un formulario con enctype="application/x-www-form-urlencoded" (el valor por defecto en HTML).
Convierte los datos en un objeto JavaScript accesible en req.body.
Habilita el manejo de datos complejos cuando se usa { extended: true }.

Ejemplo básico:

const express = require('express');
const app = express();

// Middleware para procesar datos de formularios
app.use(express.urlencoded({ extended: true }));

app.post('/procesar-formulario', (req, res) => {
  console.log(req.body); // { nombre: "Juan", email: "juan@example.com" }
  res.send('Datos recibidos');
});

2. Flujo de un formulario en Express

Paso 1: El cliente envía un formulario (HTML)

<form action="/procesar-formulario" method="POST">
  <input type="text" name="nombre" placeholder="Nombre">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Enviar</button>
</form>

action="/procesar-formulario": La URL a donde se envía el formulario.
method="POST": Indica que los datos viajarán en el cuerpo de la petición (no en la URL).

Paso 2: Express recibe los datos con `express.urlencoded`

Cuando el usuario envía el formulario:

El navegador codifica los datos en formato x-www-form-urlencoded (ej: nombre=Juan&email=juan@example.com).
Express usa express.urlencoded para convertir esos datos en un objeto (req.body).

Paso 3: Procesamiento en el servidor

app.post('/procesar-formulario', (req, res) => {
  const { nombre, email } = req.body;
  console.log(nombre, email); // "Juan", "juan@example.com"
  res.send(`Datos recibidos: ${nombre}, ${email}`);
});

Los datos están disponibles en req.body gracias al middleware.

3. ¿Por qué usar `{ extended: true }`?

extended: false: Solo soporta datos simples (strings, arrays).
extended: true: Permite datos anidados (objetos) y es más flexible.

Ejemplo con datos complejos:

<form action="/procesar-formulario" method="POST">
  <input type="text" name="usuario[nombre]" placeholder="Nombre">
  <input type="email" name="usuario[email]" placeholder="Email">
  <button type="submit">Enviar</button>
</form>

Salida en req.body:

{
  usuario: {
    nombre: "Juan",
    email: "juan@example.com"
  }
}

→ Necesitas { extended: true } para que Express pueda parsear correctamente estos datos.

4. Alternativas a `express.urlencoded`

Si envías datos en formato JSON (desde una API REST o AJAX), debes usar:

app.use(express.json()); // Para application/json

Pero para formularios HTML tradicionales, express.urlencoded es la opción correcta.

Característica	Descripción
`express.urlencoded()`	Middleware para procesar datos de formularios HTML.
`{ extended: true }`	Permite el análisis de objetos anidados.
Datos disponibles en `req.body`	Accedes a los campos del formulario con `req.body.nombreCampo`.
Método HTTP	Debe ser `POST` o `PUT` (no `GET`).
Content-Type	`application/x-www-form-urlencoded` (por defecto en formularios HTML).

Conclusión

express.urlencoded es esencial para manejar formularios HTML en Express.
Sin él, req.body estará vacío.
Usa { extended: true } para mayor flexibilidad con datos complejos.

Si necesitas manejar archivos (como imágenes), deberás usar multer (otro middleware), ya que express.urlencoded solo procesa texto. ¿Quieres un ejemplo con subida de archivos?

Buscar este blog

SOTELO-node