Descubra los conceptos básicos para trabajar con formularios en HTML y 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 elaction
atributo del elemento de formulario, utilizando el método HTML definido por elmethod
atributo, 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/contact
URL 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 elsubmit
evento 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.
input
disparado en elementos de formulario cuando se cambia el valor del elementochange
disparado en elementos de formulario cuando se cambia el valor del elemento. En el caso del textoinput
elementos ytextarea
, se dispara solo una vez cuando el elemento pierde el foco (no para cada carácter escrito)cut
disparado cuando el usuario corta el texto del elemento del formulariocopy
disparado cuando el usuario copia texto del elemento de formulariopaste
disparado cuando el usuario pega texto en el elemento del formulariofocus
disparado cuando el elemento de formulario gana focoblur
disparado 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.
Tech Wiki Online!