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

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

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

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

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

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

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

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

Чередование методов 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&timestam p=

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

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

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

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

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

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

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

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

Кнопка 1

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

Кнопка 2

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

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

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

Кнопка Reset

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

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

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

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

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

Флажки

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

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

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

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

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

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

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

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

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

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

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

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

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