JavaScript: formularios interactivos

Los formularios son una de las partes más importantes de una interfaz web. Una página puede verse muy bien, pero si el formulario confunde, no responde o no explica qué ocurrió, la experiencia se rompe justo en el momento más sensible: cuando la persona entrega información.

En una tienda, un formulario permite comprar. En una universidad, permite inscribirse. En una app, permite iniciar sesión, crear un perfil, registrar una tarea o guardar un comentario. Por eso no basta con poner algunos inputs y un botón. Un buen formulario debe guiar, escuchar, responder y preparar los datos para que la aplicación pueda trabajar con ellos.

En el capítulo anterior vimos eventos y DOM. Ahora vamos a aplicar esas herramientas a formularios interactivos: leer campos, evitar recargas innecesarias, mostrar mensajes, construir objetos con los datos y organizar el código sin mezclarlo todo en el evento submit.

Qué aprenderás hoy

• Construir un formulario HTML con etiquetas y campos claros.
• Escuchar el evento submit sin perder el control de la página.
• Leer datos con propiedades de los inputs y con FormData.
• Separar lectura, procesamiento y renderizado de mensajes.
• Mostrar estados de éxito, advertencia o error sin saturar al usuario.
• Preparar el camino para la validación de datos del siguiente capítulo.

Por qué los formularios merecen atención

Los formularios concentran fricción. Pedimos datos, exigimos formatos, mostramos errores y muchas veces decidimos si una tarea puede continuar. Si un formulario está mal diseñado, el usuario no sabe qué completar, qué corregir o si la acción se realizó correctamente.

En desarrollo web, esto nos obliga a pensar en tres capas al mismo tiempo. El HTML debe dar estructura y significado. El CSS debe hacer visible el estado del formulario. JavaScript debe coordinar la interacción: leer valores, responder a eventos, preparar datos y comunicar resultados.

La tentación inicial es poner toda la lógica dentro del evento submit. Funciona al principio, pero pronto se vuelve difícil de mantener. Por eso trabajaremos con funciones pequeñas, igual que en los capítulos anteriores.

Ejemplo básico: formulario de inscripción

Empecemos con una estructura simple. El formulario pide nombre, correo y turno. Cada campo tiene una etiqueta asociada, y el botón explica la acción.

<form id="registration-form" class="course-form">
  <label for="student-name">Nombre completo</label>
  <input id="student-name" name="name" type="text">

  <label for="student-email">Correo</label>
  <input id="student-email" name="email" type="email">

  <label for="student-shift">Turno</label>
  <select id="student-shift" name="shift">
    <option value="">Selecciona una opción</option>
    <option value="morning">Mañana</option>
    <option value="night">Noche</option>
  </select>

  <button type="submit">Registrar inscripción</button>
</form>

<p id="form-message" class="result" aria-live="polite"></p>

El atributo name será importante cuando usemos FormData. El atributo aria-live="polite" ayuda a comunicar cambios de estado sin interrumpir agresivamente la navegación asistida.

Controlar el submit

Cuando se envía un formulario, el navegador intenta ejecutar su comportamiento natural. Si estamos practicando una interacción local con JavaScript, podemos evitar esa recarga usando event.preventDefault().

const form = document.querySelector("#registration-form");
const message = document.querySelector("#form-message");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  message.textContent = "Formulario recibido.";
  message.className = "result result-success";
});

Este ejemplo todavía no lee datos, pero ya establece el punto de control. La interfaz deja de recargarse y podemos decidir qué hacer antes de enviar, guardar o procesar información.

Leer valores directamente desde los inputs

Una forma sencilla de leer datos es seleccionar cada campo y usar su propiedad value. Esto resulta claro cuando el formulario tiene pocos campos.

const nameInput = document.querySelector("#student-name");
const emailInput = document.querySelector("#student-email");
const shiftInput = document.querySelector("#student-shift");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const student = {
    name: nameInput.value.trim(),
    email: emailInput.value.trim(),
    shift: shiftInput.value
  };

  console.log(student);
});

La función trim() elimina espacios al inicio y al final. Es una costumbre pequeña, pero útil. Muchos errores de formulario no vienen de datos imposibles, sino de detalles como espacios sobrantes o campos aparentemente llenos.

Leer datos con FormData

Cuando el formulario crece, seleccionar cada input puede volverse repetitivo. La interfaz web nos ofrece FormData, una forma práctica de leer los datos de un formulario usando los atributos name.

function readRegistrationForm(formElement) {
  const formData = new FormData(formElement);

  return {
    name: String(formData.get("name")).trim(),
    email: String(formData.get("email")).trim(),
    shift: String(formData.get("shift"))
  };
}

Esta función recibe el formulario y devuelve un objeto. Ya no depende de variables globales ni de selectores sueltos. Eso facilita probar la lógica y reutilizarla en otros formularios.

Separar lectura, respuesta y presentación

Ahora podemos ordenar el flujo. Una función lee los datos. Otra decide qué mensaje mostrar. Otra actualiza la interfaz. No haremos todavía una validación profunda; eso vendrá en el siguiente capítulo. Por ahora trabajaremos con una revisión mínima para demostrar el patrón.

