HTML тег <form>

HTML теги

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

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

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


Основная задача формы заключается в том, чтобы принять от пользователя входящую информацию и передать её для дальнейшей обработки на стороне сервера.


Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу.

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<form>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
acceptfile_typeНе поддерживается в HTML5.
Определяет разделенный запятыми список типов файлов, которые принимает сервер (который может быть представлен через загрузку файлов).
accept-charsetcharacter_setОпределяет кодировку, используемую в представленной форме (значением по умолчанию является зарезервированная строка "unknown", которая указывает, что кодировка соответствует кодировке документа, содержащего элемент <form>).
actionURLОпределяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу).
autocompletehtml5on
off
Указывает может ли браузер автоматически заполнять элементы формы (по умолчанию - включен). Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее (если не отключено настройками браузера).
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет способ кодирования данных формы при их отправке. Значение по умолчанию application/x-www-form-urlencoded.
methodget
post
Атрибут определяет какой метод HTTP (get или post) используется при передаче формы. Метод get используется по умолчанию.
nametextОпределяет имя формы, которое используется для идентификации (задает имя для формы).
novalidatehtml5novalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится.
target_blank
_self
_parent
_top
framename
При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML форм</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

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

Пример использования HTML форм (элемент <form>).
Пример использования HTML форм (элемент <form>).

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

В HTML5 добавлены два новых атрибута: autocompletehtml5 и novalidatehtml5, атрибут accept был удалён.

Значение CSS по умолчанию

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

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".

HTML теги