HTML формы

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

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


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


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

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

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

ЗначениеОписание
button
Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox

Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
colorhtml5
Элемент управления для задания цвета (определяет палитру цветов).
datehtml5
Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-localhtml5
Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
emailhtml5
Определяет поле для ввода адреса электронной почты.
file
Элемент управления, который позволяет пользователю выбрать файл.
hidden
Элемент управления, который определяет скрытое поле ввода.
image
Элемент управления, который определяет графическую кнопку "отправить форму" (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами widthhtml5 (ширина) и heighthtml5 (высота).
monthhtml5
Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
numberhtml5
Элемент управления для ввода числа с плавающей точкой.
password
Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio

Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
rangehtml5
Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
  • min = "0"
  • max = "100"
  • value = min + (max - min) / 2, или min (если max меньше чем min)
  • step = "1"
reset
Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
searchhtml5
Определяет однострочное текстовое поле для ввода строки поиска
submit
Определяет кнопку отправки формы
telhtml5
Определяет элемент управления для ввода телефонного номера.
text
Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов).
Это значение по умолчанию.
timehtml5
Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
urlhtml5
Определяет поле для ввода абсолютного URL-адреса.
weekhtml5
Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!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>

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

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

 Рис 32 HTML формы.
Рис 32 HTML формы.

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

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

<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы - текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы "example.php".


Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor - препроцессор гипертекста, произносится как "пи-эйч-пи") — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.


Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example.php"  method = "post">

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Группировка данных формы

Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Группировка данных формы</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Пожалуйста, представьтесь</legend>
				Имя: <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>
				<input type = "submit" name = "submit" value = "отправить">
			</fieldset>
		</form>
	</body>
</html>

В этом примере мы:

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

 Рис 33 Группировка элементов формы.
Рис 33 Группировка элементов формы.

Текстовая метка

Тег <label> (англ. - метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Рис. 34 Использование текстовой метки (тег <label>).
Рис. 34 Использование текстовой метки (тег <label>).

Подсказка для полей ввода

Атрибут placeholderhtml5 (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.


Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).


Атрибут может быть использован с полями данных следующих типов (атрибут type):

Давайте рассмотри пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута placeholder</title>
	</head>
	<body>
		<form>
			Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
			<button type = "submit">Далее</button>
		</form>
	</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholderhtml5), которая описывает ожидаемое значение для ввода.

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

Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).
Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Используя полученные знания составьте следующую форму оформления заказа:

Практическое задание № 22.

Практическое задание № 22.

Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.