САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

HTML Тег <form>



Пример

HTML форма с двумя полями ввода и одной кнопкой отправки:

<form action="/action_page.php" 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="Submit">
</form>
Попробуйте сами »

Определение и использование

Тег <form> используется для создания HTML формы для ввода пользователем.

Тег <form> может содержать один или несколько из следующих элементов формы:


Поддержка браузеров

Элемент
<form> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
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.php" 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="Submit">
</form>
Попробуйте сами »

Пример

HTML форма с радиокнопками:

<form action="/action_page.php" method="get">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Мужской</label><br>
  <input type="radio" id="female" name="gender" value="female" checked="checked">
  <label for="female">Женский</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Другое</label><br><br>
  <input type="submit" value="Submit">
</form>
Попробуйте сами »

Связные страницы

HTML учебник: HTML Формы и Ввод

HTML DOM справочник: Объект form

CSS учебник: Стиль форм


Настройки CSS по умолчанию

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

Пример

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