Интерактивные формы предназначены для сбора информации от посетителей Web-страницы. Внешне форма выглядит, как анкета, в которую посетитель может вписать свой текст или выбрать значения из предлагаемых перечней.
Формы. Форма помещается в специальный контейнер <FORM></FORM>,внутри которого располагаются все тэги элементов формы. Там же, обязательно, находится кнопка, отправляющая заполненную анкету на сервер для последующей обработки данных.
Поля формы создаются с помощью тэгов <INPUT>, <SELECT> и <TEXTAREA>, в которых с помощью атрибутов задаются параметры полей. С помощью атрибута TYPE задается тип поля, атрибут NAME присваивает полю имя, а атрибут VALUE содержит его значение. Для различных конкретных типов поля существуют также дополнительные атрибуты.
При обработке формы на сервер передаются пары NAME=VALUE, где VALUE – значение соответствующего атрибута, установленное пользователем или заданное по умолчанию.
Текстовые поля. Текстовое поле создается тэгом:
<INPUT TYPE=”text” NAME=”regist” VALUE=””>
Атрибут VALUE принимает такое значение, которое задается пользователем при заполнении поля. Если пользователь ввел в поле текст «Фамилия», то на сервер будет передано regist=Фамилия.
Флажки. Флажки могут объединяться в группы, присвоением атрибутам NAME всех флажков одинакового значения. Для установки флажка по умолчанию используется атрибут CHECKED. Группа флажков создается тэгами:
<INPUT TYPE=”checkbox” NAME=”chb1” VALUE=”1” CHECKED>
<INPUT TYPE=”checkbox” NAME=”cnb1” VALUE=”2”>
На сервер передается значение атрибута VALUE флажка, установленного пользователем. Если пользователем установлены несколько флажков, то на сервер будет переданы значения уставленных флажков группы через запятую chb1=1,2.
|
|
Переключатели. Переключатели существуют только в составе группы, что обеспечивается присвоением атрибутам NAME всех переключателей одинакового значения. Для установки переключателя по умолчанию используется атрибут CHECKED. Группа переключателей создается тэгами:
<INPUT TYPE=”radio” NAME=”rad1” VALUE=”1” CHECKED >
<INPUT TYPE=”radio” NAME=”rad1” VALUE=”2”>
На сервер передается значение атрибута VALUE переключателя, установленного пользователем. Если пользователем установлен первый переключатель, то на сервер будет передано rad1=1.
Списки. Списки предоставляют пользователю выбор элементов в форме ниспадающего меню (значение атрибута SIZE=1) или списка прокрутки. Список помещается в контейнер:
<SELECT NAME=”list” SIZE=N>
<OPTION SELECTED>Первый
<OPTION>Второй
<OPTION>Третий
<SELECT>
На сервер передается значение атрибута OPTION, выбранного пользователем или установленного по умолчанию атрибутом SELECTED. Если пользователем выбран третий элемент списка, то на сервер будет передано list=Третий.
Текстовая область. Текстовая область представляет собой текстовое поле с заданным количеством строк (значение атрибута ROWS) и столбцов (значение атрибута COLS). Создается тэгом:
<TEXTAREA NAME=”resume” ROWS=M COLS=N>
Текст по умолчанию
</TEXTAREA>
На сервер передается содержимое поля, если пользователь не изменял текст, то resume=Текст по умолчанию.
Кнопки. На форме должны присутствовать кнопки, которые реализуют отправку данных из формы для обработки на сервер и очистку формы от введенных данных.
Кнопка отправки данных формы реализуется с помощью тэга:
|
|
<INPUT TYPE=”submit” VALUE=”Отправить”>
Кнопка очистки данных формы реализуется с помощью тэга:
<INPUT TYPE=”reset” VALUE=”Очистить”>
Практическое задание 3. «Web-страница с формой». Создать Web-страницу с анкетой для абитуриентов с использованием Web-редактора Front Page.
Во FrontPage форма создается автоматически при добавлении на Web-страницу любого элемента формы. На странице редактора область формы выделяется пунктирным прямоугольником, внутри которого появляется первый элемент.
Добавляются элементы формы на страницу или с помощью команды меню [Вставка-Поле формы...], или специальными кнопками на Панели инструментов полей формы:
Рис. 8.1. Панель инструментов полей формы
Для каждого размещенного на странице элемента формы необходимо настроить его свойства (задать значения атрибутам NAME, VALUE и др.). Для этого необходимо выделить элемент формы и ввести команду [Правка-Свойства поля формы] с помощью меню приложения или контекстного меню. В результате откроется специальное окно свойств элемента, в котором необходимо произвести установки значений.
| Cозданиe Web-страницы «Анкета абитуриента» |
| Запустить Блокнот. | |
| Разместить на форме четыре Текстовых поля для ввода фамилии, имени, отчества и возраста. | |
| Последовательно задать им названия (присвоить атрибуту NAME значения a1, a2, a3, a4) и указать размер size=20. | |
| Разместить на форме три Переключателя для определения наличия медали. Задать им одинаковое имя группы (присвоить атрибуту NAME значение a5) и значения (присвоить атрибуту VALUEзначения Золотая, Серебряная, Нет). | |
| Добавить четыре элемента типа Флажок для выбора предметов, по которым в аттестате стоит оценка «Отлично». Задать им одинаковое имя группы (присвоить атрибуту NAME значение a6) и значения (присвоить атрибуту VALUEзначения: Математика, Информатика, Физика, Химия). | |
| Добавить элемент Список. Ввести его название (NAME=a7) и, ввести элементы списка (значения тэга OPTION – Нравится специальность, нужен диплом, Нужна отсрочка от армии, Советуют родители). | |
| Добавить Многострочное текстовое поле для внесения произвольного послания от посетителя страницы. Ввести его название (NAME=a8) и установить размер (присвоить значения атрибутам ROWS и COLS). | |
| Поместить на форму кнопки Очистить и Отправить. Установить для них тип кнопки (присвоить атрибуту TYPE значения reset и submit). |
|
|
Отправка и обработка данных из формы. После размещения на форме полей различных типов следует определить способ обработки введенных пользователем данных. Для этого необходимо присвоить значения атрибутам ACTION и METOD тэга <FORM>.
Значением атрибута ACTION является URL-адрес программы, которая будет обрабатывать данные из формы, а значениями атрибута METHOD являются либо get (по умолчанию), либо post, которые определяют форму пересылки данных.
<FORM ACTION="URL" METHOD="post">
Для обработки форм на сервере размещают специальные программы (такая программа, например, размещена на сайте клуба Web-мастеров по адресу www.webclub.ru).
| Установки обработчика форм пользователя: вписать полный URL-адрес программы-обработчика на сайте Web-мастеров https://webclub.ru/cgi-bin/sendform.cgi В значение Метод: указать POST. |
Для того, чтобы программа-обработчик смогла прислать нам результат обработки анкеты по электронной почте, необходимо в форме указать свой адрес. Это делается с помощью скрытых полей:
| В Свойствах формы указать как Скрытое поле (type=hidden) Название: ввести to (т.е. Кому), Значение: ввести ваш адрес электронной почты. | |
| Сохранить полученную Web-страницу в файле anketa.htm. Анкета должна иметь следующий вид АНКЕТА АБИТУРИЕНТА Фамилия: Имя: Отчество: Возраст: Наличие медали: Золотая Серебряная Нет В аттестате Вы имеете оценку "Отлично" по: Математика Информатика Физика Химия Почему вы хотите учиться в нашем учебном заведении? Нравится специальность Нужен диплом Нужна отсрочка от армии Советуют родители Ваше мнение о нашем учебном заведении: |
Теперь Web-страница с формой полностью готова и можно приступить к ее апробации. Для работы с программой-обработчиком данных из форм клуба Web-мастеров, необходимо заполнять форму в браузере.
| Запустить браузер, открыть Web-страницу с формой. Заполнить анкету и щелкнуть по кнопке Отправить. | ||
| Программа-обработчик, обработав форму, пришлет письмо, содержащее имена элементов и выбранные значения. Информация по каждому элементу располагается в отдельной строке, причем строки отсортированы не по порядку пунктов в анкете, а по алфавиту. | 
|