Формы в HTML. Тег <form>
http://belarusweb.net
Основы создания сайтов

Формы в HTML. Тег <form>

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

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

Тег <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".

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<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="Отправить">
	</form>
</body>
</html>

Пример 6.1. Использование элемента 'form'

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

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!