JS: DOM API
2026-02-26 16:45 Diff
https://ru.hexlet.io/courses/js-dom/lessons/forms/theory_unit

В современных фронтенд-приложениях существует два подхода при работе с формами. В некоторых изменение данных на странице происходит сразу по мере изменения формы. У такой формы нет кнопок «сохранить» или «отправить». Здесь каждый элемент формы связан с обработчиком, который отслеживает любые изменения. Типичный пример – фильтрация данных на странице.

В более классическом варианте отправка формы происходит по кнопке. В таком случае нужно использовать событие submit самой формы:

Почему не повесить событие click на кнопку отправки формы? Технически так сделать можно, но тогда сломается стандартное поведение. Браузеры позволяют отправлять формы с клавиатуры, нажав клавишу Enter. В таком случае кнопка не нажимается, а форма отправляется.

Сама обработка формы обычно строится так:

  • извлекаются данные формы
  • выполняется запрос на сервер или меняются данные в приложении
  • изменяется внешний вид

Второй и третий пункт мы рассмотрим в следующих уроках, когда поговорим про AJAX. А здесь поговорим о первом — об извлечении данных формы.

Существует два подхода. Сначала рассмотрим неправильный:

При таком подходе придется работать с каждым элементом формы индивидуально: сначала извлечь их из DOM, а затем — собрать значения. Делать так не нужно, потому что есть правильный способ.

Правильный способ – использовать специальный объект FormData, доступный в браузере. Он позволяет получить значение всех полей формы, для которых указан атрибут name:

Извлечение элементов формы

Иногда все же приходится обращаться к элементам формы напрямую. Например, при реализации валидации во время изменения формы, а не ее отправки.

В таких случаях работа с элементами формы идет напрямую:

Если элементов много, то код, выполняющий запросы в DOM, станет громоздким. Этого можно избежать, если использовать возможности DOM, относящиеся к формам. Каждая форма содержит свойство elements, которое возвращает объект со всеми элементами данной формы. Ключи объекта – имена элементов, значения – сами элементы: