Cómo funcionan los formularios web

1. ¿Qué es un formulario web?

Un formulario web permite recopilar información del usuario y utilizarla para realizar una operación, como iniciar sesión, registrar un producto, crear una cuenta o enviar una búsqueda.

Un formulario normalmente contiene:

Campos: permiten introducir o seleccionar datos.
Etiquetas: indican qué información solicita cada campo.
Botones: permiten enviar el formulario o realizar otras acciones.
Validaciones: comprueban que los datos cumplan determinadas condiciones.
Un mecanismo de envío: transmite los datos para procesarlos.

2. Estructura básica de un formulario

html

<form action="/usuarios" method="post">
  <label for="nombre">Nombre:</label>
  <input
    type="text"
    id="nombre"
    name="nombre"
    required
  >

  <label for="correo">Correo electrónico:</label>
  <input
    type="email"
    id="correo"
    name="correo"
    required
  >

  <button type="submit">Registrar</button>
</form>

¿Qué significa cada atributo?

Elemento o atributo	Función
`<form>`	Agrupa los campos que se enviarán como un formulario.
`action`	Indica la URL a la que se enviarán los datos mediante el envío tradicional.
`method`	Define el método HTTP utilizado para enviar los datos.
`label`	Proporciona una etiqueta descriptiva para el campo.
`for`	Vincula la etiqueta con el `id` del campo correspondiente.
`name`	Define el nombre con el que se identifica el dato enviado.
`id`	Identifica el elemento en el documento HTML.
`required`	Hace obligatorio el campo durante la validación HTML.
`type`	Define el tipo de entrada y su comportamiento.
`type="submit"`	Envía el formulario cuando la validación lo permite.

Importante: el atributo name es fundamental para el envío tradicional del formulario. Tener únicamente un id no hace que el campo se incluya automáticamente en los datos enviados.

3. Tipos de campos más comunes

Elemento	Uso
`input type="text"`	Texto corto.
`input type="email"`	Correo electrónico.
`input type="password"`	Contraseña.
`input type="number"`	Valor numérico.
`input type="date"`	Fecha.
`input type="checkbox"`	Selección independiente de una opción.
`input type="radio"`	Selección entre opciones de un mismo grupo.
`<textarea>`	Texto de varias líneas.
`<select>`	Selección entre opciones.
`input type="file"`	Selección de archivos.
`button type="submit"`	Envío del formulario.
`button type="reset"`	Restablece los campos a sus valores iniciales.
`button type="button"`	Botón sin comportamiento de envío automático.

Ejemplo de un selector:

html

<label for="categoria">Categoría:</label>

<select id="categoria" name="categoria" required>
  <option value="">Seleccione una categoría</option>
  <option value="1">Accesorios</option>
  <option value="2">Repuestos</option>
</select>

El valor de la opción seleccionada es el que se utiliza al enviar el formulario.

4. ¿Cómo funciona el envío de un formulario?

En el envío tradicional, el navegador sigue un proceso parecido a este:

El usuario introduce los datos.
Pulsa el botón de envío.
El navegador realiza las validaciones HTML que correspondan.
Si la validación falla, muestra los errores y normalmente no envía el formulario.
Si la validación pasa, el navegador prepara los datos de los controles válidos.
Envía una petición HTTP a la URL indicada en action.
El servidor recibe y valida los datos.
El servidor procesa la operación y devuelve una respuesta.

Por ejemplo, al registrar un producto, el servidor podría validar el nombre, comprobar el precio y guardar el registro en una base de datos.

La validación del navegador no reemplaza la validación del servidor. Un usuario puede modificar las peticiones o saltarse las comprobaciones del frontend.

5. Diferencia entre `GET` y `POST`

El atributo method determina cómo se realiza el envío tradicional.

GET

Se utiliza habitualmente para consultar o buscar información.

html

<form action="/productos" method="get">
  <input type="text" name="busqueda">
  <button type="submit">Buscar</button>
</form>

