НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

HTML Тег <form>


Приклад

HTML-форма з двома полями введення та однією кнопкою надсилання:

<form action="/action_page.html" method="get">
  <label for="fname">Ім’я:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Прізвище:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Надіслати">
</form>
Спробуйте самі »

Більше прикладів "Спробуйте самі" далі.


Визначення та використання

Тег <form> використовується для створення HTML-форми для введення користувачем.

Елемент <form> може містити один або декілька з наступних елементів форми:


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

Елемент
<form> Yes Yes Yes Yes Yes

Атрибути

Атрибут Значення Опис
accept-charset character_set Визначає кодування символів, які мають використовуватися для надсилання форми
action URL Визначає, куди надсилати дані форми під час надсилання форми
autocomplete on
off
Визначає, увімкнути чи вимкнути автозаповнення у формі
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Визначає, як мають бути закодовані дані форми під час надсилання їх на сервер (лише для method="post")
method get
post
Визначає метод HTTP для надсилання даних форми
name text Визначає назву форми
novalidate novalidate Вказує, що форму не слід перевіряти під час надсилання
rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search
Визначає зв’язок між пов’язаним ресурсом і поточним документом
target _blank
_self
_parent
_top
Визначає, де відображати відповідь, отриману після надсилання форми

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

Тег <form> також підтримує Глобальні атрибути в HTML.


Атрибути подій

Тег <form> також підтримує Атрибути подій в HTML.


Більше прикладів

Приклад

HTML-форма з прапорцями:

<form action="/action_page.html" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> У мене є велосипед</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> У мене є автівка</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> У мене є дівчина</label><br><br>
  <input type="submit" value="Надіслати">
</form>
Спробуйте самі »

Приклад

HTML-форма з перемикачами:

<form action="/action_page.html" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>
Спробуйте самі »

Пов’язані сторінки

HTML підручник: HTML Форми та введення

HTML DOM довідник: Об’єкт Form

CSS підручник: Стилізація форм


CSS налаштування за замовчуванням

Більшість браузерів будуть відображати елемент <form> з наступними значеннями за замовчуванням:

Приклад

form {
  display: block;
  margin-top: 0em;
}
Спробуйте самі »