Лекция 11 Тема «Формы » Преподаватель: Халелова Е.Н. - презентация

1 Лекция 11 Тема «Формы » Преподаватель: Халелова Е.Н.

2 Вопросы темы: 1.Назначение формы в HTML-документе 2.Контейнер размещения формы 3.Параметры, определяющие способ и характеристики обработки, заключающейся в форме информации 4.Создание элементов управления 5.Группирование элементов управления

3 1.Назначение формы в HTML-документе Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки информация из нее попадает к программе, работающей на сервере. Для обработки большого количества откликов используются программы, поддерживающие (CGI) и расположенные на сервере, в адрес которого поступают отклики.

4 Форма представляет собой отдельную Интернет-страницу или часть страницы, на которой размещены разнообразные типовые для Windows элементы интерактивного диалога: поля ввода текста, раскрывающиеся списки и одна или несколько кнопок, обычно служащих для очистки формы и отправки введенных данных (сформированного информационного запроса) на сервер. TEST_FRM.htm

5 2. Контейнер размещения формы Для создания формы применяется контейнер В документе может быть несколько форм. Каждая пара тегов будет отвечать отдельной форме, но они не должны находиться одна внутри другой. TEST_FRM.htm TEST_FRM.htm

6 3. Параметры, определяющие способ и характеристики обработки, заключающейся в форме информации Атрибуты тега ACTION - определяет адрес URL или тип объекта, на который возлагается обработка (или передача) содержащейся в форме информации,(CGI-программа, скрипт или почтовый клиент ). METHOD - Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET.

7 GET – формируется типовое обращение к CGI- приложению, включающее в себя его адрес (значение параметра ACTION), символ «?» (признак, что далее следуют передаваемые CGI-программе значения) и сами данные (возвращаемые значения для каждого из элементов формы). POST – браузер сначала устанавливает связь с сервером, а затем, получив подтверждение от CGI-приложения, передает ей данные. При использовании в качестве обработчика адресации к почтовому ящику используется только значение POST

8 ENCTYPE - определяет, каким образом данные из формы будут закодированы для передачи обработчику. Допустимые значения: ENCTYPE= application/x-www-form-urlencoded - пересылает всю информацию(возвращаемые значения для всех компонентов формы) единым массивом и при этом преобразует пробелы в символы «+», а специальные символы и русские буквы – в пары символов, обозначающие шестнадцатеричный код ASCII, перед которым стоит знак %

9 ENCTYPE= multipart/form-data - предписывает пересылать каждое возвращаемое значение элемента формы в отдельном MIME- совместимом блоке (MIME – стандарт электронной почты). post1\MSIE_form.txt post2\MSIE_form.txt

10 Представление формы на сервер В атрибуте action содержится адрес URL, по которому будет представляться форма (при нажатии на кнопку Submit). Программы, предназначенные для обработки форм, располагаются в папке cgi-bin. bin/s97r …

11 Для передачи небольших форм с короткими полями используется метод GET. Если нужно передать форму, имеющую много длинных полей, указывается метод POST. Метод POST имеет также преимущества при работе с секретной информацией, когда передача (например, номеров кредитных карточек) выполняется отдельными транзакциями. Поэтому ввод этих данных в строку вместе с URL, как в методе GET неприемлем.

12 4. Создание элементов управления Для внесения информации пользователем в форму используется элемент Это и есть поля, в которые пользователь вводит информацию. Каждый элемент включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). TYPE – атрибут, указывающий тип элемента управления.

13 Атрибуты тега Type – тип элемента Align - выравнивание Checked – установка переключателя или флажка Name – идентификатор (имя) элемента Size – размер текстового поля Maxlength – максимальное число символов Src – задает URL ресурс нужного изображения Value – определяет значение для элемента Tabindex – порядок перемещения фокуса по элементам формы при нажатии Tab

14 Элементы формы 1.Текстовые поля: TYPE=text form1.htm 2. Поля ввода пароля: TYPE=password form2.htm 3. Скрытые поля: TYPE=hidden form8.htm

15 4. Поле выбора файлов: type=file form7.htm 5. Радиокнопки: TYPE=radio Да form5.htmform5.htm 6. Флажки: TYPE=checkbox Процессоры form4.htmform4.htm

16 7. Кнопки: TYPE=submit – отправка данных на сервер TEST_FRM.htm TYPE=reset – очистка полей формы 8. Многострочные текстовые поля: Наберите здесь сообщение form3.htmform3.htm

17 9. Списки: - элемент списка текст 1 текст 2 текст n form6.htmform6.htm показывает, что из меню можно выбрать несколько элементов.

18 5. Группирование элементов управления (теги, ) Чтобы страница (или форма) имела законченный вид, элементы должны быть распределены по группам. Для создания группы в HTML 4.0 предусмотрен тег. С помощью этого тега элементы со связанным содержанием распределяются по группам. Легенда группы элементов группа.htm

19 Контрольные вопросы: 1.C какой целью используются на Web-страницах формы? 2.С помощью какого контейнера можно описать форму? 3.Назовите атрибуты тега. 4.Каким образом передается введенная пользователем информация из формы на сервер? 5.Назовите элементы формы и способы их задания на Web-страницах. 6.Перечислите элементы управления (атрибут type). 7.Как задаются многострочные поля, списки? 8.Как можно сгруппировать элементы управления с похожей информацией