Порядок выполнения работы. Раздел 1. Форма

Раздел 1. Форма.

Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана. Cоздать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Perl или C. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования. В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

1.1. Элементы формы( тег<FORM>)

Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений. Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

ACTION -обязательный атрибут. Определяет, где находится обработчик формы.

METHOD -определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE

Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.

<FORM > определяется последовательностью элементов < INPUT >, размещенных внутри пары <FORM> </FORM>

1.2. Сбор данных при помощи форм ( тег <INPUT>)

Элемент < INPUT > используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля, в этой переменной обработчику будут переданы введенные пользователем данные.

Можно использовать следующие атрибуты:

· MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)

· SIZE- размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, браузер будет прокручивать данные в окне.

· VALUE - определяет начальное значение поля ввода.

Элемент < INPUT > можно определить различными типами с помощью атрибута TYPE.

Задание 4.1

Создание простой формы для ввода:

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_1.htm, откройте в браузере, должно появиться следующее отображение:

Тип элемента RADIO

Type=RADIO

Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример 6_2 : Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

Задание 4.2

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_2.htm, откройте в браузере, должно появиться следующее отображение:

Тип элемента CHECKBOX

Type=CHECKBOX

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

· CHECKED -инициализировать данный флаг, как отмеченный

· NAME -наименование поля ввода формы

· VALUE -значение поля ввода

Задание 4.3 - Создание списка независимых кнопок (элемент " Котлеты " указан как заранее отмеченный):

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_3.htm, откройте в браузере, должно появиться следующее отображение:

 

Тип элемента TEXT

Type=TEXT

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты

· SIZE=[число](ширина окна ввода в символах) и

· MAXLENGTH=[число](максимально допустимая длина вводимой строки в символах).

Задание 4.4: Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

 

Сохраните документ с именем пример4_4.htm, откройте в браузере, должно появиться следующее отображение:

Тип элемента PASSWORD

Type= PASSWORD

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*).

Задание 4.5: В первой строке определяется поле для ввода текста с именем. Во второй строке определяется окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

 

Сохраните документ с именем пример4_5.htm, откройте в браузере, должно появиться следующее отображение:

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

Тип элемента RESET

Type=RESET

Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name.

Задание 4.6: На экране формируется два поля для ввода текстовой информации и определяется кнопка Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_6.htm, откройте в браузере, должно появиться следующее отображение, где пользователем введены некоторые значения:

После нажатия на кнопку:

Тип элемента SUBMIT

Type=SUBMIT

Браузер выводит данный элемент, как кнопку, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>. Данный элемент используется при окончании ввода пользователем данных.

Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:

· NAME-наименование кнопки SUBMIT

· VALUE -значение переменной поля в вашей форме

 

Задание 4.7: На экране формируется кнопка, при нажатии на которую происходит переход на файл с изображением.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_7.htm, откройте в браузере, должно появиться следующее отображение:

 

Тип элемента IMAGE

Type=IMAGE

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

После щелчка пользователя по изображению браузер сохраняет координаты соответствующей точки экрана и принимает всю форму.

Вместе с атрибутом IMAGE должны использоваться следующие атрибуты:

· ALIGN –необязательный атрибут. указывает на положение изображения на экране

· NAME –наименование поля ввода формы

· SRC -URI файла- источника изображения

Задание 4.8

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_8.htm, откройте в браузере. :

 

Элемент SELECT

Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.

Для организации списков с прокруткой и выпадающим меню можно использовать атрибут < SELECT >. Для определения списка пунктов используются элементы < OPTION > внутри < SELECT >.

Вместе с атрибутом SELECT можно использовать следующие атрибуты:

· NAME- наименование объекта

· MULTIPLE - позволяет выбрать более чем одно наименование

· SIZE - определяет число пунктов, видимых для пользователя.

· SIZE = 1 - браузер выводит список на экран в виде выпадающего меню (видно одно наименование)
SIZE > 1 - браузер представляет на экране обычный список (число - количество видимых наименований)

С элементом OPTION можно использовать следующие атрибуты:

· SELECTED - для первоначального выбора значения элемента по умолчанию

· VALUE- значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу < OPTION>.

Меню <SELECT> из n элементов выглядит примерно так:

<SELECT NAME="[имя]"> <OPTION VALUE="[значение 1]">[текст 1] <OPTION VALUE="[значение 2]">[текст 2] ... <OPTION VALUE="[значение n]">[текст n] </SELECT>

Как Вы видите, меню начинается с метки <SELECT> и заканчивается меткой </SELECT>. Метка <SELECT>содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню. Присутствие атрибут MULTIPLE которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню. Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню. Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут CHECKED, показывающий, что данный элемент отмечен по умолчанию.

Задание 4.9: Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection, значение которой может быть option1 (по умолчанию), option2 или option3.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_9.htm, откройте в браузере, должно появиться следующее отображение:

 

Элемент TEXTAREA

Данный элемент используется для ввода большого количества текстовой информации (несколько строк).

Вместе с атрибутом TEXTAREA необходимо использовать следующие атрибуты:

· NAME- наименование поля

· COLS -число колонок (символов) в текстовой области

· ROWS- число видимых строк в текстовой области

Задание 4.10.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_10.htm, откройте в браузере, должно появиться следующее отображение:

Задание 4.11.Пример создания формы «Анкета пользователя»

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример4_11.htm, откройте в браузере, должно появиться следующее отображение:

 

Когда пользователь щелкает на кнопке «Отправить данные», браузер передает сообщение (метод POST) по адресу http://www.ok.com/ok, а тело сообщения будет выглядеть примерно так:

name=01eg+Ivanov&gender=male&family=2&country=Ukraine&other=None&[email protected]

Далее специальная программа, размещенная на сервере http://www.ok.com/ok начнет обработку ответов пользователя.

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

<form method="post" action="http://vvww.ok.com/ok">

На строку:

<FORM ACTION="mailto:[email protected]" ENCTYPE=text/plain>

На адрес [email protected] электронной почтой автоматически будет отправлено сообщение следующего содержания:

name=01eg+Ivanov&gender=male&family=2&country=Ukraine&other=None&[email protected]

Обратите внимание, изменен алгоритм кодирования на text/plain, то есть фактически выключено кодирование вообще.

Задание для самостоятельного выполнения:

Сформировать форму следующего содержания:

Предусмотреть отправку данных на адрес электронной почты.

 

Контрольные вопросы:

 

1. Перечислите основные элементы формы.

2. Как создать выпадающее меню?

3. Как создать кнопку сброса?