Web- программирование

Содержание

1. Web- программирование
2. Лекция 0HTML-формы
3. ФормаФорма создаётся с помощью тега , внутри
4. Пример формы Формы
5. Атрибут action Данные формы
6. Указание метода передачи данныхДля указания в форме
7. Передача данных методами GET и POSTМетод GETСохраняется
8. Метод GEThttp://yandex.ru/yandsearch?text=cats+photo&lang=ru В данном примере CGI-сценарию yandsearch передаётся
9. Чередование методов GET и POSTPOST /passport?mode=auth HTTP/1.1Host: passport.yandex.ruUser-Agent: Mozilla/5.0 (Windows NT 6.1) Gecko/20100101 Firefox/23.0Content-Type: application/x-www-form-urlencodedContent-Length: 62from=passport&login=john&passwd=mypass×tamp=1379013756458
10. Связывание формы с полями Форма ...
11. Отправка формы
12. Однострочное текстовое полеПараметры:disabled – заблокировать поле для
13. Поле для пароляИспользуются те же самые атрибуты, что и у type="text".
14. Многострочный текст ТекстАтрибуты :cols – ширина поля
15. Поле только для чтения Скопируйте
16. Многострочный текст
17. КнопкиСуществует два способа создания кнопок:Надпись на кнопке
18. Кнопка 1
19. Кнопка 2 Обычная кнопка
20. Кнопка 2
21. Кнопка SubmitНадпись на кнопкеСпециальная кнопка Submit отправляет данные формы на сервер.
22. Отправка данных на сервер
23. Кнопка ResetСинтаксис:Надпись на кнопкеКнопка Reset сбрасывает данные формы в первоначальное состояние.
24. Кнопка Reset
25. ПереключателиПереключатели (жарг. радиокнопки) используют, когда необходимо выбрать
26. Переключатели Какое у вас состояние разума?
27. Переключатели
28. ФлажкиФлажки (жарг. чекбоксы) используют, когда необходимо выбрать
29. Флажки В каких годах произошли самые
30. Флажки
31. Поле со спискомСинтаксис: Пункт 1 Пункт 2
32. Поле со списком
33. Тег Тег выступает контейнером для пунктов списка
34. Список множественного выбора Чебурашка
35. Тег Тег также имеет атрибуты, влияющие на
36. Группирование элементов списка Закуска Барская Раки, фаршированные
37. Группирование элементов списка
38. Скрытое полеПредназначено для передачи промежуточных технических данных между страницами. Поле не видимо для пользователя.Атрибуты:name, value.
39. Скрытое поле Напишите любимое слово и нажмите
40. Группирование элементов формПри создании сложной формы можно визуально группировать некоторые её элементы.Структура: Заголовок ...
41. Группирование элементов форм Вход на сайт Логин: Пароль:
42. Группирование элементов форм
43. Лабораторная работаСверстать произвольного вида форму с семантическим использованием всех пройденных элементов форм.
44. Скачать презентанцию

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

Слайды и текст этой презентации

Слайд 1Web-программирование

Слайд 2Лекция 0
HTML-формы

Слайд 3Форма
Форма создаётся с помощью тега , внутри неё могут быть

любые необходимые теги, и характеризуется она следующими необязательными параметрами:
адрес программы

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

ФормаФорма создаётся с помощью тега , внутри неё могут быть любые необходимые теги, и характеризуется она следующими

Слайд 4Пример формы

Формы

Слайд 5Атрибут action

Данные формы

Слайд 6Указание метода передачи данных
Для указания в форме метода передачи данных

используется атрибут “method”, принимающий значения “GET” или “POST”.

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

Слайд 7Передача данных методами GET и POST
Метод GET
Сохраняется в строке URL-адреса;

адрес с запросом GET можно сохранить в закладках
Кэшируется браузером
Данные передаются

в открытом виде и могут быть перехвачены

Метод POST

«Невидим» для пользователя при отправке
Передача данных происходит в теле запроса
Способен передавать большие объёмы данных
Способен передавать файлы

Передача данных методами GET и POSTМетод GETСохраняется в строке URL-адреса; адрес с запросом GET можно сохранить в

Слайд 8Метод GET
http://yandex.ru/yandsearch?text=cats+photo&lang=ru

В данном примере 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/20100101 Firefox/23.0
Content-Type: application/x-www-form-urlencoded
Content-Length: 62

from=passport&login=john&passwd=mypass×tamp=1379013756458

Чередование методов GET и POSTPOST /passport?mode=auth HTTP/1.1Host: passport.yandex.ruUser-Agent: Mozilla/5.0 (Windows NT 6.1) Gecko/20100101 Firefox/23.0Content-Type: application/x-www-form-urlencodedContent-Length: 62from=passport&login=john&passwd=mypass&timestamp=1379013756458

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

Форма

...

type="password" name="pass" form="auth">

Слайд 11Отправка формы

formaction="handler.php" formmethod="post">

Слайд 12Однострочное текстовое поле

Параметры:
disabled – заблокировать

поле для ввода
maxlength – максимальное число символов, которое возможно ввести

в поле.
name – имя поля size – ширина поля в символах
value – начальный текст в поле

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

Слайд 13Поле для пароля

Используются те же самые атрибуты, что

и у type="text".

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

