Propiedades y métodos de formularios en JavaScript

Introducción al manejo de formularios en JavaScript

Los formularios son la principal forma en que los usuarios envían datos a una página web, por lo que acceder a sus controles de manera confiable desde JavaScript es una habilidad fundamental. El DOM expone los formularios y los campos que contienen mediante un conjunto de colecciones dedicadas (document.forms, form.elements) y propiedades (input.value, checkbox.checked, select.value), además de algunos métodos imperativos (submit(), reset(), focus()).

Este capítulo explica cómo acceder a formularios y controles, leer y escribir sus valores, reaccionar a la entrada del usuario con los eventos input y change, y ejecutar acciones comunes mediante código. Para una visión más amplia de dónde se ubican los formularios en el árbol del documento, consulta Trabajar con formularios en el DOM.

Acceso a formularios y sus controles

`document.forms` y `form.elements`

Todos los formularios de una página están disponibles a través de document.forms. Esta es una colección especial que puedes indexar por número (document.forms[0]) o, de forma más legible, por el atributo name del formulario (document.forms.loginForm o document.forms['loginForm']).

Una vez que tienes el formulario, form.elements te proporciona sus controles con nombre de la misma manera — por índice o por el name del control. El acceso por nombre es el estilo recomendado porque sigue funcionando aunque agregues o reordenes campos:

const form = document.forms.loginForm;     // a <form name="loginForm">
const userField = form.elements.username;  // an <input name="username">
// Shortcut: named controls are also exposed directly on the form
const samePassword = form.password;        // <input name="password">

Cuando varios controles comparten un mismo name (botones de radio), form.elements.name devuelve una RadioNodeList — una colección cuyo .value es el valor del botón actualmente seleccionado. Un <fieldset> también tiene su propia colección elements, por lo que puedes tratar una sección agrupada como un mini-formulario.

