Разработка и использование интерактивных форм Общие положения. Общие положения. Современные браузеры позволяют пользователю, заполнив специальную форму, - презентация

1 Разработка и использование интерактивных форм Общие положения. Общие положения. Современные браузеры позволяют пользователю, заполнив специальную форму, выполнять некоторые действия на вашем Web-сервере. Когда форма интерпретируется браузером, создается специальные экранные элементы GUI, такие, как поля ввода, флажки, радиокнопки, выпадающие меню, списки прокрутки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом. Современные браузеры позволяют пользователю, заполнив специальную форму, выполнять некоторые действия на вашем Web-сервере. Когда форма интерпретируется браузером, создается специальные экранные элементы GUI, такие, как поля ввода, флажки, радиокнопки, выпадающие меню, списки прокрутки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

2 Синтаксис Все формы начинаются тэгом и завершаются тэгом, например: Все формы начинаются тэгом и завершаются тэгом, например: Элементы_формы_и_другие_элементы_ HTML Элементы_формы_и_другие_элементы_ HTML Здесь: Здесь: NAME – имя формы. Используется, если форм в документе несколько. NAME – имя формы. Используется, если форм в документе несколько.

3 Синтаксис METHOD - Метод посылки сообщения с данными из формы. Вы можете посылать результаты ввода данных в форму двумя путями: METHOD - Метод посылки сообщения с данными из формы. Вы можете посылать результаты ввода данных в форму двумя путями: GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется. GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется. GET

4 Синтаксис POST: Информация из формы не отображается в URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется пе­ременная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию. POST: Информация из формы не отображается в URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется пе­ременная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию. ACTION - описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI- программу, обрабатывающую данную форму, но может применять протокол mailto:. ACTION - описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI- программу, обрабатывающую данную форму, но может применять протокол mailto:.mailto:

5 Тэги формы - используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст), например : - используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст), например : Текст по умолчанию Текст по умолчанию Тэг необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов: Тэг необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов: NAME - имя поля ввода, NAME - имя поля ввода, ROWS - высота поля ввода в символах, ROWS - высота поля ввода в символах, COLS - ширина поля ввода в символах. COLS - ширина поля ввода в символах. DISABLED – запрещает ввод данных в поле DISABLED – запрещает ввод данных в поле

6 Тэги формы - используется для ввода одной строки текста или одного слова (значения). - используется для ввода одной строки текста или одного слова (значения). Атрибуты: Атрибуты: NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле. NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле. SIZE - определяет визуальный размер поля ввода на экране в символах. SIZE - определяет визуальный размер поля ввода на экране в символах. TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны: TYPE=… TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны: TYPE=…

7 Тэги формы Типы ввода: Типы ввода: CHECKBOX - Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI- программу, может принимать значение ON или OFF. CHECKBOX - Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI- программу, может принимать значение ON или OFF. HIDDEN - Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в CGI-программу статической информации, как то ID пользователя, пароля или другой информации. HIDDEN - Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в CGI-программу статической информации, как то ID пользователя, пароля или другой информации.

8 Тэги формы Типы ввода: Типы ввода: IMAGE - позволяет связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением.x в конце имени. В эту переменную будет помещена X- координата точки в пикселах (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия. IMAGE - позволяет связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением.x в конце имени. В эту переменную будет помещена X- координата точки в пикселах (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия.

9 Тэги формы Переменная с именем, содержащимся в NAME и с добавленным.y, будет содержать Y- координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом. Переменная с именем, содержащимся в NAME и с добавленным.y, будет содержать Y- координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом. TEXT - Данный тип поля ввода описывает однострочное поле ввода. Ис­пользуйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов). TEXT - Данный тип поля ввода описывает однострочное поле ввода. Ис­пользуйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

10 Тэги формы RADIO - позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране. RADIO - позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.

11 Тэги формы PASSWORD - То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране. PASSWORD - То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране. RESET - кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке. RESET - кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке. SUBMIT - кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке. SUBMIT - кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке. BUTTON - кнопка, при нажатии которой не происходит ничего. Служит для вызова сценариев. BUTTON - кнопка, при нажатии которой не происходит ничего. Служит для вызова сценариев.

12 Тэги формы Атрибуты: Атрибуты: CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран. CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран. MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности. MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности. SRC - URL, указывающий на картинку (используется совместно с атрибутом IMAGE). SRC - URL, указывающий на картинку (используется совместно с атрибутом IMAGE).

13 Тэги формы Атрибуты: Атрибуты: VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен). VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен). CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран. CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран. DISABLED – запрещает ввод данных в поле любого типа, включая BUTTON. DISABLED – запрещает ввод данных в поле любого типа, включая BUTTON. Рассмотрим пример: Рассмотрим пример:пример

14 Меню выбора в формах Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм: Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм: - пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Обычно это представлено выпадающим меню. Тэг SELECT имеет один или более параметр между стартовым тэгом и завершающим. По умолчанию, первый элемент отображается в строке выбора. - пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Обычно это представлено выпадающим меню. Тэг SELECT имеет один или более параметр между стартовым тэгом и завершающим. По умолчанию, первый элемент отображается в строке выбора.

15 Меню выбора в формах Вот пример тэга : Вот пример тэга : AT 386 AT 386 AT 486 AT 486 AT 586 AT 586 Атрибут selected в теге позволяет задать элемент списка, выбранный по умолчанию. Атрибут selected в теге позволяет задать элемент списка, выбранный по умолчанию.

16 Меню выбора в формах - то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора. Если их больше, чем указано, то предоставляется автоматический вертикальный скроллинг. Пример: - то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора. Если их больше, чем указано, то предоставляется автоматический вертикальный скроллинг. Пример: AT 386 AT 386 AT 486 AT 486 AT 586 AT 586 Pentium PRO Pentium PRO

17 Меню выбора в формах - пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов. Пример: - пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов. Пример:Пример AT 386 AT 386 AT 486 AT 486 AT 586 AT 586 Pentium PRO Pentium PRO Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE. Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.

18 Отправление файлов при помощи форм Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов. Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов. Например: Например: Например Отправить данный файл: Отправить данный файл: