Лр №7 Создание форм

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

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

Атрибуты формы

• В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php.
  Если не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы - текущая страница).
• Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
• Атрибут method указывает и определяет форму передачи данных.
  Метод по умолчанию — get используется, если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При его использовании данные формы будут видны при передаче в адресе страницы.
  Метод post применяется,если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post обеспечивает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Элементы формы

Элемент <input>

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

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

Атрибут placeholder тега <input> указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение. Браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии.
В некоторых случаях можно использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера. Атрибут может быть использован с полями данных следующих типов (атрибут type):

• email (поле для адреса электронной почты).
• password (поле с паролем, в котором скрываются символы).
• search (текстовое поле для ввода строки поиска).
• text (однострочное текстовое поле).
• tel (поле для ввода номера телефона).
• url (поле для ввода URL-адреса).

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

• checkbox (флаговая кнопка).
• radio (радиокнопка).
• submit (кнопкa отправки формы).
• text (однострочное текстовое поле).

Другие элементы

Приведем примеры использования рассмотренных элементов:
Пример 1. HTML формы

Пример 2. Форма обратной связи
Пример 3. Форма регистрации

Задание

Для сайта, созданного в ЛР №8 создайте форму отзывов и предложений с использованием стилевого оформление по технологии CSS.

Copyright © Кафедра Технологий обработки и защиты информации ВГУ, 2019