Елемент <form>

Елемент <form> використовують для створення форм на веб-сайтах. Це по суті контейнер, який обʼєднує в собі всі інші елементи форми та має важливі атрибути налаштування самої форми.

<form> </form>

Всередині відкривального тегу вказують атрибути. У форми немає обовʼязкових атрибутів, але вказувати деякі корисні - правило хорошого тону розробника. Елементи форми уже вказують всередині самого елемента форми. Наприклад форма авторизації може бути такою:

<form name="login_form" autocomplete="on" novalidate>
  <label for="username">Login:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
   <button type="submit">Submit</button>
</form>

Деякі корисні атрибути елемента <form>:

name - унікальне ім'я форми на поточній веб-сторінці. Може містити символи англійського алфавіту в будь-якому регістрі, цифри, підкреслення і тире. В імені не можна використовувати пробіл.

autocomplete - визначає, чи може браузер автоматично заповнювати значення всіх елементів форми. Має два значення off і on. Цей атрибут можна поставити як на всю форму, так і на кожен окремий елемент форми.

novalidate - атрибут-прапорець, не має значення. Вказує браузеру не перевіряти валідність введених даних під час відправлення форми. Якщо атрибут не вказаний, виконується клієнтська валідація.

Щоб відправити дані форми достатньо натиснути на кнопку <button type="submit"> або клавішу Enter в будь-якому полі форми. При цьому відбувається перезавантаження сторінки. Це поведінка за замовчанням. Але її можна змінити за допомогою JavaScript.

Деякі атрибути у розробці на JavaScript не використовуються, тому тут просто їх згадаємо для повноти розуміння картини.

Для розробників на PHP корисні атрибути:

action - вказує URL або шлях на сервері, до якого будуть надіслані дані форми після її відправлення.

method - вказує метод, який буде використовуватися для відправлення форми. Може бути "GET" або "POST".

<form action="/submit_form.php" method="post">

target - вказує, де має бути відображений вміст, повернутий після відправлення форми. Зазвичай використовується для вказання ім'я вікна або фрейму.

onsubmit - вказує JavaScript-код, який має виконатися при відправленні форми.