HTML :: Тег <form>

В HTML тег <form> (от англ. form – форма) предназначен для создания на веб-странице формы, которая используется для отправки введенных пользователем данных на сервер. Сам элемент <form> никакого интерфейса для ввода данных не имеет и по умолчанию на странице браузерами никак не отображается. Однако он является контейнером для различных элементов формы (поля ввода, кнопки, переключатели и т.д.), которые как раз и предоставляют пользователю довольно обширный арсенал различных способов ввода данных и отправки их на сервер.

Допускается располагать внутри формы элементы, которые не относятся к форме как таковой (например, обычные абзацы). Однако других элементов <form> внутри быть не должно. Кроме того, на странице допускается использование любого количества форм, но одновременно на сервер можно отправить данные только одной из них.

Синтаксис

	<form>
		...	
	</form>	 		
	
	Закрывающий тег: обязателен.

Атрибуты

accept-charset – указывает кодировку символов передаваемых данных, например, "utf-8". Если атрибут не указан, то указывается кодировка, установленная для страницы.
action – в качестве значения принимает полный или относительный путь к серверной программе-обработчику, которой будут передаваться данные формы после отправки на сервер.
autocomplete – позволяет отключать автозаполнение полей формы, которое происходит при повторном вводе одинаковых данных. Принимает два значения "on" (по умолчанию) и "off". При этом, если автозаполнение отключено в настройках самого браузера, то данный атрибут игнорируется. Кроме того, значение атрибута может быть переопределено таким же атрибутом autocomplete, но у конкретных элементов формы, например, в случае необходимости не сохранять важные данные вроде паролей, номеров банковских карт и т.д.
enctype – устанавливает способ кодирования отправляемых данных. Может принимать значения:
- "application/x-www-form-urlencoded" – применяется по умолчанию и подходит для большинства случаев, поэтому сам атрибут enctype обычно не указывается;
- "multipart/form-data" – следует использовать при отправке файлов;
- "text/plain" – кодирует данные в виде простого текста, только заменяя пробелы знаком +; требуется редко, например, может быть полезен при отправке данных формы по электронной почте.
name – определяет уникальное имя формы, которое в основном используется для доступа к ней через скрипты.
novalidate – данный логический атрибут отменяет встроенную проверку данных вводимых пользователем в поля формы на ошибки. Значений не принимает и по умолчанию выключен.
method – принимает значения "GET" или "POST", которые определяют метод отправки данных формы на сервер. По умолчанию применяется "GET".
target – сообщает имя целевого окна или фрейма, в котором будет открыт результат отправки данных формы. В качестве значений может принимать:
- _self – документ будет открываться в текущем окне или фрейме (используется по умолчанию);
- _blank – документ будет открываться в новом окне или фрейме;
- _parent – документ будет открываться в родительском фрейме, а в случае отсутствия такового, в текущем окне;
- _top – документ будет открываться в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как _self;
- name – имя фрейма, в котором будет открываться документ; если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-form-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/form

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>
  <!-- Создаем простейшую форму для ввода данных  -->
  <form action="php/registration.php" method="get" name="reg_form">
     
    <!-- Связываем текст «Имя:» с элементом «input» -->
    <label for="first_name">Имя: </label>
     
    <!-- Создаем поле для ввода имени -->
    <input type="text" id="first_name" name="first_name"><br><br>
     
    <!-- Создаем поле для ввода фамилии -->
    <label>Фамилия: <input type="text" name="last_name"> </label>
    <br><br>
     
    <!-- Создаем кнопку для отправки данных формы на сервер -->
    <input type="submit" value="Отправить" disabled>
  </form>
</body>
</html>

Пример №1