A continuación se muestra un ejemplo completo que accede a un formulario y sus entradas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript Form Example</title>
</head>
<body>
    <form name="loginForm">
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <div style="margin-top:15px;" id="output"></div>

    <script>
        const form = document.forms['loginForm'];
        const username = form.elements['username'];
        const password = form.elements['password'];
        form.onsubmit = function(event) {
            const output = document.getElementById('output');
            output.textContent = 'Username: ' + username.value + ' Password: ' + password.value;
            event.preventDefault(); // Prevent form submission
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

Este script intercepta el envío del formulario, muestra el nombre de usuario y la contraseña en un div de la página y evita que el formulario se envíe al servidor.

Lectura y escritura de valores de controles

Cada tipo de control expone su estado actual a través de una propiedad ligeramente diferente — saber cuál leer es la mitad del trabajo:

Control	Leer / escribir con	Notas
`text`, `password`, `email`, `textarea`	`.value`	Siempre es un string
`checkbox`	`.checked` (boolean)	`.value` es el valor del atributo, no si está marcado
`radio` (grupo)	`form.elements.groupName.value`	Valor del botón marcado, o `""`
`<select>`	`.value`	Valor del `<option>` seleccionado; `.options[i]` y `.selectedIndex` dan acceso más detallado

input.value = 'hello';            // text-like fields
checkbox.checked = true;          // tick a checkbox
select.value = 'medium';          // selects the matching <option>
const chosen = select.options[select.selectedIndex].text; // visible label

Un error frecuente en principiantes es leer checkbox.value para saber si un checkbox está marcado — eso devuelve el string estático del atributo ("on" por defecto), no su estado de marcado. Usa .checked en su lugar.

Trabajar con valores de entrada

Manipular valores de entrada es sencillo en JavaScript. A continuación se muestra cómo puedes establecer valores dinámicamente y mostrarlos en tu página web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Input Value Example</title>
</head>
<body>
    <form name="userForm">
        <input type="text" name="firstName" placeholder="First Name" />
        <input type="text" name="lastName" placeholder="Last Name" />
        <input type="submit" value="Submit" />
    </form>
    <div id="welcomeMessage"></div>

    <script>
        const form = document.forms['userForm'];
        const firstName = form.elements['firstName'];
        const lastName = form.elements['lastName'];
        firstName.value = 'John';
        lastName.value = 'Doe';

        form.onsubmit = function(event) {
            const welcomeMessage = document.getElementById('welcomeMessage');
            welcomeMessage.textContent = 'Hello, ' + firstName.value + ' ' + lastName.value + '!';
            event.preventDefault(); // Prevents the form from submitting to a server
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

En este ejemplo, el nombre y el apellido están preestablecidos como 'John' y 'Doe', respectivamente. Al enviar el formulario, se muestra un saludo en la página, lo que demuestra tanto cómo establecer como recuperar valores de entrada. Para formularios más complejos, considera la API FormData para serializar fácilmente los datos del formulario en pares clave-valor sin tener que acceder manualmente a cada elemento.

Técnicas avanzadas de formularios

Validación de formularios

La validación de formularios en tiempo real es fundamental para la experiencia del usuario. A continuación se muestra cómo validar una dirección de correo electrónico antes de enviar el formulario. Ten en cuenta que la validación de correo electrónico de HTML5 es básica y a menudo se complementa con expresiones regulares personalizadas o librerías en producción, ya que puede aceptar incorrectamente direcciones incompletas como 'w3docs@gmail' (si quieres saber cómo solucionar esto, puedes leer la API de validación de JavaScript):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Form Validation Example</title>
</head>
<body>
    <form name="registrationForm">
        <input type="email" name="email" placeholder="Enter your email" required />
        <input type="submit" value="Register" />
    </form>
    <div id="message"></div>

    <script>
        const form = document.forms['registrationForm'];
        const email = form.elements['email'];

        form.onsubmit = function(event) {
            // Note: HTML5 email validation is basic and often supplemented by custom regex or libraries for production.
            // It may incorrectly accept incomplete addresses like 'w3docs@gmail'.
            if (!email.checkValidity()) {
                document.getElementById('message').textContent = "Please enter a valid email address.";
                event.preventDefault();
                return;
            }
            document.getElementById('message').textContent = "Registration successful!";
            event.preventDefault(); // Prevents actual form submission
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

En este script, el formulario valida la entrada de correo electrónico al enviarlo. Muestra un mensaje que indica si el registro fue exitoso o si hay un error, todo sin enviar datos al servidor. Este ejemplo también pone de manifiesto una limitación de la validación de correo electrónico de HTML5, que no garantiza completamente los formatos de dominio correctos.

Reaccionar a los eventos `input` y `change`

Dos eventos cubren la mayoría de las interacciones con formularios:

input se dispara en cada pulsación de tecla o cambio de valor — ideal para vistas previas en tiempo real, contadores de caracteres y validación mientras se escribe.
change se dispara solo cuando el usuario confirma un cambio: cuando un campo de texto pierde el foco después de editar, o inmediatamente cuando se activa un checkbox, radio o <select>. Úsalo cuando reaccionar a cada pulsación sería innecesario.

search.addEventListener('input', () => console.log(search.value)); // every keystroke
country.addEventListener('change', () => console.log(country.value)); // on selection

El siguiente ejemplo usa input para mostrar un contador de caracteres en tiempo real mientras el usuario escribe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Input Event Example</title>
</head>
<body>
  <form name="bioForm">
    <textarea name="bio" maxlength="100" placeholder="Tell us about yourself"></textarea>
  </form>
  <div id="counter">0 / 100</div>

  <script>
    const bio = document.forms.bioForm.elements.bio;
    const counter = document.getElementById('counter');
    bio.addEventListener('input', function () {
      counter.textContent = bio.value.length + ' / 100';
    });
  </script>
</body>
</html>

Para conocer la mecánica más profunda del envío — incluida la diferencia entre el evento submit y el método form.submit() — consulta Formularios: evento y método submit.

Métodos de formulario: `submit()`, `reset()` y `focus()`

Los formularios y los controles también ofrecen métodos imperativos:

form.submit() envía el formulario mediante código. Advertencia importante: no dispara el evento submit, por lo que se omite cualquier validación vinculada a ese evento. Prefiere form.requestSubmit() cuando necesites que se ejecuten la validación y el evento.
form.reset() restaura todos los controles a su valor inicial.
element.focus() mueve el cursor del teclado a un control — perfecto para resaltar el primer campo no válido. Su contraparte es blur(). Consulta Enfoque: focus / blur para más detalles.

const form = document.forms.signup;
if (!form.email.value) {
  form.email.focus();   // send the user straight to the empty field
} else {
  form.requestSubmit(); // submit AND run the submit event + validation
}
form.reset();           // clear the form back to defaults

Manejo de eventos de formulario

A continuación se muestra cómo puedes gestionar eventos de formulario de forma dinámica:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Events Example</title>
  </head>
  <body>
    <div style="display: flex; justify-content: center; align-items: center">
      <form
        style="display: flex; flex-direction: column; gap: 5px"
        name="contactForm"
      >
        <input type="text" name="fullName" placeholder="Full Name" required />
        <textarea name="message" placeholder="Your Message"></textarea>
        <input type="submit" value="Send" />
      </form>
    </div>
    <div
      style="display: flex; justify-content: center; align-items: center"
      id="confirmation"
    ></div>

    <script>
      const form = document.forms["contactForm"];

      form.onsubmit = function (event) {
        const name = form.elements["fullName"].value;
        const message = form.elements["message"].value;
        document.getElementById("confirmation").textContent =
          "Thank you, " + name + ", we received your message!";
        event.preventDefault(); // Prevents form from submitting to a server
      };
    </script>
  </body>
</html>

Pruébalo tú mismo »

Este ejemplo proporciona retroalimentación inmediata al usuario mostrando un mensaje de confirmación cuando se envía el formulario. Demuestra de manera efectiva cómo JavaScript puede gestionar eventos de formulario para mejorar la interacción sin necesidad de comunicación con el servidor.

Conclusión

Dominar las propiedades y métodos de formularios de JavaScript mejora la funcionalidad y la interacción del usuario en las aplicaciones web. Accede a los formularios con document.forms, dirige sus controles por nombre con form.elements, lee el estado con la propiedad adecuada (value, checked, selectedIndex), responde a los eventos input y change, y controla el formulario con submit(), reset() y focus().

Para profundizar más, continúa con estos capítulos relacionados:

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas respecto a los formularios y sus métodos en JavaScript?

La colección `document.forms` permite acceder a los formularios del documento usando tanto el nombre como el índice numérico.Con `form.elements` puedes acceder a elementos individuales dentro de un formulario usando su atributo name.`form.submit()` dispara el evento submit del formulario y se usa para validar los datos antes de enviarlos al servidor.El elemento `fieldset` dentro de un formulario actúa como un subformulario y contiene su propia propiedad `elements`.Cambiar el nombre de un elemento de entrada mediante JavaScript actualiza inmediatamente la colección `form.elements` para reflejar el nuevo nombre.

Introducción al manejo de formularios en JavaScript

Acceso a formularios y sus controles

document.forms y form.elements

Lectura y escritura de valores de controles

Trabajar con valores de entrada

Técnicas avanzadas de formularios

Validación de formularios

Reaccionar a los eventos input y change

Métodos de formulario: submit(), reset() y focus()

Manejo de eventos de formulario

Conclusión

Práctica

`document.forms` y `form.elements`

Reaccionar a los eventos `input` y `change`

Métodos de formulario: `submit()`, `reset()` y `focus()`