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

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

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

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

Атрибути

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

accept

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

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

accept-charset

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

autocapitalize

Контролює те, чи додаються великі літери до тексту, введеного у поля вводу, а також, якщо так — то яким чином. Шукайте більше інформації на сторінці глобального атрибута autocapitalize.

autocomplete

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

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

name

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

rel

Контролює анотації й те, якого роду посилання породжує форма. Серед анотацій: external, nofollow, opener, 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>, при поданні закриває діалог і запускає подію submit, не надсилаючи дані й не очищаючи форму.

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

novalidate

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

target

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

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

Це значення може бути відкинуто атрибутом 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