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

Содержание

Слайд 2

Лекция 0

HTML-формы

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

Слайд 3

Форма

Форма создаётся с помощью тега

, внутри неё могут быть любые необходимые

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

Слайд 4

Пример формы





Формы



Пример формы Формы
name="a">





Слайд 5

Атрибут action





Данные формы



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






Слайд 6

Указание метода передачи данных

Для указания в форме метода передачи данных используется атрибут

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

Слайд 7

Передача данных методами GET и POST

Метод GET

Сохраняется в строке URL-адреса; адрес с

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

Метод POST

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

Слайд 8

Метод GET

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

Метод 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)

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

Слайд 10

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





Форма


Связывание формы с полями Форма ...
id="auth" action="handler.php" method="post">

...







Слайд 11

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





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


Слайд 12

Однострочное текстовое поле


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

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

Слайд 13

Поле для пароля


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

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

Слайд 14

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


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

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

Слайд 15

Поле только для чтения



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

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





Слайд 16

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

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

Слайд 17

Кнопки

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


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

Слайд 18

Кнопка 1




Кнопка 1


Слайд 19

Кнопка 2




Кнопка 2 Обычная кнопка Кнопка с рисунком
style="vertical-align:middle">
Кнопка с рисунком




Слайд 20

Кнопка 2

Кнопка 2

Слайд 21

Кнопка Submit



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

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

Слайд 22

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






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

Слайд 23

Кнопка Reset

Синтаксис:


Кнопка Reset сбрасывает данные формы в

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

Слайд 24

Кнопка Reset





Кнопка Reset
type="reset" value="Очистить">




Слайд 25

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

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

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

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

Слайд 26

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


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


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


Дзен


Полный дзен




Слайд 27

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

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

Слайд 28

Флажки

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

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

Слайд 29

Флажки


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


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

1417


1680


1883


1934


2010




Слайд 30

Флажки

Флажки

Слайд 31

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

Синтаксис:

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

Слайд 32

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

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

Слайд 33

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

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

Слайд 34

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





Слайд 35

Тег

Тег

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

Слайд 36

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





Слайд 37

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

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

Слайд 38

Скрытое поле

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

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

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

Слайд 39

Скрытое поле


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

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







Слайд 40

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

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


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

Слайд 41

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



Вход на сайт

Логин:


Пароль:

Группирование элементов форм Вход на сайт Логин: Пароль:
type="password" name="pass">





Слайд 42

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

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