[ITEM 2] QUESTION: Як працювати з формами в JS?

Робота з формами в JavaScript є одним із найпоширеніших завдань під час створення інтерактивних вебзастосунків, від простих контактних форм до складних багатокрокових опитування. Для ефективної взаємодії з елементами форми використовується властивість form.elements, яка є живою колекцією всіх полів введення, кнопок і селектів, що містяться всередині форми. Звернутися до конкретного поля можна як за його індексом у колекції, так і за значенням атрибута name, що робить код більш читабельним і надійним при зміні верстки.

Отримати введені користувачем дані або змінити їх можна за допомогою властивості input.value для текстових полів, чекбоксів і радіокнопок. Для перемикачів і чекбоксів також активно використовується властивість checked. Якщо вам потрібно програмно ініціювати надсилання форми без участі користувача, наприклад, після валідації даних або за таймером, застосовується метод form.submit(). Варто враховувати, що програмний виклик submit() не викликає подію submit самої форми, тому всю попередню логіку валідації потрібно виконувати вручну.

Для повернення форми у вихідний стан використовується метод form.reset(), який очищає всі поля введення і повертає їх до значень за замовчуванням, прописаних в HTML. Це зручно використовувати після успішного надсилання даних через AJAX, щоб користувач міг ввести нову інформацію.

Для зручного збору та надсилання даних форми на сервер без перезавантаження сторінки використовується об'єкт FormData. Він автоматично збирає всі значення з елементів форми, у яких задано атрибут name. Приклад типового сценарію роботи виглядає так: користувач заповнює поля, за кліком на кнопку надсилання ви перехоплюєте подію submit, скасовуєте стандартну поведінку браузера через preventDefault(), створюєте екземпляр FormData на основі елемента форми, а потім надсилаєте ці дані на сервер за допомогою асинхронного запиту fetch. такий підхід забезпечує сучасний і плавний користувацький досвід без смикання сторінки.