Как получить данные из формы

Короткий ответ

new FormData(form) собирает все поля с атрибутом name. Object.fromEntries() превращает их в объект:

<form id="signup">
  <input name="name" value="Anna">
  <input name="email" value="anna@example.com">
  <button>Sign up</button>
</form>
<pre id="out"></pre>
<script>
  const form = document.getElementById('signup');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    document.getElementById('out').textContent = JSON.stringify(data);
  });
</script>

Флажки с одним именем

Object.fromEntries() оставляет только последнее значение повторяющегося имени. Для групп флажков используйте getAll():

const data = new FormData(form);
const toppings = data.getAll('topping');
const subscribe = data.has('subscribe');

Одно поле

Отдельное поле можно прочитать через коллекцию elements формы по его имени:

const email = form.elements.email.value.trim();

Частая ошибка

Поле без атрибута name в FormData не попадает. А неотмеченный флажок не отправляется вовсе, поэтому проверяйте его через has(), а не по значению.

<!-- not in FormData: there is no name -->
<input id="phone" value="555-1234">