Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Формы JS: DOM API

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

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

const form = document.querySelector(/* селектор формы */);
form.addEventListener('submit', (e) => {
   // Если хотим работать с формой через javascript,
   // то нужно остановить действие по умолчанию — отправку
  e.preventDefault();
  // Что-то делаем
});

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

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

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

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

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

const input = document.querySelector(/* селектор поля ввода */);
const form = document.querySelector(/* селектор формы */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const { value } = input;
  // Что-то делаем с данными
});

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

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

<form method="post">
  <input name="email" value="example@example.com">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>
const form = document.querySelector(/* селектор нужной формы */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Данные формы извлекаются из DOM автоматически
  // На вход передается элемент формы, взятый из события
  const formData = new FormData(e.target);
  // Теперь с ними можно работать
  formData.get('email'); // example@example.com
  // values() возвращает итератор, поэтому преобразуем в массив
  [...formData.values()]; // ['example@example.com', 'supersecret']
  // Тоже итератор
  [...formData.entries()];
  // [['email', 'example@example.com'], ['password', 'supersecret']]

  // Преобразование в обычный объект
  Object.fromEntries(formData);
  // { email: 'example@example.com', password: 'supersecret' }
});

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

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

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

const input = document.querySelector(/* селектор поля ввода */);
input.addEventListener('change', (e) => {
  // Логика
});

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

<form method="post">
  <input name="email" value="example@example.com">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>
const form = document.querySelector(/* селектор до формы */);
form.elements.email // <input name="email" ...
form.elements.password // <input name="password" ...

// Обработка
form.elements.email.addEventListener('change', () => {
  // Обработка
});

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 7 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 7 ноября
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
Старт 7 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»