Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег form HTML

Тег form HTML

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

Тег <form> - синтаксис и код

Тег <form> представлен парами. Содержимое записывается между открывающим (<form>) и закрывающим (</form>) тегами.

Пример формы с применением HTML-тега <form>:

<form action="/form/submit" method="GET или POST">
  <textarea rows="3" cols="30" placeholder="Напечатайте текст здесь"></textarea><br/>
  <input type="submit" value="Отправить"/>
</form>

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

Тег <form> используется для добавления HTML-форм на веб-страницу для ввода данных пользователем;
Формы используются для передачи данных, отправленных пользователем, на сервер;
Данные отправляются при нажатии кнопки "Отправить". Если такой кнопки нет, информация отправляется при нажатии клавиши "Ввод".

Элемент form может содержать один или несколько следующих элементов формы, которые определяют метод ввода данных:

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>

★ Примечание: если отдельные элементы внутри тега <form> действительны, вы можете использовать псевдокласс CSS :valid для стилизации тега и псевдокласс :invalid в случае, если они недействительны.

Поддержка <form> браузерами

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Атрибут	Значение	Описание
accept-charset	character_set	Указывает кодировки символов, которые будут использоваться для отправки формы
action	URL	Указывает, куда отправлять данные формы при отправке формы
autocomplete	on off	Указывает, должно ли в форме быть включено или выключено автозаполнение
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Указывает, как данные формы должны быть закодированы при отправке на сервер (только для метода="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="radio" id="html" name="web_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="web_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="web_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Отправить">
</form>

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

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

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

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Поделиться ссылкой