Лабораторная работа Формы Цель познакомиться с разными видами пользовательских форм

• Название: Лабораторная работа Формы Цель познакомиться с разными видами пользовательских форм
• Анкор: Laba 6
• Дата: 28.10.2022
• Размер: 126.18 Kb.
• Имя файла: Laboratornaya_rabota_6_-_formy.docx
• Тип: Лабораторная работа; #760064

Лабораторная работа № 6.

Формы

Цель: познакомиться с разными видами пользовательских форм.
Пользовательская форма – это совокупность стандартных HTML-конструкций ввода текстовой и прочей информации и программы-обработчика этой информации, работающей на Web-сервере. Иными словами, пользовательская форма (или HTML-форма) служит для передачи информационных данных серверу.

Результат конструкций языка разметки HTML интерпретируется браузером, с помощью которого пользователь электронного документа получает информацию. Таким образом, объединив все эти формулировки, можно сказать, что HTML-форма выступает в роли посредника между пользователем и сервером.

Посетитель Web-страницы вводит в HTML-форму определенные данные, которые обрабатываются программой и отсылаются на Web-сервер. Все эти действия укладываются в три стадии:

1. 
   Ввод пользователем информации.
   
2. 
   Обработка введенной информации программой, установленной на сервере.
   
3. 
   Получение результата отправления введенной информации на Web-
   

сервер (открытие нового HTML-документа, переадресация на предыдущую страницу и пр.).

В качестве программы-обработчика чаще всего выступает CGI-сценарий (скрипт, который обычно разрабатывается на языке Perl или C/C++ и который взаимодействует со специальным компонентом Web-сервера -Common Gateway Interface) или программы, написанные на основе таких серверных языков программирования, как PHP, ASP, JSP и др.

Значение пользовательских форм трудно переоценить – они являются особым средством HTML, дающим посетителю возможность не только пассивно просматривать информацию, но и быть задействованным в содержании Web-сайта. Такое свойство принято называть интерактивностью, которая на сегодняшний день встречается практически во всех электронных документах.

Диапазон функций, выполняемых HTML-формами, чрезвычайно широк, поэтому ос- тановимся лишь на некоторых, наиболее распространенных направлениях.

1. Организация обратной связи

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

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

1. 
   Почтовая форма. Посетителя просят указать свои персональные данные и изложить суть обращения. Текст обращения обрабатывается программой и высылается автору сайта по электронной почте. При этом другие посетители сайта не могут получить доступ к содержанию отправленного сообщения;
   
2. 
   Гостеваякнига. Электронная книга жалоб и предложений, в которой любой желающий может оставить свой отзыв, поделиться впечатлениями о сайте, изложить критические замечания и указать на ошибки автора. В этом случае сообщения одного посетителя видимы для остальных пользователей гостевой книги;
   
3. 
   Интернет-форум. Более мощный инструмент стимулирования оценки пользовательской аудитории, нежели почтовая форма или гостевая книга. В интернет-форумах происходит многосторонний диалог, причем не только между человеком, задающим вопрос, и автором Web-сайта, но и между всеми пользователями данного интернет- ресурса. На вопрос одного пользователя может ответить другой, третий подскажет то, чего не упомянул второй, наконец, автор сайта подытожит высказывания всех пользователей и даст свой развернутый ответ. Часто в рамках интернет-форума работают дополнительные функциональные средства общения: личные сообщения, скрытые разделы форума для привилегированных пользователей, опросы общественного мнения и пр.;
   
4. 
   Чат. Средство чата (от англ, "to chat" — разговаривать, болтать) подразумевает единовременное общение многих пользователей в режиме реального времени. В отличие от гостевой книги или форума, где ответ на поставленный вопрос может быть выслан и через час, и через день, общение в чате происходит между двумя (или более) собеседниками так, будто они сидят в одной комнате. Собеседники могут находиться в разных городах, государствах и временных зонах, однако, присутствуя в чате, все пользователи способны общаться одновременно. В чатах также могут присутствовать некоторые дополнительные функции: приваты (отдельный разговор между двумя пользователями), система почтовых сообщений, голосования и т. д.
   

2. Авторизация

Для получения доступа к информации на многих интернет-ресурсах существует необходимость регистрации в сервисе. После регистрации, которая подразумевает указание

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

Система авторизации распространена на информационных ресурсах (новостные ленты, афиши событий), корпоративных серверах (закрытые разделы для клиентов, партнеров, дистрибьюторов), сайтах электронной почты и т, д.

2. Проведение исследований

Для изучения пользовательского спроса на тот или иной вид услуг, выявления и последующего анализа реакции посетителей, на многих сайтах устраиваются всевозможные опросы, анкетирования, голосования, тесты и пр.

Набор стандартных HTML-конструкций облегчает участие пользователя в подобных исследованиях. Все, что ему потребуется, это отметить подходящие варианты ответа и подтвердить участие в опросе.

2. Пользовательский профиль

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

Структура пользовательских форм

Структура любой пользовательской формы описывается тегом-контейнером

, внутри которого могут располагаться теги и параметры составляющих элементов HTML-формы. В пределах тега не может содержаться другая пользовательская форма. Закрывающий тег рбязателен для указания. Тег может содержать четыре основных параметра: ACTION, METHOD, NAME и ENCTYPE. Рассмотрим каждый из них.

Этот элемент необходим для построения сложных форм. Все формы начинаются тегом

и завершаются тегом

. После заполнения формы и подтверждения ввода со стороны пользователя введенная информация пересылается на сервер и обрабатывается при помощи CGI-программы, связанной с формой.

Параметр ACTION

Параметр ACTION является единственным обязательным параметром тега

и предназначен для указания пути на Web-сервере к программе обработчику данных пользовательской формы, например:

ACTION = "http://www.название.домен/имя программы">

Путь к программе-обработчику может быть как относительный, так и абсолютный. Значение этого параметра играет важную роль с точки зрения работоспособности

HTML-формы. Если путь или название программы указаны неверно или же указанный файл не является исполняемым на стороне сервера, то обработка введенных пользователем данных может быть нарушена, произведена некорректно или вовсе не быть осуществленной.

Наиболее распространенными типами исполняемых на стороне сервера файлами являются CGI-программы (с расширениями pi, cgi, fcgi), PHP-скрипты (php, php3, phtm, phtml), ASP-приложения (asp), JSP-обработчики (jsp) и др.

Одним из вариантов обработки формы может быть пересылка данных по электронной

почте:

ACTION ="mailto:Адрес@название.домен">

Параметр METHOD

Параметр METHOD применяется для указания протокола, используемого для пересылки данных на сервер. Протокол GET выбран по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используется протокол POST.

При использовании типа GET данные пользовательской формы пересылаются в составе адреса запроса браузера: после имени программы-обработчика ставится знак вопроса (?), обозначающий вывод запроса браузера к переменным HTML-формы, а также последовательность переменных и их свойств из самой формы. Последовательность переменных формы разделяется символом амперсанда "&".

Пример адреса запроса браузера с использованием типа передачи данных GET:

http://www.site.ru/ogi-bin/form.cgi?Name=Vasya&Email=[e-mail]

Из структуры ссылки, образовавшейся в ходе обработки данных формы, понятно, что пользователь ввел свое имя ("Vasya") и адрес электронной почты ("[e-mail]").

При использовании типа POST данные формы не отображаются в адресной строке браузера, а передаются в составе самого запроса профаммы-обработчйка. Таким образом, используя этот тип, мы получим следующую гиперссылку (учитывая те же данные формы, что и в случае с типом GET):

http://www.site.ru/cgi-bin/form.cgi

