Формы JS: DOM API

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

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

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

Некоторые разработчики отправляют формы не по событию submit, а по клику на кнопке отправки формы. Так делать не нужно.

Сама обработка формы строится обычно так (упрощенно):

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

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

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

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

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

Правильный способ – использовать специальный объект FormData, доступный в браузере:

<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, которое возвращает объект cо всеми элементами данной формы. Ключи объекта – имена элементов, значения – сами элементы.

<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', () => {
  // Обработка
});

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов

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

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

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

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

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия

Фронтенд-разработчик

Разработка фронтенд-компонентов веб-приложений
16 июня 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».