<form> - HTML-елемент форми

HTML-елемент <form> представляє собою розділ документа, що містить інтерактивні елементи керування для надсилання інформації на веб-сервер.

Елемент <form> є контейнером для різних типів елементів вводу, таких як текстові поля, прапорці, перемикачі, кнопки надсилання тощо. Він визначає, як і куди будуть надіслані дані, зібрані з цих полів.

Форми є одним з основних способів взаємодії користувача з веб-сайтом, дозволяючи надсилати дані, такі як реєстраційна інформація, коментарі, замовлення та багато іншого.

HTML
<form action="/submit-url" method="post">
  ...
</form>

Атрибути

Цей тег може мати глобальні атрибути.

accept-charset

Список кодувань символів, які сервер приймає. Браузер використовує їх у тому порядку, в якому вони перераховані. Значення за замовчуванням — "UNKNOWN", що вказує на кодування документа.

action

URL-адреса, яка обробляє дані форми. Це значення може бути перевизначено атрибутами formaction на елементах <button>, <input type="submit">, або <input type="image">.

autocomplete

Вказує, чи може браузер автоматично заповнювати поля форми. Можливі значення: on (за замовчуванням) та off.

enctype

Визначає, як дані форми повинні бути закодовані при надсиланні на сервер. Використовується лише при method="post". Можливі значення:

application/x-www-form-urlencoded: Значення за замовчуванням. Усі символи кодуються перед надсиланням.
multipart/form-data: Використовується, якщо форма містить елементи <input type="file">.
text/plain: Дані надсилаються без кодування (не рекомендується).

method

HTTP-метод, який браузер використовує для надсилання форми. Можливі значення:

post: Дані форми включаються в тіло запиту.
get: Дані форми додаються до URL-адреси в атрибуті action.
dialog: Використовується, якщо форма знаходиться всередині елемента <dialog>, закриває діалогове вікно.

name

Ім’я форми. Використовується рідко, але може бути корисним для доступу до форми через JavaScript.

novalidate

Булевий атрибут, який вказує, що форма не повинна перевірятися на валідність перед надсиланням.

target

Вказує, де відображати відповідь після надсилання форми. Можливі значення: _self, _blank, _parent, _top.

rel

Визначає відношення між поточним документом та ресурсом, на який вказує атрибут action.

Технічне резюме

Категорія контенту	Потоковий контент.
Дозволений вміст	Потоковий контент, але без нащадків `<form>`.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає потоковий контент.
Роль ARIA	`form`
DOM інтерфейс	`HTMLFormElement`

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

<form action="/register" method="post">
  <fieldset>
    <legend>Реєстрація</legend>
    <div>
      <label for="username">Ім’я користувача:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div>
      <label for="email">Електронна пошта:</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div>
      <label for="password">Пароль:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">Зареєструватися</button>
  </fieldset>
</form>

form {
  font-family: sans-serif;
  max-width: 300px;
}
fieldset {
  border: 1px solid #ccc;
  padding: 1rem;
}
div {
  margin-bottom: 1rem;
}
label {
  display: block;
  margin-bottom: 0.25rem;
}
input {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
}

Стилі за замовчуванням

CSS
form {
  display: block;
  margin-top: 0em;
}

Підтримка браузерів



`<form>`
`accept-charset`
`action`
`autocomplete`
`enctype`
`method`
`name`
`novalidate`
`rel`
`target`