9.1 Principales eventos de formularios
Para proporcionar funcionalidad a los formularios, es necesario entender y manejar los eventos que ocurren al interactuar el usuario con los elementos del formulario. A continuación, revisaremos en detalle los principales eventos de formularios en HTML, su manejo con JavaScript y ejemplos de su uso.
En HTML, los formularios pueden generar varios eventos que ocurren cuando el usuario interactúa con los elementos del formulario, como campos de entrada, botones, casillas de verificación y botones de opción. Los principales eventos de formularios incluyen:
- submit — evento de envío del formulario
- reset — evento de reinicio del formulario
- focus — evento cuando el elemento recibe el enfoque
- blur — evento cuando el elemento pierde el enfoque
- change — evento de cambio de valor del elemento del formulario
- input — evento de entrada de datos en el elemento del formulario
- select — evento de selección de texto en el elemento del formulario
9.2 Evento submit
El evento submit ocurre al enviar un formulario. Generalmente, sucede cuando el usuario presiona el botón "Submit" en el formulario. El manejo de este evento permite realizar la validación de datos antes de enviarlos al servidor, prevenir el envío del formulario en caso de errores de entrada y realizar otras acciones.
Ejemplo de manejo del evento submit:
<form id="my-form" action="/submit" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<button type="submit">Enviar</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Por favor, introduce un nombre de usuario.');
event.preventDefault(); // prevenimos el envío del formulario
} else {
alert(`Nombre de usuario recibido: ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Por favor, introduce un nombre de usuario.');
event.preventDefault(); // prevenimos el envío del formulario
}
});
9.3 Evento reset
El evento reset ocurre al restablecer un formulario a su estado inicial. Generalmente, esto sucede cuando el usuario presiona el botón "Reset". Manejar este evento puede ser útil para realizar acciones adicionales al restablecer el formulario, como limpiar mensajes de error.
Ejemplo de manejo del evento reset:
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Reiniciar</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Reiniciar</button>
</div>
</form>
<p id="log"></p>
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = '¡El formulario ha sido reiniciado!';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = '¡El formulario ha sido reiniciado!';
});
9.4 Eventos focus y blur
Los eventos focus y blur ocurren cuando un elemento de formulario recibe y pierde el enfoque, respectivamente. Estos eventos se utilizan a menudo para mejorar la interacción del usuario con el formulario, por ejemplo, para mostrar pistas o mensajes de error.
Ejemplo de manejo del evento focus:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Verás este consejo cuando el campo tenga el foco.
Será visible incluso después de cambiar el foco.
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Verás este consejo cuando el campo tenga el foco.
Será visible incluso después de cambiar el foco.
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
Ejemplo de manejo del evento blur:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
El error aparecerá solo si el campo está vacío después de perder el foco
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
El error aparecerá solo si el campo está vacío después de perder el foco
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Evento input
El evento input ocurre cada vez que el valor del elemento de formulario cambia, independientemente de si el elemento pierde el foco. Este evento se utiliza a menudo para la validación inmediata de la entrada del usuario, por ejemplo, al validar campos de entrada en tiempo real.
Ejemplo de manejo del evento input:
<html lang="es">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email válido";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email no válido";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Evento select
El evento select ocurre cuando el usuario selecciona texto en un elemento de formulario, como un campo de entrada o un área de texto. Este evento puede ser útil para realizar acciones al seleccionar texto, como mostrar un botón de copiar.
Ejemplo de manejo del evento select:
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Introduce texto:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Introduce texto:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = '¡Has seleccionado texto!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = '¡Has seleccionado texto!';
});
});
9.7 Evento change
El evento change ocurre cuando el valor del elemento de formulario cambia y el usuario abandona el elemento (pierde el foco). Este evento se utiliza a menudo para verificar cambios en los campos del formulario, como listas desplegables o casillas de verificación.
Ejemplo de manejo del evento change:
<form id="my-form">
<label for="color-select">Selecciona un color:</label>
<select id="color-select" name="color">
<option value="red">Rojo</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Has elegido el color: ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Has elegido el color: ' + selectElement.value);
});
});
GO TO FULL VERSION