Слайд 14Многострочный текст

Текст

Атрибуты :
cols – ширина поля в символах
disabled,

maxlength, name – также, как и в input. readonly – поле

не может изменяться пользователем rows – высота поля в строках текста

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

Слайд 15Поле только для чтения

Скопируйте приведённый

текст и вставьте его в
поле запроса пароля.

name="comment" readonly>Мухаха

Слайд 16Многострочный текст

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

Надпись на кнопке

Слайд 18Кнопка 1

меня нежно ">

Слайд 19Кнопка 2

Обычная кнопка

Кнопка с

рисунком

Слайд 20Кнопка 2

Слайд 21Кнопка Submit

Надпись на кнопке
Специальная кнопка Submit отправляет

данные формы на сервер.

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

Слайд 23Кнопка Reset
Синтаксис:

Надпись на кнопке
Кнопка Reset сбрасывает данные

формы в первоначальное состояние.

Слайд 24Кнопка Reset

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

из нескольких предложенных.

Атрибуты :
checked – переключатель включён

изначально
name – поскольку переключатель является групповым элементом, имя должно быть у всей группы одинаковое.
value – значение, отправляемое на сервер.

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

Слайд 26Переключатели

Какое у вас состояние разума?

Не дзен

value="dzen"> Дзен

Полный дзен

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

Слайд 27Переключатели

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

из предложенного списка.
Атрибуты те же самые, что и

у переключателей.

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

Слайд 29Флажки

В каких годах произошли самые известные

извержения вулкана Кракатау?
1417

1680

1883

1934

2010

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

Слайд 30Флажки

Слайд 31Поле со списком
Синтаксис:

Пункт 1
Пункт 2

Слайд 32Поле со списком

Слайд 33Тег
Тег выступает контейнером для пунктов списка и определяет

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

определяет имя списка.
size – устанавливает высоту списка.

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

Слайд 34Список множественного выбора

selected value="s1">Чебурашка
Крокодил Гена
Шапокляк

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

Слайд 35Тег
Тег также имеет атрибуты, влияющие на вид списка:
selected

– делает текущий пункт списка выделенным
value – определяет значение пункта

списка, которое будет отправлено на сервер.

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

Слайд 36Группирование элементов списка

Закуска Барская

Раки, фаршированные по-царски
Биточки в горшочке

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

Слайд 38Скрытое поле
Предназначено для передачи промежуточных технических данных между страницами. Поле

не видимо для пользователя.

Атрибуты:
name, value.

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

Слайд 39Скрытое поле

Напишите любимое слово и нажмите кнопку

Отправить
(никакие данные не будут передаваться на сервер!):

size="25" name="word">

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

её элементы.
Структура:

Заголовок
...

Слайд 41Группирование элементов форм

Вход на сайт
Логин:

Пароль:

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

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

элементов форм.

Скачать презентацию

Разделы презентаций

Web- программирование

Содержание

Слайды и текст этой презентации

Слайд 1Web-программирование

Слайд 2Лекция 0HTML-формы

Слайд 3ФормаФорма создаётся с помощью тега , внутри неё могут быть

любые необходимые теги, и характеризуется она следующими необязательными параметрами:адрес программы

Слайд 4Пример формы Формы

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

Слайд 6Указание метода передачи данныхДля указания в форме метода передачи данных

используется атрибут “method”, принимающий значения “GET” или “POST”.

Слайд 7Передача данных методами GET и POSTМетод GETСохраняется в строке URL-адреса;

адрес с запросом GET можно сохранить в закладкахКэшируется браузеромДанные передаются

Слайд 8Метод GEThttp://yandex.ru/yandsearch?text=cats+photo&lang=ru В данном примере CGI-сценарию yandsearch передаётся строка запроса, внутри

которой содержатся переменные “text” со значением “cats photo” и “lang”

Слайд 9Чередование методов GET и POSTPOST /passport?mode=auth HTTP/1.1Host: passport.yandex.ruUser-Agent: Mozilla/5.0 (Windows

NT 6.1) Gecko/20100101 Firefox/23.0Content-Type: application/x-www-form-urlencodedContent-Length: 62from=passport&login=john&passwd=mypass×tamp=1379013756458

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

...

Слайд 11Отправка формы

formaction="handler.php" formmethod="post">

Слайд 12Однострочное текстовое полеПараметры:disabled – заблокировать

поле для вводаmaxlength – максимальное число символов, которое возможно ввести

Слайд 13Поле для пароляИспользуются те же самые атрибуты, что

и у type="text".

Слайд 14Многострочный текст ТекстАтрибуты :cols – ширина поля в символахdisabled,

maxlength, name – также, как и в input. readonly – поле

Слайд 15Поле только для чтения Скопируйте приведённый

текст и вставьте его в поле запроса пароля.

Слайд 16Многострочный текст

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

Слайд 18Кнопка 1

меня нежно ">

Слайд 19Кнопка 2 Обычная кнопка

Кнопка с

Слайд 20Кнопка 2

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

данные формы на сервер.

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

Слайд 23Кнопка ResetСинтаксис:Надпись на кнопкеКнопка Reset сбрасывает данные

формы в первоначальное состояние.

Слайд 24Кнопка Reset

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

из нескольких предложенных.Атрибуты :checked – переключатель включён

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