Формы

Формы — главный способ получить данные от пользователя: вход на сайт, заказ, поиск, комментарий. JavaScript перехватывает отправку формы, читает поля, проверяет их и сам решает, что делать дальше: показать ошибку или отправить данные на сервер.

Событие submit

Когда пользователь нажимает кнопку внутри формы или клавишу Enter в поле, у формы срабатывает событие submit. По умолчанию браузер после этого перезагружает страницу, поэтому такое поведение отменяют методом preventDefault():

<form>
  <input placeholder="Поиск">
  <button>Найти</button>
</form>
 
<script>
  const form = document.querySelector('form');
 
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log('Форма отправлена');
  });
</script>

Подписываются именно на submit формы, а не на клик по кнопке: так сработает и Enter.

Чтение полей

Полям дают атрибут name, и тогда форма открывает доступ к ним по этому имени. Текст поля лежит в value:

<form>
  <input name="city" value="Берлин">
  <button>Сохранить</button>
</form>
 
<script>
  const form = document.querySelector('form');
 
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log(form.elements.city.value); // Берлин
  });
</script>

FormData

Объект FormData собирает сразу все поля формы. Функция Object.fromEntries() превращает его в обычный объект «имя → значение»:

<form>
  <input name="name" value="Анна">
  <input name="email" value="anna@example.com">
  <button>Отправить</button>
</form>
 
<script>
  const form = document.querySelector('form');
 
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(form));
 
    console.log(data.name, data.email); // Анна anna@example.com
  });
</script>

Такой объект удобно отправить на сервер через fetch().

Флажки и списки

У флажка (checkbox) важен не value, а checked — true или false. У выпадающего списка select в value лежит значение выбранного пункта:

<form>
  <select name="size">
    <option value="s">Маленький</option>
    <option value="m" selected>Средний</option>
  </select>
  <label><input type="checkbox" name="gift"> Подарочная упаковка</label>
  <button>Заказать</button>
</form>
 
<script>
  const form = document.querySelector('form');
 
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log(form.elements.size.value); // m
    console.log(form.elements.gift.checked); // false
  });
</script>

Проверка данных

Перед отправкой данные проверяют и, если что-то не так, показывают сообщение рядом с формой. Метод reset() очищает форму после успешной отправки:

<form>
  <input name="password" type="password" placeholder="Пароль">
  <button>Войти</button>
</form>
<p id="error"></p>
 
<script>
  const form = document.querySelector('form');
  const error = document.querySelector('#error');
 
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const password = form.elements.password.value;
 
    if (password.length < 8) {
      error.textContent = 'Пароль должен быть не короче 8 символов';
      return;
    }
    error.textContent = '';
    console.log('Вход выполнен');
    form.reset();
  });
</script>

Простые проверки умеет и сам браузер — атрибуты required, minlength, type="email".

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

Забыть, что value — всегда строка, даже у поля type="number". Сложение двух полей склеит строки:

<input id="a" type="number" value="2">
<input id="b" type="number" value="3">
 
<script>
  const a = document.querySelector('#a').value;
  const b = document.querySelector('#b').value;
 
  console.log(a + b); // 23
  console.log(Number(a) + Number(b)); // 5
</script>

Перед вычислениями превращайте значение в число через Number() или используйте свойство valueAsNumber.

Спасибо, что читаете!