¿Cómo conseguir información de formularios?

Habrá casos en los que debemos conseguir información del usuario. Para ello utilizamos los métodos de entrada.

La forma más rápida de conseguir todos los datos dentro de un formulario es la siguiente:

• Encerramos todos los campos dentro de un <form>
• Identificamos cada uno de los campos con un atributo name (esto es obligatorio)
• Colocamos un botón tipo submit.

<form id="formulario">
  <label for="username">
    <span>Usuario</span>
    <input type="text" name="username" />
  </label>
  <label for="password">
    <span>Contraseña</span>
    <input type="password" name="password" />
  </label>
  <button type="submit">Enviar</button>
</form>

Para el script debemos:

• Obtener el elemento del formulario

const form = document.body.querySelector("#formulario");

• Agregar un evento de tipo submit

const form = document.body.querySelector("#formulario");

form.addEventListener("submit", (event) => {

});

• Tomar el evento de la función y llamar preventDefault()

const form = document.body.querySelector("#formulario");

form.addEventListener("submit", (event) => {
    event.preventDefault();
});

• Creamos una nueva instancia de FormData con el elemento que emitió el evento

const form = document.body.querySelector("#formulario");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
});

• Y cambiar convertir el resultado en objeto

const form = document.body.querySelector("#formulario");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData.entries());
    console.log(data);
});

Ahora podemos acceder a la información que el usuario pasó a los campos del formulario.

Si pasamos lolzini a Usuario y 123 a Contraseña vamos a obtener un objeto de la siguiente forma:

{
  username: "lolzini",
  password: "123"
}

En la siguiente sección está el ejemplo práctico. Podemos cambiar los valores o usar los que están por defecto y darle Enviar.

En la parte inferior está la consola que mostrará los datos en un objeto.

Comentarios

Rutas relacionadas

Web Dev (Frontend)

Artículos relacionados