Web-программирование Кейно Павел Петрович pavel@mati.ru pavel@mati.ru. - презентация

1 Web-программирование Кейно Павел Петрович

2 Лекция 0 HTML-формы

3 Форма Форма создаётся с помощью тега, внутри неё могут быть любые необходимые теги, и характеризуется она следующими необязательными параметрами: адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы; элементами формы, которые представляют собой стандартные поля для ввода информации пользователем; кнопку отправки данных на сервер.

4 Пример формы Формы

5 Атрибут action Данные формы

6 Указание метода передачи данных Для указания в форме метода передачи данных используется атрибут method, принимающий значения GET или POST.

7 Передача данных методами GET и POST Метод GET Сохраняется в строке URL- адреса; адрес с запросом GET можно сохранить в закладках Кэшируется браузером Данные передаются в открытом виде и могут быть перехвачены Метод POST «Невидим» для пользователя при отправке Передача данных происходит в теле запроса Способен передавать большие объёмы данных Способен передавать файлы

8 Метод GET В данном примере CGI-сценарию yandsearch передаётся строка запроса, внутри которой содержатся переменные text со значением cats photo и lang со значениемru. Заголовок запроса начинается так: GET /yandsearch?text=cats+photo&lang=ru HTTP 1.1 ЗапросCGI-сценарий

9 Чередование методов GET и POST POST /passport?mode=auth HTTP/1.1 Host: passport.yandex.ru User-Agent: Mozilla/5.0 (Windows NT 6.1) Gecko/ Firefox/23.0 Content-Type: application/x-www-form-urlencoded Content-Length: 62 from=passport&login=john&passwd=mypass×tam p=

10 Связывание формы с полями Форма...

11 Отправка формы

12 Однострочное текстовое поле Параметры: disabled – заблокировать поле для ввода maxlength – максимальное число символов, которое возможно ввести в поле. name – имя поля size – ширина поля в символах value – начальный текст в поле

13 Поле для пароля Используются те же самые атрибуты, что и у type="text".

14 Многострочный текст Текст Атрибуты : cols – ширина поля в символах disabled, maxlength, name – также, как и в input. readonly – поле не может изменяться пользователем rows – высота поля в строках текста

15 Поле только для чтения Скопируйте приведённый текст и вставьте его в поле запроса пароля. Мухаха

16 Многострочный текст

17 Кнопки Существует два способа создания кнопок: Надпись на кнопке

18 Кнопка 1

19 Кнопка 2 Обычная кнопка Кнопка с рисунком

20 Кнопка 2

21 Кнопка Submit Надпись на кнопке Специальная кнопка Submit отправляет данные формы на сервер.

22 Отправка данных на сервер

23 Кнопка Reset Синтаксис: Надпись на кнопке Кнопка Reset сбрасывает данные формы в первоначальное состояние.

24 Кнопка Reset

25 Переключатели Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Атрибуты : checked – переключатель включён изначально name – поскольку переключатель является групповым элементом, имя должно быть у всей группы одинаковое. value – значение, отправляемое на сервер.

26 Переключатели Какое у вас состояние разума? Не дзен Дзен Полный дзен

27 Переключатели

28 Флажки Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Атрибуты те же самые, что и у переключателей.

29 Флажки В каких годах произошли самые известные извержения вулкана Кракатау?

30 Флажки

31 Поле со списком Синтаксис: Пункт 1 Пункт 2

32 Поле со списком

33 Тег Тег выступает контейнером для пунктов списка и определяет его вид. Атрибуты: multiple – будет отображать список со множественным выбором. name – определяет имя списка. size – устанавливает высоту списка.

34 Список множественного выбора Чебурашка Крокодил Гена Шапокляк Крыса Лариса

35 Тег Тег также имеет атрибуты, влияющие на вид списка: selected – делает текущий пункт списка выделенным value – определяет значение пункта списка, которое будет отправлено на сервер.

36 Группирование элементов списка Закуска Барская Раки, фаршированные по-царски Биточки в горшочке Галушки славянские Пампушки украинские Жаркое по-харьковски

37 Группирование элементов списка

38 Скрытое поле Предназначено для передачи промежуточных технических данных между страницами. Поле не видимо для пользователя. Атрибуты: name, value.

39 Скрытое поле Напишите любимое слово и нажмите кнопку Отправить (никакие данные не будут передаваться на сервер!):

40 Группирование элементов форм При создании сложной формы можно визуально группировать некоторые её элементы. Структура: Заголовок...

41 Группирование элементов форм Вход на сайт Логин: Пароль:

42 Группирование элементов форм

43 Лабораторная работа Сверстать произвольного вида форму с семантическим использованием всех пройденных элементов форм.