Al buscar teclado, el navegador podría navegar a una URL similar a:

text

/productos?busqueda=teclado

Los datos se incorporan a la URL como parámetros de consulta.

POST

Se utiliza habitualmente para enviar datos que el servidor procesará, como crear un registro.

html

<form action="/productos" method="post">
  <input type="text" name="nombre" required>
  <input type="number" name="precio" required>

  <button type="submit">Guardar</button>
</form>

En un envío tradicional con POST, los datos se transmiten normalmente en el cuerpo de la petición, no como parámetros de consulta de la URL.

Esto no significa que POST cifre los datos. Para protegerlos durante el transporte se utiliza HTTPS.

6. Validación de formularios

La validación comprueba que los datos cumplan determinadas reglas antes de procesarlos.

HTML ofrece atributos para validaciones sencillas:

Atributo	Función
`required`	Exige que se introduzca un valor.
`minlength`	Establece la longitud mínima de texto.
`maxlength`	Establece la longitud máxima de texto.
`min`	Define el valor mínimo para entradas compatibles.
`max`	Define el valor máximo para entradas compatibles.
`step`	Define los incrementos válidos de valores numéricos, entre otros usos.
`pattern`	Define un patrón de texto mediante una expresión regular.

Ejemplo:

html

<form>
  <label for="usuario">Usuario:</label>
  <input
    type="text"
    id="usuario"
    name="usuario"
    minlength="3"
    maxlength="20"
    required
  >

  <label for="edad">Edad:</label>
  <input
    type="number"
    id="edad"
    name="edad"
    min="18"
    max="100"
    required
  >

  <button type="submit">Continuar</button>
</form>

Si los valores no cumplen las restricciones, el navegador puede impedir el envío y mostrar un mensaje de validación.

Estas reglas no garantizan que el dato sea correcto desde el punto de vista del negocio. Por ejemplo, una dirección de correo puede tener un formato válido sin que realmente exista.

7. ¿Cómo interviene JavaScript?

JavaScript permite controlar el comportamiento del formulario, validar reglas personalizadas, mostrar mensajes y enviar datos sin recargar la página.

Para interceptar el envío se utiliza el evento submit.

html

<form id="formulario">
  <input
    type="text"
    id="nombre"
    name="nombre"
    required
  >

  <button type="submit">Enviar</button>
</form>

<p id="mensaje"></p>

<script>
  const formulario = document.querySelector('#formulario');
  const nombre = document.querySelector('#nombre');
  const mensaje = document.querySelector('#mensaje');

  formulario.addEventListener('submit', (evento) => {
    evento.preventDefault();

    mensaje.textContent = `Hola, ${nombre.value}`;
  });
</script>

¿Qué hace `preventDefault()`?

evento.preventDefault() evita el comportamiento predeterminado del evento. En este caso, impide que el formulario realice su envío tradicional.

Esto permite que JavaScript se encargue de la operación. Sin embargo, no envía los datos al servidor por sí mismo; para eso hay que implementar la petición correspondiente.

El evento submit se activa al enviar el formulario, por ejemplo, al pulsar un botón submit o al enviar el formulario mediante el teclado. Es preferible escuchar este evento en el formulario en lugar de escuchar únicamente el clic del botón.

8. Enviar datos a una API con `fetch()`

Una aplicación puede utilizar JavaScript para enviar los datos a una API sin que el navegador tenga que navegar a otra página.

html

<form id="formulario">
  <input
    type="text"
    name="nombre"
    placeholder="Nombre del producto"
    required
  >

  <button type="submit">Guardar</button>
</form>

<p id="mensaje"></p>

<script>
  const formulario = document.querySelector('#formulario');
  const mensaje = document.querySelector('#mensaje');

  formulario.addEventListener('submit', async (evento) => {
    evento.preventDefault();

    const datos = new FormData(formulario);

    const producto = {
      nombre: datos.get('nombre')
    };

    try {
      const respuesta = await fetch('/api/productos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(producto)
      });

      if (!respuesta.ok) {
        throw new Error('No se pudo guardar el producto');
      }

      mensaje.textContent = 'Producto guardado correctamente';
      formulario.reset();
    } catch (error) {
      mensaje.textContent = error.message;
    }
  });
