Formularios de JavaScript en el DOM
Los formularios son componentes fundamentales de las aplicaciones web, que permiten la interacción del usuario y la recopilación de datos. Esta guía te ayudará a comprender cómo acceder a los elementos del formulario, obtener y establecer valores de entrada, manejar eventos de formulario y validar formularios.
Acceso a los elementos del formulario
Selección de elementos del formulario
Los elementos del formulario se pueden seleccionar utilizando varios métodos como getElementById, getElementsByName, getElementsByTagName y querySelector.
<!DOCTYPE html>
<html>
<head>
<title>Selecting Form Elements</title>
</head>
<body>
<h4>Fill the form inputs, and press 'Show Input Values' button.</h4>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
</form>
<button id="showInputs">Show Input Values</button>
<script>
// Select elements by ID
const username = document.getElementById('username');
const email = document.getElementById('email');
const showInputsButton = document.getElementById('showInputs');
// Using querySelector for selection
const emailByQuery = document.querySelector('#email');
showInputsButton.addEventListener('click', () => {
alert(`Username: ${username.value}, Email: ${emailByQuery.value}`);
});
</script>
</body>
</html>Este ejemplo muestra cómo seleccionar elementos del formulario utilizando varios métodos y mostrar sus valores en una alerta al hacer clic en el botón "Mostrar valores de entrada".
Obtención y establecimiento de valores de entrada
Acceso y modificación de valores de entrada
Los valores de entrada se pueden acceder y modificar utilizando la propiedad value.
<!DOCTYPE html>
<html>
<head>
<title>Getting and Setting Input Values</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
<button type="button" id="showValues">Show Values</button>
<button type="button" id="setValues">Set New Values</button>
</form>
<script>
const username = document.getElementById('username');
const email = document.getElementById('email');
const showValuesButton = document.getElementById('showValues');
const setValuesButton = document.getElementById('setValues');
showValuesButton.addEventListener('click', () => {
alert(`Username: ${username.value}\nEmail: ${email.value}`);
});
setValuesButton.addEventListener('click', () => {
username.value = 'newUsername';
email.value = '[email protected]';
alert('Values have been set to new values.');
});
</script>
</body>
</html>Este ejemplo muestra cómo obtener y establecer los valores de los campos de entrada. Al hacer clic en "Mostrar valores" se muestran los valores actuales de entrada, y "Establecer nuevos valores" los cambia y muestra una alerta de confirmación.
Eventos de formulario
Manejo del envío de formularios con eventos submit y reset
Los formularios pueden desencadenar eventos como submit y reset, los cuales se pueden manejar para realizar acciones como validación o procesamiento de datos.
<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<script>
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
alert('Form submitted!');
// Perform form validation or data processing here
});
form.addEventListener('reset', () => {
alert('Form reset!');
});
</script>
</body>
</html>Este ejemplo muestra cómo manejar los eventos submit y reset de un formulario para realizar acciones como prevenir el comportamiento predeterminado, validación y procesamiento de datos.
Manejo de interacciones del usuario en tiempo real
Además de submit y reset, los formularios suelen utilizar eventos input, change, focus y blur para reaccionar a las interacciones del usuario en tiempo real. El evento input se dispara inmediatamente mientras el usuario escribe, mientras que change se dispara cuando el elemento pierde el enfoque después de que su valor ha cambiado.
<script>
const inputField = document.getElementById('username');
inputField.addEventListener('input', (e) => {
console.log('User is typing:', e.target.value);
});
inputField.addEventListener('change', (e) => {
console.log('Value changed:', e.target.value);
});
</script>Validación y prevención del comportamiento predeterminado
Validación de datos del formulario
Se puede realizar una validación del lado del cliente para garantizar la corrección de los datos antes del envío del formulario.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" required />
<input type="email" id="email" name="email" placeholder="Email" required />
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
if (!username || !email) {
alert('Please fill in all fields.');
return;
}
// Modern approach: use checkValidity() for built-in validation
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// Fallback/custom regex validation if needed
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return;
}
alert('Form submitted successfully!');
});
</script>
</body>
</html>Este ejemplo demuestra la validación de formularios del lado del cliente, incluidos los campos obligatorios y la validación del formato de correo electrónico, y la prevención del envío del formulario si la validación falla.
INFO
Utiliza querySelector y querySelectorAll para una selección eficiente de elementos del formulario, y siempre valida los valores de entrada antes del envío del formulario para garantizar la integridad de los datos y una experiencia de usuario fluida.
WARNING
La validación del lado del cliente mejora la experiencia del usuario, pero no sustituye a la validación del lado del servidor. Siempre valida y sanitiza los datos en tu backend también.
Conclusión
Trabajar con formularios en JavaScript implica acceder a los elementos del formulario, obtener y establecer valores de entrada, manejar eventos de formulario y validar los datos del formulario. Al dominar estas técnicas, puedes crear formularios web dinámicos y receptivos que mejoren la interacción del usuario y la recopilación de datos.
Práctica
¿Cuáles de las siguientes afirmaciones sobre el manejo de formularios en JavaScript son verdaderas?