El formulario se envía haciendo clic en un botón con el atributo type="submit" o pulsando la tecla Enter mientras se está en cualquiera de sus campos de texto. El evento submit se puede utilizar para validar el formulario antes de enviarlo, ya que el objeto del evento tiene muchas propiedades útiles asociadas a los elementos del formulario. Enviar un formulario recarga la página, así que recuerda anular la acción por defecto con preventDefault().

HTML

<form class="form" autocomplete="off">
  <input type="text" name="login" placeholder="Login">
  <input type="password" name="password" placeholder="Password">
  <button class="btn" type="submit">Register</button>
</form>

Javascript

const registerForm = document.querySelector(".form");

registerForm.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const login = form.elements.login.value;
  const password = form.elements.password.value;
  
  if (login === "" || password === "") {
    return console.log("Please fill in all the fields!");
  }

  console.log(`Login: ${login}, Password: ${password}`);
  form.reset();
}

Importante:

La propiedad elements del elements DOM del formulario contiene un objeto con enlaces a todos sus elementos que tienen un atributo name. Así que en el ejemplo recuperamos el valor de los campos haciendo referencia a login.value y password.value.

Elements es una propiedad disponible solo en elementos <form>. Sirve para acceder fácilmente a todos los controles de formulario (inputs, selects, textareas, etc.) dentro de ese formulario, organizados en forma de colección

• Se produce después de que se haya modificado un elemento del formulario.
• Para los campos de texto o textarea, el evento no se producirá cada vez que se introduzca un carácter, sino cuando se pierda el enfoque
• otros elementos, como select, casillas de verificación y botones de radio, el evento change se activa inmediatamente cuando se selecciona un valor.

Ejemplo

HTML

<p>
  Selected option text: <span class="text-output">none</span>
<p>
<p>
  Selected option value: <span class="value-output">none</span>
<p>

  <select class="pizza-select">
    <option value="four_meats">Four Meats</option>
    <option value="royal_cheese">Royal Cheese</option>
    <option value="vegetarian">Vegetarian</option>
    <option value="smoked_salmon">Smoked Salmon</option>
  </select>

Javascript

const select = document.querySelector(".pizza-select");
const textOutput = document.querySelector(".text-output");
const valueOutput = document.querySelector(".value-output");

select.addEventListener("change", setOutput);

function setOutput(event) {
  const selectedOptionValue = event.currentTarget.value;
  const selectedOptionIndex = event.currentTarget.selectedIndex;
  const selectedOptionText =
    event.currentTarget.options[selectedOptionIndex].text;

  textOutput.textContent = selectedOptionText;
  valueOutput.textContent = selectedOptionValue;
}

Ocurre sólo en los campos de texto y textarea, y se crea cada vez que se cambia el valor de un elemento, sin esperar a que se pierda el enfoque. En la práctica, input es el evento más importante para trabajar con los campos de texto de los formularios.

Ejemplo

HTML

<input type="text" class="text-input" />
<p>Text field value: <span class="output"></span></p>

Javascript

const textInput = document.querySelector(".text-input");
const output = document.querySelector(".output");

textInput.addEventListener("input", (event) => {
  output.textContent = event.currentTarget.value;
});

El elemento obtiene el enfoque cuando se hace clic con el ratón o se salta con la tecla Tab. El momento de conseguir el enfoque y de perderlo es muy importante, cuando conseguimos el enfoque y podemos cargar los datos para el autorrelleno, empezar a rastrear los cambios, etc. Cuando se pierde el enfoque, podemos comprobar los datos introducidos.

Cuando un elemento está enfocado, se produce un evento focus, y cuando el enfoque desaparece, por ejemplo, el usuario hace clic en otra parte de la pantalla, se produce un evento blur. El enfoque puede ser activado o cancelado programáticamente llamando a los métodos focus() y blur() del elemento con el mismo nombre.

Ejemplo: HTML

<button type="button" data-action="set">Set focus to input</button>
<button type="button" data-action="remove">Remove focus from input</button>
<br><br>
<input type="text" class="text-input" />

Javascript

const textInput = document.querySelector(".text-input");
const setFocusBtn = document.querySelector('[data-action="set"]');
const removeFocusBtn = document.querySelector('[data-action="remove"]');

setFocusBtn.addEventListener("click", () => {
  textInput.focus();
});

removeFocusBtn.addEventListener("click", () => {
  textInput.blur();
});

textInput.addEventListener("focus", () => {
  textInput.value = "This input has focus";
});

textInput.addEventListener("blur", () => {
  textInput.value = "";
});

Siguente: Tipos de eventos