function getFormState(student) {
  if (student.name === "" || student.email === "" || student.shift === "") {
    return {
      type: "warning",
      text: "Completa los campos principales para continuar."
    };
  }

  return {
    type: "success",
    text: "Inscripción preparada para " + student.name + "."
  };
}

function renderMessage(element, state) {
  element.className = "result result-" + state.type;
  element.textContent = state.text;
}

Esta separación parece simple, pero cambia la forma de pensar. El evento no debería hacer todo. El evento coordina: captura la acción, llama funciones y actualiza la respuesta.

Ejemplo mejorado: flujo completo del formulario

Juntando las piezas, podemos crear un formulario más ordenado. El evento submit queda corto y fácil de leer.

function readRegistrationForm(formElement) {
  const formData = new FormData(formElement);

  return {
    name: String(formData.get("name")).trim(),
    email: String(formData.get("email")).trim(),
    shift: String(formData.get("shift"))
  };
}

function getFormState(student) {
  if (student.name === "" || student.email === "" || student.shift === "") {
    return {
      type: "warning",
      text: "Completa los campos principales para continuar."
    };
  }

  return {
    type: "success",
    text: "Inscripción preparada para " + student.name + "."
  };
}

function renderMessage(element, state) {
  element.className = "result result-" + state.type;
  element.textContent = state.text;
}

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const student = readRegistrationForm(form);
  const state = getFormState(student);

  renderMessage(message, state);
});

Este patrón será muy útil cuando más adelante hagamos CRUD. Antes de guardar un registro en memoria, en un archivo JSON o en MySQL, necesitamos leer datos de una interfaz y convertirlos en un objeto claro.

Vista previa mientras se escribe

Un formulario interactivo no tiene que esperar siempre al botón final. A veces puede mostrar una vista previa mientras la persona escribe. Esto ayuda cuando el usuario está creando una tarjeta, un perfil, una publicación o una inscripción.

<article class="preview-card">
  <h2 id="preview-name">Nombre del estudiante</h2>
  <p id="preview-email">correo@ejemplo.com</p>
</article>

const previewName = document.querySelector("#preview-name");
const previewEmail = document.querySelector("#preview-email");

form.addEventListener("input", function () {
  const student = readRegistrationForm(form);

  previewName.textContent = student.name || "Nombre del estudiante";
  previewEmail.textContent = student.email || "correo@ejemplo.com";
});

El operador || permite mostrar un texto por defecto si el valor está vacío. La interfaz se siente más viva, pero sigue siendo comprensible.

Resetear el formulario cuando todo sale bien

Si el flujo termina correctamente, podemos limpiar el formulario con reset(). Conviene hacerlo solo después de confirmar la acción, no antes.

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const student = readRegistrationForm(form);
  const state = getFormState(student);

  renderMessage(message, state);

  if (state.type === "success") {
    form.reset();
    previewName.textContent = "Nombre del estudiante";
    previewEmail.textContent = "correo@ejemplo.com";
  }
});

Esto introduce una idea importante: cada acción del formulario debe tener una respuesta visible. Si algo salió bien, se informa. Si falta algo, se guía. Si se limpian los campos, debe tener sentido dentro del flujo.

Errores comunes

• Usar inputs sin label asociado.
• Olvidar los atributos name cuando se quiere usar FormData.
• Leer todos los campos dentro del evento sin separar funciones.
• Bloquear el submit con preventDefault() y no mostrar ninguna respuesta.
• Limpiar el formulario antes de que el usuario sepa si la acción funcionó.
• Mostrar errores solo con color y sin texto comprensible.

Buenas prácticas

• Empieza con HTML semántico: form, label, input, select y button.
• Usa type adecuados: email, number, date, entre otros.
• Convierte los datos del formulario en un objeto antes de procesarlos.
• Separa lectura, validación, decisión y renderizado.
• Usa mensajes de estado claros y visibles.
• Prueba el formulario con campos vacíos, espacios, datos reales y datos inesperados.

Reto práctico

Variante extra: agrega un arreglo vacío llamado projects. Cuando el formulario esté completo, agrega el objeto al arreglo y muestra en consola la lista actualizada. Esto preparará el camino para los próximos capítulos de arreglos, objetos y CRUD.

Conclusión

Los formularios interactivos son el puente entre la intención del usuario y los datos de la aplicación. No se trata solo de capturar texto, sino de construir un flujo claro: pedir información, escuchar cambios, responder con mensajes útiles y preparar objetos que luego puedan guardarse o procesarse.

Cuando separas lectura, estado y presentación, el código se vuelve más limpio. El formulario deja de ser un bloque difícil de entender y se convierte en una pequeña conversación organizada entre HTML, CSS y JavaScript.

En el siguiente capítulo profundizaremos en validación de datos. Veremos cómo revisar formatos, longitudes, campos requeridos y reglas más específicas sin convertir el formulario en una lista de alertas incómodas.

Fuentes consultadas

• MDN Web Docs: Web forms
• MDN Web Docs: submit event
• MDN Web Docs: FormData
• MDN Web Docs: HTMLFormElement reset
• MDN Web Docs: aria-live