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

Презентация:



Advertisements
Похожие презентации
Интернет- технологии МИИГаИК. Указание XML-документов в ориентире на будущее
Advertisements

Формы в HTML. Элемент FORM Элемент уровня «блок» Управляющие элементы Просто текст Атрибуты: action – url обработчика method – post или get enctype –
Web-программирование Кейно Павел Петрович
Лекция 11 Тема «Формы » Преподаватель: Халелова Е.Н.
1 2 1.Формы в HTML-документах 2.1. Тег 3. ТЕГ 4. Тег 5. Тег.
5.7.7 Формы на Web-страницах.
Списки на Web – страницах. Интерактивные формы на Web – страницах
Интерактивные формы на Web- страницах - перевод строки - перевод строки - форма на Web-странице - форма на Web-странице - поле раскрывающего cписка -
Для создания интерактивных Web-страниц, обеспечивающих обратную связь, используются специальные формы. Форма – это набор элементов, таких как поля ввода,
JavaScript Объекты документа Объект History Свойства: current next previous length.
Фреймы Общие положения. Общие положения. Используя фреймы, позволяющие разбивать Web-страницы на множественные прокручиваемые подокна, вы можете значительно.
Внешне форма выглядит, как анкета, в которую посетитель может вписать свой текст или отметить выбранные значения из предлагаемого перечня. Форма выделяется.
Создание Web-сайта Тема раздела:Создание Web-сайта Тема раздела:
Язык создания web- страниц - HTML. Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная.
Создание форм Лекция 6. Сбор информации Элементы форм, такие как области редактирования текста, поля ввода флажков или меню, позволяют посетителям веб-сайта.
Ekaterina B. Egorkina,© VEELTECH.RU Загрузка и вывод изображений Каким образом можно сохранить картинку в БД, а потом отобразить ее на странице?
Струкова Наталья Федоровна, учитель математики и информатики высшей квалификационной категории. МБОУ «СОШ 13», г. Златоуст, Челябинская обл.
Инструментальные средства создания электронных образовательных ресурсов План лекции 3 Основные теги языка HTML: фреймы (кадры)
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net HTML элемент Вид элемента Атрибуты элементов Структура HTML документа.
Web-сайты и Web-страницы Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные.
Транксрипт:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Меню выбора в формах - пользователь может одновременно выбрать более чем один элемент списка. Атрибут 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.

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