Тег <form>

Тег <form> (укр. – “форма”) використовується для створення інтерактивних форм у HTML-документах. Ці форми дозволяють користувачам вводити дані, які можуть бути надіслані на сервер для обробки. Тег <form> є контейнером для різних елементів форми, таких як текстові поля, прапорці, радіокнопки, кнопки, випадаючі списки тощо.

Атрибути

Специфічні атрибути

• action — вказує URL, на який будуть надсилатися дані форми. Якщо не вказано, форма надсилатиметься на ту саму сторінку. Наприклад:

<form action="/submit-data">

Примітка: цей атрибут не потрібен, якщо обробка даних здійснюється через JavaScript.

• method — визначає HTTP-метод для надсилання даних форми. Значення за замовчуванням — GET, але часто використовується POST. Наприклад:

<form method="POST">

Примітка: цей атрибут не потрібен, якщо обробка даних здійснюється через JavaScript.

• enctype — задає спосіб кодування даних форми, наприклад, для завантаження файлів використовується multipart/form-data. Наприклад:

<form enctype="multipart/form-data">

Примітка: цей атрибут не потрібен, якщо обробка даних здійснюється через JavaScript.

• autocomplete — вказує браузеру, чи слід заповнювати дані автоматично. Значення: on (за замовчуванням) або off.
• novalidate — якщо встановлено, вимкне вбудовану перевірку форми перед її надсиланням. Наприклад:

<form novalidate>

Глобальні атрибути

Тег <form> підтримує всі глобальні атрибути HTML, включаючи:

• id — унікальний ідентифікатор елемента. Наприклад:

<form id="signup-form">

• class — клас, який допомагає застосувати стилі CSS або групувати елементи. Наприклад:

<form class="signup-form">

• style — інлайн-стилізація форми. Наприклад:

<form style="width:600px">

• title — додатковий опис форми, який може бути корисний для доступності. Наприклад:

<form title="Форма реєстрації на безкоштовний марафон">

Приклад використання

<form id="signup-form">
  <label for="username">Ім'я користувача:</label>
  <input type="text" id="username" name="username" required>

  <label for="user-email">Електронна пошта користувача:</label>
  <input type="email" id="user-email" name="user-email" required>

  <button type="submit">Зареєструватись</button>
</form>

Додаткові моменти

• Тег <form> зазвичай використовується в поєднанні з елементами форм (<input>, <textarea>, <select> тощо).
• Якщо форми обробляються повністю через JavaScript (наприклад, за допомогою fetch або axios), специфічні атрибути action, method, і enctype можуть бути пропущені. У таких випадках дані форми збираються вручну та надсилаються запитами JavaScript.
• Використання атрибута novalidate дозволяє кастомізувати валідацію за допомогою JavaScript, якщо стандартна поведінка браузера не підходить.
• Для забезпечення доступності варто додавати мітки (<label>), а також використовувати атрибути aria-* для інтерактивних елементів