Formularios JavaScript en el DOM

Los formularios son componentes fundamentales de las aplicaciones web, ya que permiten la interacción del usuario y la recopilación de datos. Esta guía cubre las habilidades prácticas del DOM que necesitas para trabajar con ellos: acceder a formularios y elementos de entrada, leer y escribir valores de campos, recopilar todos los datos a la vez con FormData, reaccionar a eventos de formulario y validar la entrada del usuario antes del envío.

Si eres nuevo en el DOM, comienza con Seleccionar Elementos del DOM e Introducción a los Eventos del Navegador, y luego vuelve aquí.

Acceder a Elementos de Formulario

Seleccionar Elementos de Formulario

Puedes acceder a los elementos de formulario con los mismos métodos del DOM que usas para cualquier nodo: getElementById, getElementsByName, getElementsByTagName y querySelector / querySelectorAll. Para la mayoría de los casos, prefiere getElementById (más rápido, cuando controlas el marcado) o querySelector (más flexible, admite cualquier selector CSS).

<!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>

Pruébalo tú mismo »

Este ejemplo demuestra cómo seleccionar elementos de formulario usando varios métodos y mostrar sus valores en una alerta cuando se hace clic en el botón "Show Input Values".

Usar la Colección document.forms

Cada formulario de una página también está disponible a través de la colección incorporada document.forms, y cada campo con nombre dentro de un formulario es accesible como propiedad de ese formulario. Esta suele ser la forma más concisa de leer valores sin llamar a getElementById para cada campo.

// <form name="userForm">
//   <input name="username">
//   <input name="email">
// </form>

const form = document.forms.userForm;     // or document.forms[0]
console.log(form.username.value);          // value of the username field
console.log(form.elements['email'].value); // same via the elements collection

La colección form.elements contiene todos los controles (inputs, selects, textareas, botones) que pertenecen al formulario, indexados tanto por posición como por name. Consulta Propiedades y Métodos de Formulario para ver la lista completa.

Obtener y Establecer Valores de Entrada

Acceder y Modificar Valores de Entrada

Se puede acceder y modificar los valores de entrada usando 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>

Pruébalo tú mismo »

Este ejemplo muestra cómo obtener y establecer los valores de los campos de entrada. Al hacer clic en "Show Values" se muestran los valores actuales de la entrada, y "Set New Values" los cambia y muestra una alerta de confirmación.

Eventos de Formulario

Manejar el Envío de Formularios con los Eventos Submit y Reset

Los formularios pueden disparar eventos como submit y reset, que pueden manejarse 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>

Pruébalo tú mismo »

Este ejemplo muestra cómo manejar los eventos submit y reset de un formulario para realizar acciones como prevenir el comportamiento predeterminado, la validación y el procesamiento de datos.

Manejar Interacciones del Usuario en Tiempo Real

Además de submit y reset, los formularios usan con frecuencia los 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 foco después de que su valor ha cambiado. Para una exploración más profunda, consulta Eventos: change, input, cut, copy, paste.

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

Recopilar Todos los Datos del Formulario con FormData

Leer cada campo manualmente está bien para dos entradas, pero para formularios más grandes el objeto FormData te permite recopilar todos los controles con nombre a la vez. También es la forma estándar de empaquetar datos para solicitudes fetch.

const form = document.getElementById('userForm');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const formData = new FormData(form);

    // Read a single field
    console.log(formData.get('username'));

    // Iterate over every name/value pair
    for (const [name, value] of formData.entries()) {
        console.log(`${name}: ${value}`);
    }

    // Convert to a plain object (handy for JSON APIs)
    const data = Object.fromEntries(formData.entries());
    console.log(data); // { username: '...', email: '...' }

    // Send it to a server
    // fetch('/api/users', { method: 'POST', body: formData });
});

Solo se incluyen los controles que tienen un atributo name, lo que refleja cómo un navegador envía un formulario de forma nativa.

Validación y Prevención del Comportamiento Predeterminado

Validar Datos del Formulario

Se puede realizar 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>

Pruébalo tú mismo »

Este ejemplo demuestra la validación de formularios del lado del cliente, incluyendo campos obligatorios y validación del formato de correo electrónico, y la prevención del envío del formulario si la validación falla.

Información

Usa querySelector y querySelectorAll para una selección eficiente de elementos de 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.

Advertencia

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, recopilar datos con FormData, manejar eventos de formulario y validar los datos del formulario. Al dominar estas técnicas, puedes crear formularios web dinámicos y responsivos que mejoran la interacción del usuario y la recopilación de datos. Para ir más lejos, explora Formularios: evento y método submit y Propiedades y Métodos de Formulario.

Práctica

¿Cuáles de las siguientes afirmaciones sobre el manejo de formularios en JavaScript son verdaderas?

Puedes acceder a los elementos del formulario usando la colección document.forms.Se puede acceder a los elementos del formulario por su atributo name.El método submit() se puede usar para activar el envío del formulario mediante programación.El atributo action de un formulario especifica a dónde se deben enviar los datos del formulario.El método reset() limpia todas las entradas del usuario en el formulario.La propiedad innerHTML se usa comúnmente para obtener valores del formulario.