Frontend Formula

Работа с формами



В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. Немножко приправим стандартные HTML-атрибуты динамикой на JS.



👉 Настроим отправку формы без перезагрузки страницы

Для «предотвращения» срабатывания событий мы можем использовать метод preventDefault() на объекте события. В нашем случае событием будет отправка формы — submit.



👉 Собираем данные из формы

Напишем функцию serializeForm. Аргумент функции — это элемент формы. Именно элемент — не селектор, а конкретный узел в DOM-дереве.



👉 Формат данных

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



👉 Блокируем кнопку отправки на невалидной форме

Проверять валидность формы будем с помощью метода checkValidity() формы. Он запускает стандартные проверки. Результат проверки будем использовать для того чтобы установить свойство disabled кнопки в значение true и false.



Статья: https://doka.guide/js/deal-with-forms/



#js #дока



👉 @frontend_formula