Тег | HTML справочник

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

Описание

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

Так как сама форма не предоставляет никаких средств для пользовательского ввода данных, внутри элемента <form> располагают другие элементы, цель которых предоставить пользователю различные способы ввода данных:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <fieldset>
  • <datalist>
  • <label>
  • <legend>

Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.

По умолчанию форма никак не отображается на веб-странице, видны только элементы расположенные внутри неё, однако с помощью CSS можно придать форме любой внешний вид.

Атрибуты

accept-charset:
Указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды.

Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент <form>).

action:
Указывает адрес отправки данных из заполненной формы, где будет обрабатываться данная информация.
autocomplete:
Определяет, включить или выключить автозаполнение формы. При включенном автозаполнение браузер автоматически подставляет значения, которые пользователь вводил во время предыдущего использования формы. Возможные значения атрибута:
  • on: браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
  • off: пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete не поддерживается браузером Opera.

enctype:
Указывает способ кодирования данные формы при отправке на сервер. Может использоваться только совместно с атрибутом method=»post». Возможные значения:
  • application/x-www-form-urlencoded: значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ «+», а специальные символы в значения ASCII HEX).
  • multipart/form-data: символы не кодируются. Используется для элементов <input>, у которых в атрибуте type установлено значение «file».
  • text/plain: пробелы преобразуются в символ «+», но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.
method:
Указывает метод передачи данных HTTP-протокола, который будет использован при отправке данных формы. Возможные значения:
  • get: данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (?), для разделения передаваемых данных между собой используется символ амперсанда (&). Данный метод применяется при отправке данных небольшого размера.
  • post: данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.
Если атрибут method не указан, по умолчанию будет использоваться метод GET.
name:
Определяет имя формы. Имя может быть использовано в JavaScript для ссылки на элемент по имени или для ссылки на данные формы после ее отправки. Если в одном документе используется несколько форм, то их имена не должны повторяться, так же нельзя в качестве значения атрибута оставлять пустую строку.
novalidate:
Указывает, что данные введенные в форму не будут проверятся перед отправкой. Возможные значения логического атрибута novalidate: 

<form novalidate>
<form novalidate="novalidate">
<form novalidate="">

Примечание: атрибут novalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

target:
Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы.
  • _blank: открывает документ в новом окне или вкладке.
  • _self: открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent: открывает документ в родительском фрейме.
  • _top: открывает документ во всю ширину окна.
  • имя_фрейма: открывает документ в iframe, имя которого было указано в качестве значения.

Тег <form> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


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

Пример


<form action="demo_form.asp">
  Имя: <input type="text" name="fname" value="Mickey"><br>
  Фамилия:<input type="text" name="lname" value="Mouse"><br>
  <input type="submit" value="Submit">
</form>

Результат данного примера в окне браузера:

Атрибут method тега | HTML справочник

HTML тег <form>

Значение и применение

Атрибут method (HTML тега <form>) определяет какой метод HTTP (get или post) используется при передаче формы.

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

url?name=value&name=value // метод GET использует пары имя = значение

При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST:

  • Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод
    POST     не имеет подобных ограничений.
  • Никогда не используйте метод GET, если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL — в открытом виде).
  • Страница, сгенерированную методом GET, можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
  • Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.

Значение атрибута method может быть переопределено атрибутом formmethod элементов <button>, или <input>.

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

Атрибут
Chrome
Firefox
Opera
Safari
IExplorer
Edge
methodДаДаДаДаДаДа

Синтаксис:

<form method = "post | get">

Значения атрибута

ЗначениеОписание
postДанные формы включаются в тело формы и отправляется на сервер.
getДобавляет данные формы в URL в виде пары имя/значение. Метод get используется по умолчанию.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута method HTML тега <form></title>
	</head>
	<body>
		<form name = "subscribeForm" method = "post" ectype = "multipart/form-data"> <!-- определяем имя для нашей формы, HTTP метод, используемый при передаче формы и способ кодирования.  -->	
			Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации -->
			E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты -->
			<input type = "submit" value = "Подписаться"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), атрибутом name определили имя для нашей формы, атрибутом method указали HTTP метод post (данные формы включаются в тело формы и отправляется на сервер), используемый при передаче формы и атрибутом enctype указали способ кодирования при передаче данных формы (multipart/form-data — символы не кодируются).

Результат нашего примера:

Пример использования атрибута method HTML тега <form>.HTML тег <form>

HTML-тег формы

❮ Назад Полный справочник HTML Далее ❯


Пример

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

php» method=»get»>
 
 


 



  <ввод type="submit" value="Submit">

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

Другие примеры «Попробуйте сами» ниже.

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

Тег

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

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

  • <текстовое поле>
  • <кнопка>
  • <выбрать>
  • <опция>
  • <оптгруппа>
  • <набор полей>
  • <метка>
  • <выход>

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

Элемент
<форма> Да Да Да Да Да

Атрибуты

Атрибуты Значение Описание
принять кодировку набор символов Указывает кодировку символов, которая должна использоваться для отправки формы
действие URL-адрес Указывает, куда отправлять данные формы при отправке формы
автозаполнение на
на		 Указывает, должна ли форма включать или выключать автозаполнение.
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Указывает, как данные формы должны быть закодированы при отправке на сервер (только для method=»post»)
метод получить
сообщение		 Указывает метод HTTP для использования при отправке данных формы
имя текст Указывает имя формы
повторная проверка обновить Указывает, что форма не должна проверяться при отправке
отн. внешний
справка
лицензия
следующий
nofollow
noopener
noreferrer
открыватель
предыдущий
поиск		 Задает отношение между связанным ресурсом и текущим документ
цель _blank
_self
_parent
_top		 Указывает, где отображать ответ, полученный после отправки формы

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

HTML-форма с флажками:


 
 

 
 

 
 


 

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

Пример

HTML-форма с переключателями:

< форма action="/action_page.php" method="get">

 

 
 


 


 

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

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

Учебник по HTML: HTML-формы и ввод

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

Учебник по CSS

: Стиль Формы

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

Большинство браузеров отображают элемент

со следующими значениями по умолчанию:

Пример

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

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

❮ Предыдущая Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


Лучшие примеры

0266 Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML-форма enctype Атрибут

❮ Тег HTML

Пример

Отправить данные формы, закодированные как «multipart/form-data»:


 
 


 



 

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

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

Атрибут enctype указывает, как данные формы должны быть закодированы при отправив его на сервер.

Примечание: Атрибут enctype можно использовать, только если метод = "пост" .

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

Атрибут
enctype Да Да Да Да Да

Синтаксис

Значения атрибутов
Значение Описание
приложение/x-www-form-urlencoded По умолчанию. Все символы кодируются перед отправкой (пробелы преобразуются в символы «+», а специальные символы преобразуются в значения ASCII HEX)
multipart/form-data  Это значение необходимо, если пользователь будет загружать файл через форма
текст/обычный Отправляет данные вообще без какой-либо кодировки. Не рекомендуется

❮ HTML-тег


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

No related posts.