Breaking

Post Top Ad

Your Ad Spot

martes, 14 de enero de 2020

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
  • disparar filtros para recortar 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 en sí:
<form>
  ...
  <input type="submit">
</form>
Podemos anular este comportamiento estableciendo el actionatributo del elemento de formulario, utilizando el método HTML definido por el methodatributo, que por defecto es GET:
<form action="/contact" method="POST">
  ...
  <input type="submit">
</form>
Al hacer clic en el elemento de entrada de envío, el navegador realiza una solicitud POST a la /contactURL en el mismo origen (protocolo, dominio y puerto).
Usando JavaScript podemos interceptar este evento, enviar el formulario de forma asincrónica (con XHR y Fetch ), y también podemos reaccionar ante eventos que suceden en elementos de formulario individuales.

Interceptar un formulario enviar evento

Acabo de describir el comportamiento predeterminado de los formularios, sin JavaScript.
Para comenzar a trabajar con formularios con JavaScript, debe interceptar el submitevento en el elemento de formulario:
const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
})
Ahora, dentro de la función de controlador de eventos de envío, llamamos al event.preventDefault()método para evitar el comportamiento predeterminado y evitar un envío de 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.

Trabajando con eventos de elementos de entrada

Tenemos varios eventos que podemos escuchar en elementos de formulario
  • input disparado 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 de los inputelementos de texto textarea, se dispara solo una vez cuando el elemento pierde el foco (no para cada carácter escrito)
  • cut se dispara cuando el usuario corta el texto del elemento de formulario
  • copy se dispara cuando el usuario copia texto del elemento de formulario
  • paste se dispara cuando el usuario pega texto en el elemento del formulario
  • focus disparado cuando el elemento de forma se enfoca
  • blur se dispara cuando el elemento del formulario pierde el foco
Aquí hay un ejemplo de demostración de formulario en Codepen:

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas