Manejo de formularios en JavaScript

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 por defecto es la URL de la página misma:

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

Podemos anular este comportamiento configurando el actionatributo del elemento de formulario, utilizando el método HTML definido por el methodatributo, cuyo valor predeterminado 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 a eventos que suceden en elementos individuales del formulario.

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, es necesario interceptar el submitevento en el elemento del 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 al event.preventDefault()método para evitar el comportamiento predeterminado y evitar que un envío de formulario vuelva 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.Te recomendamos Juguetes educativos

Trabajar con eventos de elementos de entrada

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

• inputSe activa en los elementos del formulario cuando se cambia el valor del elemento.
• changeSe activa en los elementos de formulario cuando se modifica el valor del elemento. En el caso de inputlos elementos de texto y textarea, se activa solo una vez cuando el elemento pierde el foco (no por cada carácter escrito)
• cutSe activa cuando el usuario corta texto del elemento de formulario.
• copySe activa cuando el usuario copia texto del elemento de formulario.
• pasteSe activa cuando el usuario pega texto en el elemento de formulario.
• focusSe activa cuando el elemento del formulario obtiene el foco
• blurSe activa cuando el elemento del formulario pierde el foco.

Aquí hay una demostración de formulario de muestra en Codepen: https://codepen.io/flaviocopes/pen/zQrqNy/

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript

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 Descubra los

programar

es

2025-01-21

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente