Организация взаимодействия с пользователем через формы

👀 230 просмотров
📌 166 загрузок

Выбери формат для чтения

Конспект лекции по дисциплине «Организация взаимодействия с пользователем через формы», pdf

Загружаем конспект в формате pdf

Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇

Конспект лекции по дисциплине «Организация взаимодействия с пользователем через формы», Word формат

Лекция Организация взаимодействия с пользователем через формы HTML-форма предназначена для обмена данными между клиентом и сервером. Форма на html странице оформляется с помощью тегов . Допускается внутри контейнера помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов. Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга. Структура формы: Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование. Этот элемент является обязательным в форме. Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега

. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элементов формы, а значение введено пользователем или установлено в поле формы по умолчанию. Для отправки данных используетcя методы GET или POST. Данные передаются на сервер HTTP запросом, который включает заголовок и тело. В заголовке указывается адрес, куда отправляется запрос, в теле – передаваемые данные. Если для отправки данных используется метод GET, то параметры передаются в заголовке запроса. Пары «имя=значение» перечисляются после вопросительного знака, указанного после адреса вызываемой программы, и разделяются между собой символом амперсанда (&). Эта информация видна в адресной строке браузера. Рекомендуется для передачи данных формы использовать метод POST, в этом случае параметры не прикрепляются к адресу, передаются в теле HTTP-запроса. Они не видны пользователю. Этот способ является более безопасным способом передачи данных. Элемент управления input Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Основной атрибут тега , определяющий вид элемента - type. Он позволяет задавать следующие элементы формы:  текстовое поле (text),  поле с паролем (password),  переключатель (radio),  флажок (checkbox), 1  скрытое поле (hidden),  кнопка (button),  кнопка для отправки формы (submit),  кнопка для очистки формы (reset),  кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Обязательными атрибутами тега input являются name и value. Именно эти атрибуты используются для передачи данных формы на сервер, они образуют пары имя=значение (name=value). Поля для ввода строки текста (text, password, hidden) Следующий тег создает на странице пустое поле (рисунок 6а) При отправке данных формы на сервер формируется пара username="". После того, как пользователь заполнит поле (рисунок 6б), при отправке на сервер формируется пара username="Алина". В поле можно занести значение по умолчанию в атрибуте value, при этом указанное значение отобразится в форме при открытии страницы (рисунок 6б). Если пользователь занесет новое значение в поле, то атрибуту value будет присвоено это новое значение. а) б) Рисунок 6. Текстовое поле Элемент управления «переключатель» (radio) Этот элемент используется для создания группы переключателей, описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь один переключатель из предложенных. Для описания группы взаимосвязанных переключателей, каждому элементу группы присваивается одинаковое имя. При этом атрибут value должен быть различен. Например: Пол:
Ж
name=gender value=m> M На странице эта группа будет выглядеть, как показано на рисунке 7а. a) б) Рисунок 7. Группа переключателей 2 Если пользователь ничего не выберет, на сервер будет отправлена пара gender=None. Если же будет отмечен один из переключателей (рисунок 7б), то на сервер будет отправлена пара gender="w". Можно по умолчанию указать один и переключателей как выбранный. Для этого используется атрибут checked. При загрузке странице сразу будет выбран первый переключатель (рисунок 7б). Пол:
Ж
name=gender value=m> M Элемент управления «флажок» (checkbox) Checkbox обычно используется для предоставления пользователю выбора типа «Да/Нет» или «Истина/Ложь». Элементы управления типа "флажок" можно объединять в группы для предоставления нескольких вариантов ответа, из которых пользователь может выбрать один или несколько. Для описания группы флажков, каждому элементу группы присваивается одинаковое имя. Это означает, что на сервер будет передаваться переменная-список, которая может содержать одно или несколько значений. Эти значения берутся из атрибута value. Поэтому атрибут value должен быть различен для каждого флажка. Например: value=1> value=2> value=3> Эконометрика
Базы данных
Теория игр
Программирование На странице эта группа будет выглядеть, как показано на рисунке 8а а) б) Рисунок 8. Группа флажков Если пользователь не выберет никаких флажков, то на сервер будет отправлена пара subject=[]. Если же на странице выбрано несколько элементов (рисунок 8б), то на сервер будет отправлена пара subject=[1, 2, 3]. Чтобы при загрузке страницы уже были отмечены один или несколько флажков, используется атрибут checked. Для выбора трех флажков, как показано на рисунке 8б, используется HTML-код: Эконометрика
checked value=1> Базы данных
checked value=2> Теория игр
checked value=3> Программирование Элемент управления «поле со списком» (select) Select используется для определения выпадающего списка, который появляется при нажатии мышью на элемент формы и позволяет пользователю выбрать один из вариантов. 3 Для определения доступных вариантов выбора используется теги