</script>

Este ejemplo supone que existe una API en /api/productos que acepta JSON. La ruta, los campos y la respuesta deben coincidir con lo que implemente el servidor.

El flujo es:

Se intercepta el envío con submit.
Se evita la navegación tradicional con preventDefault().
FormData permite obtener los valores de los campos por su atributo name.
JSON.stringify() convierte el objeto JavaScript en una cadena JSON.
fetch() envía la petición HTTP.
Se comprueba respuesta.ok para detectar errores HTTP.
Se muestra el resultado al usuario.

En este ejemplo se envía JSON, por lo que se configura Content-Type: application/json. Si se envía directamente un objeto FormData, normalmente no se debe establecer manualmente ese encabezado: el navegador debe añadir el boundary correspondiente.

9. Estados habituales de un formulario

Un formulario bien diseñado también comunica qué está ocurriendo durante la operación.

Estado	Comportamiento habitual
Inicial	Los campos están listos para recibir datos.
Validación	Se comprueba que los valores cumplan las reglas.
Enviando	Se indica que la petición está en curso y se evita enviar duplicados.
Éxito	Se confirma que la operación terminó correctamente.
Error	Se informa que la operación falló y se permite corregir o reintentar.

Por ejemplo, mientras se guarda un producto, se puede deshabilitar el botón para reducir el riesgo de envíos repetidos. El servidor también debe proteger las operaciones que no deban ejecutarse varias veces.

10. Buenas prácticas

Utiliza una etiqueta <label> asociada a cada campo.
Usa el atributo name en los controles cuyos valores deban enviarse.
Selecciona el tipo de campo adecuado, como email, number o date.
Proporciona mensajes de error claros y relacionados con el campo correspondiente.
Conserva los datos introducidos cuando sea posible si ocurre un error.
Valida siempre los datos también en el servidor.
No confundas la validación del navegador con la seguridad.
Evita enviar contraseñas u otros datos sensibles mediante HTTP sin cifrar; utiliza HTTPS.
Deshabilita temporalmente el botón de envío cuando sea necesario prevenir envíos repetidos.
Usa textContent para mostrar texto introducido por el usuario en lugar de insertarlo directamente como HTML.

Resumen

Un formulario web recopila datos, los valida y los envía para que puedan procesarse.

La distinción más importante es:

HTML define los campos y las reglas básicas de validación.
JavaScript controla interacciones y puede interceptar el envío.
HTTP transporta la petición al servidor.
El backend valida nuevamente los datos y ejecuta la operación, como guardar información en una base de datos.

Cómo funcionan los formularios web ​

1. ¿Qué es un formulario web? ​

2. Estructura básica de un formulario ​

¿Qué significa cada atributo? ​

3. Tipos de campos más comunes ​

4. ¿Cómo funciona el envío de un formulario? ​

5. Diferencia entre GET y POST ​

GET ​

POST ​

6. Validación de formularios ​

7. ¿Cómo interviene JavaScript? ​

¿Qué hace preventDefault()? ​

8. Enviar datos a una API con fetch() ​

9. Estados habituales de un formulario ​

10. Buenas prácticas ​

Resumen ​

Cómo funcionan los formularios web

1. ¿Qué es un formulario web?

2. Estructura básica de un formulario

¿Qué significa cada atributo?

3. Tipos de campos más comunes

4. ¿Cómo funciona el envío de un formulario?

5. Diferencia entre `GET` y `POST`

GET

POST

6. Validación de formularios

7. ¿Cómo interviene JavaScript?

¿Qué hace `preventDefault()`?

8. Enviar datos a una API con `fetch()`

9. Estados habituales de un formulario

10. Buenas prácticas

Resumen