HTML :: Формы

Использование форм в HTML

Для обмена данными между компьютером пользователя и сервером в HTML применяются формы. Обычно обмен данными происходит следующим образом: пользователь вводит требуемые данные в поля формы, после чего они отправляются на сервер, где обрабатываются соответствующей программой. Если это, например, регистрационные данные пользователя, то они проверяются на соответствие предъявляемым требованиям и, в случае успешной проверки, заносятся в базу данных. Пользователю при этом возвращается ответ, в котором либо сообщается об успешном завершении регистрации, либо предлагается возможность исправить ошибки, допущенные в ходе заполнения полей формы. Конечно, применение форм не ограничивается только лишь сбором данных от пользователей и передачей их на сервер для обработки, однако данное предназначение следует считать основным.

Тег <form> и его атрибуты

Формируется элемент «form» при помощи парного тега <form> (от англ. form – форма) и представляет собой контейнер, в котором расположены элементы формы: поля ввода, кнопки и т.д., которые мы подробно рассмотрим в следующих пунктах. Сейчас же перечислим атрибуты элемента «form».

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

Чтобы иметь визуальное представление о форме, давайте посмотрим на пример №1.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Формы</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. Использование элемента «form»

Об элементах «input» и «label» мы поговорим чуть позже, а сейчас подробнее остановимся на методах HTTP-запросов GET и POST.

HTML :: Формы

Использование форм в HTML

Тег <form> и его атрибуты

Быстрый переход к другим страницам