CodeAventura
JavaScript en el DOM
▸Formularios y validación▸Capturar datos de formulario

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Capturar formulario</title>
  </head>
  <body>
    <form id="form-perfil">
      <input name="nombre" type="text" placeholder="Tu nombre" />
      <select name="rol">
        <option value="frontend">Frontend</option>
        <option value="backend">Backend</option>
      </select>
      <button type="submit">Guardar perfil</button>
    </form>

    <p id="resumen"></p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
14 / 16Capturar datos de formulario
Anterior

Capturar datos de formulario

De la UI a la lógica

Un formulario no sirve solo para "verse bonito". Su valor real está en capturar datos y transformarlos en acciones.

Para eso tienes dos opciones:

  1. Consultar cada input individualmente con querySelector
  2. Usar FormData: una API estándar que lee todos los campos de golpe

La segunda opción es más limpia cuando el formulario tiene varios campos.

Por qué FormData funciona así

FormData lee automáticamente los campos del formulario usando su atributo name. Si un campo no tiene name, FormData lo ignora.

Flujo recomendado

  1. Escuchar submit
  2. Hacer preventDefault
  3. Crear new FormData(event.target)
  4. Leer campos con .get("nombre-del-campo")
  5. Mostrar o procesar resultados

get vs getAll

  • data.get("campo") — devuelve el primer valor (el más común)
  • data.getAll("campo") — devuelve array con todos los valores (útil para checkboxes con el mismo name)

Cuándo usar FormData vs consultar inputs

SituaciónMejor opción
Formulario con varios camposFormData
Un solo campo o referencia ya guardadainput.value directo
Enviar datos a una API con fetchFormData (compatible de forma nativa)

Su ventaja extra

FormData es directamente compatible con fetch para enviar datos a una API:

Sin necesitar convertir nada a JSON ni construir el cuerpo manualmente.

Tu desafío 🚀

  1. Captura el submit de #form-perfil
  2. Evita la recarga con preventDefault
  3. Usa FormData para leer nombre y rol
  4. Muestra el resumen en pantalla

Capturar datos bien es el primer paso para construir producto real.