Следует отметить, что пользовательская форма может включать информацию о пользователе, носящую конфиденциальный характер (например, пароли доступа), которая будет отображена в запросе браузера при использовании типа GET. В этом случае вся секретная информация, введенная пользователем, будет доступна для просмотра любому пользователю данного компьютера (просмотр истории перехода по Web-сайтам в браузере легко обнаружит ссылку с конфиденциальными данными).

Но в конечном итоге выбор типа передачи данных на Web-сервер определяется конкретной задачей, стоящей перед автором HTML-формы, особенностями сервера и самой профаммы-обработчйка.

Параметр NAME

Параметр NAME присваивает HTML-форме уникальное имя, которое используется в программе-обработчике для идентификации пользовательских данных, например:

NAME="mail">

Параметр ENCTYPE

Параметр ENCTYPE предназначен для определения типа данных при кодировании информации, введенной пользователем, и последующей ее передаче на Web-сервер. Кодирование осуществляется браузером и используется для предотвращения разного рода искажений в процессе передачи на сервер.

Возможными значениями параметра могут быть: appiication/x-www-form-urlencoded (по умолчанию) и multipart/form-data.

Первое значение используется, если помимо текста необходимо передать на сервер данные иного типа (к примеру, фафику или запакованные файлы). Формат записи состоит из указания типа и его подтипа. Тип данных – это определение общего типа данных (текст, графика, архив, программа и т. д.), например, text, image, application. Подтип – это вид денных внутри определенного общего типа (image/gif, text/html).

Значение multipart/form-data используется в редких специфических случаях, например, при необходимости предоставить пользователю возможность зафузки на сервер любого файла со своего локального компьютера.

Пример.

METHOD="get | post" ACTION="URL">

Элементы_формы_и_другие_элементы_HTML

Этот элемент позволяет создавать различные элементы управления в форме:

• 
  текстовую строку;
  
• 
  поле ввода пароля;
  
• 
  поле выбора локального файла для загрузки на Web-сервер;
  
• 
  опцию выбора (флажки);
  
• 
  опцию переключения;
  
• 
  кнопку отправления пользовательских данных;
  
• 
  графический вариант кнопки отправления пользовательских данных;
  
• 
  кнопку сброса введенных пользовательских данных.
  

Элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов.
Атрибут type.позволяет указывать один из перечисленных элементов формы, каждому из которых соответствует конкретное значение.
type ="text" – это элемент текстовой строки.

Параметры текстовой строки

Параметр	Описание
size	Определение максимального количества символов, вводимых в текстовой строке без перемещения курсора.
maxlength	Определение максимального количества символов, допустимых для ввода в текстовой строке. По умолчанию количество вводимых символов не ограничено.
name	Присвоение идентификационного имени для программы-обработчика.
value	Указание значения текстовой строки (при просмотре в браузере выводится в виде обычного текста в самой строке).

Введите текст

type ="text" name="S001" value="Текст">



type="password" – это элемент ввода пользовательского пароля. Ничем не отличается от обыкновенной текстовой строки, за исключением того, что введенная информация отображается звездочками. Такая мера связана с сохранение конфиденциальности пользовательских данных, но данные, вводимые в это поле, при использовании типа передачи get будут отображаться в ссылке запроса браузера.

Введите пароль

type ="password" name="S001" value="один">

type="checkbox" – это элмент опции выбора, устанавливающий (снимающий) флажок для конкретного поля пользовательской формы.



Этот элемент используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI- программу, может принимать значение ON или OFF.

Параметры опции выбора

Параметр	Описание
name	Указание общего для всех вариантов выбора идентификационного имени.
value	Определение значения для конкретного варианта выбора (обязательный параметр). Не должен повторяться, так как при установке флажка передается на Web-сервер.
checked	Данный вариант является выбранным по умолчанию.

Пример.

Укажите свои увлечения

name="select_hobby" action="/cgi-bin/hobby.cgi" metod="get">

name="hobby" value="computers" checked> Компьютеры и Интернет





type="checkbox" name="hobby" value="art"> Литература и искусство





