Manejo de formularios en JavaScript

Los formularios son una parte extremadamente importante de HTML y la plataforma web. Permiten que los usuarios puedan interactuar con la página y

• buscar algo en el sitio
• activar filtros para recortar las páginas de resultados
• enviar información

y mucho, mucho más.

De forma predeterminada, los formularios envían su contenido a un punto final del lado del servidor, que de forma predeterminada es la URL de la página:

<form>
  ...
  <input type="submit">
</form>

Podemos anular este comportamiento estableciendo elactionatributo del elemento de formulario, utilizando el método HTML definido por elmethodatributo, que por defecto esGET:

<form action="/contact" method="POST">
  ...
  <input type="submit">
</form>

Al hacer clic en el elemento de entrada enviar, el navegador realiza una solicitud POST al/contactURL del mismo origen (protocolo, dominio y puerto).

Usando JavaScript podemos interceptar este evento, enviar el formulario de forma asincrónica (conXHRyHa podido recuperar), y también podemos reaccionar a eventos que suceden en elementos de formulario individuales.

Interceptar un evento de envío de formulario

Acabo de describir el comportamiento predeterminado de los formularios, sin JavaScript.

Para comenzar a trabajar con formularios con JavaScript, debe interceptar elsubmitevento en el elemento de formulario:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
})

Ahora, dentro de la función del controlador de eventos de envío, llamamos alevent.preventDefault()método para evitar el comportamiento predeterminado y evitar el envío de un formulario para volver a cargar la página:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
  event.preventDefault()
})

En este punto, hacer clic en el botón enviar evento en el formulario no hará nada, excepto darnos el control.

Trabajar con eventos de elementos de entrada

Tenemos una serie de eventos que podemos escuchar en los elementos del formulario.

• inputdisparado en elementos de formulario cuando se cambia el valor del elemento
• changedisparado en elementos de formulario cuando se cambia el valor del elemento. En el caso del textoinputelementos ytextarea, se dispara solo una vez cuando el elemento pierde el foco (no para cada carácter escrito)
• cutdisparado cuando el usuario corta el texto del elemento del formulario
• copydisparado cuando el usuario copia texto del elemento de formulario
• pastedisparado cuando el usuario pega texto en el elemento del formulario
• focusdisparado cuando el elemento de formulario gana foco
• blurdisparado cuando el elemento del formulario pierde el foco

Aquí hay una demostración de formulario de muestra en Codepen:

Ver la plumaFormulario de demostración de eventospor Flavio Copes (@flaviocopios) enCodePen.