<form>: Елемент форми

{{HTMLSidebar}}

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

Спробуйте його в дії

Можна застосувати псевдокласи CSS:valid й :invalid для оформлення елемента <form> на основі того, чи мають елементи всередині форми дійсні значення.

Атрибути

Цей елемент включає глобальні атрибути.

accept

Розділені комами типи вмісту, котрі приймає сервер.

Примітка: Цей атрибут тепер нерекомендований, його не слід використовувати. Натомість слід використовувати атрибут accept на елементах <input type=file>.

accept-charset

Розділені пробілами кодування символів, котрі приймає сервер. Браузер використає їх в порядку, в якому вони вказані. Усталене значення – таке саме кодування, яке має сторінка. (У попередніх версіях HTML кодування символів також могли бути розділені комами.)

autocapitalize

Нестандартний атрибут, що використовується iOS Safari для контролю того, як текстові елементи форми повинні автоматично отримувати великі літери. Атрибути autocapitalize на елементах форми відкидають такі атрибути на <form>. Можливі значення:

• none: Без автоматичного додавання великих літер.
• sentences (усталено): Велика літера на початку кожного речення.
• words: Велика літера на початку кожного слова.
• characters: Усі літери великі – тобто верхній регістр.

autocomplete

Показує, чи можуть поля введення усталено автоматично заповнюватись браузером. Атрибути autocomplete елементів форми відкидають такий атрибут на <form>. Можливі значення:

• off: Браузер може не заповнювати автоматично поля. (Браузери мають тенденцію ігнорувати це там, де підозрюють форми автентифікації; дивіться Атрибут autocomplete і поля автентифікації.)
• on: Браузер може заповнювати поля автоматично.

name

Ім'я форми. Значення мусить не бути порожнім рядком, і бути унікальним серед елементів form у колекції форм, в котрій лежить форма, якщо така є.

rel

Контролює анотації й те, якого роду посилання породжує форма. Серед анотацій: external, nofollow, opener, [noopener](/uk/docs/Web/HTML/Attributes/rel#noopener і noreferrer. Серед різновидів посилань: help, prev, next, search і license. Значення rel є розділеним пробілами списком таких значень.

Атрибути для подання форми

Наступні атрибути контролюють поведінку під час подання форми.

action

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

enctype

Якщо значення атрибута method – post, то enctype – це тип MIME подання форми. Можливі значення:

• application/x-www-form-urlencoded: Усталене значення.
• multipart/form-data: Слід застосовувати, якщо форма містить елементи <input> з type=file.
• text/plain: Корисно для потреб зневадження.

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

method

Метод HTTP, котрим буде подана форма. Єдині дозволені методи (значення) (чутливі до регістру):

• post: Метод POST; дані форми надсилаються як тіло запиту.
• get (усталене значення): Метод GET; дані форми додаються до URL action після роздільника ?. Слід застосовувати, коли форма не має побічних ефектів.
• dialog: Коли форма знаходиться всередині <dialog>, при поданні закриває діалог і викидає подію подання, не подаючи дані й не очищаючи форму.

Це значення відкидається атрибутами formmethod на елементах <button>, <input type="submit"> чи <input type="image">.

novalidate

Цей булів атрибут указує, що форма не повинна затверджуватися при поданні. Якщо цей атрибут не заданий (а отже – форма має затвердження), це може бути відкинуто атрибутом formnovalidate на елементі <button>, <input type="submit"> чи <input type="image">, що належить формі.

target

Вказує, де виводити відповідь після поданні форми. Це ім'я чи ключове слово на позначення контексту перегляду (наприклад, вкладки, вікна чи iframe). Наступні ключові слова мають особливі значення:

• _self (усталене): Завантажувати в поточний контекст перегляду.
• _blank: Завантажувати в новий безіменний контекст перегляду. Це додає такої ж логіки, як задання rel="noopener", тобто відсутність заповнення window.opener.
• _parent: Завантажувати в батьківський щодо поточного контекст перегляду. Якщо батьківського немає, то діє так само як _self.
• _top: Завантажувати в контекст перегляду найвищого рівня (тобто контекст перегляду, що є предком поточного і не має предка). Якщо батьківського контексту немає, то діє так само як _self.

Це значення може бути відкинуто атрибутом formtarget на елементі <button>, <input type="submit"> чи <input type="image">.

Приклади

<!-- Форма, котра пошле запит GET на поточний URL -->
<form method="get">
  <label
    >Ім'я:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Зберегти</button>
</form>

<!-- Форма, котра пошле запит POST на поточний URL -->
<form method="post">
  <label
    >Ім'я:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Зберегти</button>
</form>

<!-- Форма з fieldset, legend і label -->
<form method="post">
  <fieldset>
    <legend>Погоджуєтеся з положеннями?</legend>
    <label><input type="radio" name="radio" value="yes" /> Так</label>
    <label><input type="radio" name="radio" value="no" /> Ні</label>
  </fieldset>
</form>

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• Посібник форм HTML
• Інші елементи, що використовуються при створенні форм: <button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
• Отримання списку елементів у формі: HTMLFormElement.elements
• ARIA: Роль form
• ARIA: Роль search