Тег <form>

Синтаксис

Описание

Тег <form> (от англ. form — форма) используется для создания формы на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.

Для отправки информации на сервер используется кнопка типа submit. Если этой кнопки нет, то форму можно отправить, нажав клавишу Enter.

Тег <form> является контейнером и обычно внутри него располагаются теги: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <datalist>, <fieldset>, <legend>, <label> и <output>.

Атрибуты, которые можно использовать в теге <form>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
accept	file_type	Определяет разделенный запятыми список типов файлов, которые принимает сервер. Не поддерживается в HTML5
accept-charset	character_set	Определяет кодировку, в которой сервер может принимать и обрабатывать данные
action	URL-адрес	Указывает адрес, куда отправляются данные из заполненной формы, и где они будут обрабатываться
autocomplete	on off	Включает/выключает автозаполнение полей формы. По умолчанию значение on (включено)
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Определяет способ кодирования данных формы при их отправке. Значение по умолчанию application/x-www-form-urlencoded. Используется только при методе POST
method	get post	HTTP метод передачи данных формы
name	text	Определяет имя формы
novalidate	novalidate	Устанавливает, что данные введенные в форму не будут проверяться перед отправкой
target	_blank _self _parent _top	Определяет, где показать ответ, полученный после отправки формы

Пример

HTML-код:

<!DOCTYPE html>

<head>

</head>

<body>

<form action="/action_page.php" method="post">

<label for="first-name">Имя: </label>

<input type="text" name="firstName" id="first-name"><br/>

<label for="last-name">Фамилия: </label>

<input type="text" name="lastName" id="last-name"><br/>

<input type="submit" value="Отправить">

</form>

</body>

</html>

Отображение в браузере:

Параметры CSS по умолчанию

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

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<form>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

<form>

Да