type="checkbox" name="hobby" value="music" checked> Музыка и танцы





type="checkbox" name="hobby" value="avto"> Автомобили





type="checkbox" name="hobby" value="sport"> Спорт



bgcolor="silver">

Укажите свою возрастную группу

name="select_age" action="/cgi-bin/hobby.cgi" metod="get">

type="radio" name="age" value="baby" checked> 0-5 лет





type="radio" name="age" value="child"> 5-12 лет





type="radio" name="age" value="junior" checked> 12-20 лет





type="radio" name="age" value="adult"> от 20 лет



bgcolor="silver">

Контактные данные

ФИО: NAME ="name" SIZE="44">


Адрес электронной почты: NAME ="email" SIZE =:"40">



type ="submit" value="Отправить">

type="reset" >

bgcolor="silver">

Анкета пользователя

Имя:	TYPE = "name" NAME = "name" SIZE = "30">	Пароль:	NAME = "name" SIZE = "10">
E-mail:	TYPE = "name" NAME = "name" SIZE = "30">	Подтверждение:	TYPE = "password" NAME = "name" SIZE = "10">
Улица:	TYPE = "name" NAME = "street1" SIZE = "30">	Дом, квартира:	TYPE = "name" NAME = "street2" SIZE = "10">
Город:	TYPE = "text" NAME = "sity" SIZE = "30">	Индекс:	TYPE = "text" NAME = "zip" SIZE = "10">
Область:	TYPE = "text" NAME = "state" SIZE = "30">

Укажите свою возрастную группу

name = "select_age" action = "/cgi-bin/hobby.cgi" metod = "get">

type="radio" name="age" value="baby" checked>0-5 лет

type="radio" name="age" value="child"> 5-12 лет

type="radio" name="age" value="junior"> 12-20 лет

type="radio" name="age" value="adult"> от 20 лет

Укажите свои увлечения

name="select_hobby" action="/cgi-bin/hobby.cgi" metod="get">

type="checkbox" name="hobby" value="computers"> Компьютеры

type="checkbox" name="hobby" value="art"> Литература

type="checkbox" name="hobby" value="music"> Музыка

type="checkbox" name="hobby" value="avto"> Автомобили

type="checkbox" name="hobby" value="sport"> Спорт



type ="submit" value="Отправить">

type="reset" value="Очистить">



bgcolor="silver">

Сообщите свои данные

Ваше имя:


name ="name" SIZE="30">


Ваш E-mail:


name ="e-mail" SIZE="30">


Комментарий:


Ваш комментарий...<br /><br />



type ="submit" value="Отправить">

type="reset" value="Очистить">

В каком городе вы живете?







selected=2 value=а> Москва

vа1uе=b> Санкт-Петербург

value=с> Казань

value=d> Ростов

value=d> Краснодар






В результате мы получим список. Оба элемента, создающие список, имеют собственные атрибуты.

Элементы SELECT и TEXTAREA могут быть использованы не в составе формы, а как самостоятельные детали Web-страницы. Их применение оправдано в тех случаях, когда надо увеличить плотность размещения данных. При помощи элемента SELECT можно создавать списки, которые получаются более компактными, чем стандартные списки, рассмотренные ранее. Область ввода текста также поможет сэкономить место на странице за счет того, что сколь угодно большой текст будет прокручиваться в окне фиксированного размера.

Задания к лабораторной работе № 6 Формы

№	Общие задания
1.	Создайте HTML – форму "Личная", в которой пользователь будет задавать свое имя, фамилию, адрес, интересы (может быть несколько), username, password.

№	Общие задания
	Предусмотреть текстовое поле для комментария из нескольких строк. Предусмотрите в данной форме гиперссылку для перехода на другой Web – документ.
2.	В новом HTML – документе разработайте HTML-форму, в которой на примере своей зачетной книжке (дисциплина и оценка), покажите использование различных видов списков для компоновки форм, использование флажков и переключателей.