Lee un formulario al enviarlo

La idea clave

Un formulario permite recibir datos. El evento submit se produce tanto al pulsar el botón de envío como al presionar Enter en el campo.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

document.querySelector('#formulario').addEventListener('submit', event => {
  event.preventDefault();
  const nombre = document.querySelector('#nombre').value.trim();
  document.querySelector('#saludo').textContent = 'Hola, ' + nombre;
});

Editar y probar este mismo ejemplo ↓

1. submit escucha el envío del formulario.
2. preventDefault evita que la página se recargue.
3. value obtiene lo escrito y trim quita espacios sobrantes; el saludo se muestra en la página.

Practica con código

Antes de empezar, piensa: ¿La página tendrá que recargarse para mostrar el saludo?

Cambia el saludo para que diga «Bienvenida, » seguido del nombre. Escribe Ada y envía el formulario.