HTML <form> тег

  • Предыдущая страница <footer>
  • Следующая страница <frame>

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

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

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

См. также:

HTML Урок:HTML формы и ввод

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

CSS Урок: Настройка стиля формы

Пример

Пример 1

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="Подтвердить">
</form>

Попробуйте сами

Пример 2

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="Подтвердить">
</form>

Попробуйте сами

Пример 3

HTML-форма с радиobuttonами:

<form action="/action_page.php" 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="Подтвердить">
</form>

Попробуйте сами

Свойство

Свойство Значение Описание
accept-charset charset Определяет кодировку символов, которая используется при отправке формы.
action URL Определяет, куда отправлять данные формы при отправке.
autocomplete
  • включен
  • отключен
 Определяет, должна ли быть включена функция автоматического завершения ввода для формы.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Определяет, как должны кодироваться данные формы при отправке на сервер.
method
  • get
  • post
 Определяет HTTP-метод, который используется для отправки данных формы.
name текст Определяет имя формы.
novalidate novalidate Определяет, что форму не следует проверять при отправке.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Определяет отношение между ресурсом ссылки и текущим документом.
target
  • _blank
  • _self
  • _parent
  • _top
 Определяет, где отображается ответ после отправки формы.

Глобальные свойства

<form> Эти теги также поддерживают Глобальные свойства в HTML。

Свойства событий

<form> Эти теги также поддерживают Свойства событий в HTML。

Стандартные CSS настройки

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

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

Попробуйте сами

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <footer>
  • Следующая страница <frame>