Web средства поддержки бизнеса

Тема 1: Создание web форм и элементов управления в html документе

Цель работы: Овладеть навыками разработки Web форм в HTML документе с использованием элементов управления для организации диалога в Web приложениях.

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

Для обработки этих данных используются т.н. серверные приложения – специальные программные модули, написанные на javascript, php и др..

Схема работы серверного приложения.

— Пользователь вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.

—После этого, посетитель нажимает расположенную в той же Web-форме особую кнопку — кнопку отправки данных.

— Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу (URL-адрес).

— Web-сервер перехватывает отправленные данные, запускает серверное приложение и передает данные ему.

— Серверное приложение обрабатывает полученные данные.

— Серверное приложение формирует Web-страницу с результатами обработки данных посетителя и передает ее Web-серверу.

— Web-сервер получает сформированную серверным приложением Web-страницу и отправляет ее посетителю.

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

—Интернет-адрес серверного приложения. Это обычный интернет-адрес, указывающий на файл серверного приложения, вида http://www.somesite.ru/apps/app.exe.

— Метод кодирования данных.

— Метод отправки данных.

Для создания Web-формы HTML предусмотрен особый тег form></form>. Все остальные элементы формы располагаются между этими тегами. Внутри тэга можно ставить любые другие элементы кроме другого элемента <form>.

У тега <form> есть несколько параметров:

• name - имя формы. Необходимо, если на странице несколько форм

• action - определяет URL-адрес, по которому будет отправлена информация, введенная пользователем

• method - определяет способ отправки информации

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

Атрибут action – обязательный. В нем указывается адрес серверной программы, которая будет выполнять действия с данными формы после их отправления (письмо отправляется на указанный электронный адрес). Адрес может быть относительным или абсолютным.

Пример:

<form name=”NewForm” action=http://bmstu.ru/search.php> - абсолютный адрес.

<form name=”NewForm” action=”search.php”> относительный адрес.

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

<form name=”NewForm” action="#">

</form>

Атрибут method , задающий способ отправки данных, определяется опциями GET или POST (по умолчанию GET).

GET берет адрес указанный в ACTION и присоединяет к нему знак ?, за которым следует в открытом виде передаваемая последовательность данных.

Например поисковый, запрос будет выглядеть так:

https://www.google.ru/search?ie=UTF-8&hl=ru&q=%D1%84%D0%BE%D1%80%D0%BC%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%20html

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

В этих случаях для конфиденциальности передаваемых данных используется другой метод - method =POST

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

Из данных формы создается специальный объект - тело запроса. Такой объект и отправляется только методом POST. (Метод multipart/form-data)

Элементы формы.

Для создания элементов формы используется тег <input>.

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

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

• Элементы ввода

• Элементы выбора

• Кнопки

• Дополнительные

У каждого элемента Web-формы имеется атрибут name value, в которой эти элементы управления находятся, при этом сформируются пары вида <имя элемента управления>=<введенные в него данные>, которые форма отправит серверному приложению

Текстовое поле

Простое однострочное текстовое поле, в которое можно вводить и редактировать текст, задается тегом <input> вида

Результат

Параметры:

• name - имя элемента,

• type - тип элемента (в данном случае - text),

• size - размер текстового поля в символах, которые одновременно будут видны. При вводе бОльшего количества символов, они будут прокручиваться,

• maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,

• value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.

Возможны еще два параметра:

• disabled - блокирует поле от любых изменений,

• readonly - делает поле доступным только для чтения.

Пример:

Результат:

Текстовое поле для ввода пароля

Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра type : type="password".

Пример:

Результат:

Задание 1: Создайте в блокноте новый документ в формате html для формирования фрагмента анкеты студента.

Анкета должна содержать следующие текстовые поля:

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

Флажки

В бланках, заявках, анкетах и т.п. часто встречаются подобные элементы:

Он задается все тем же тегом <input>, причем один тег задает один флажок. Нужно четыре флажка, придется четыре раза писать input.

Пример:

Рассмотрим его параметры:

• type - тип элемента (в данном случае - checkbox),

• name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,

• value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",

• checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

Задание 2: Продолжить создание в блокноте анкеты студента.

Создайте для выбора по технологии флажков перечень возможных видов деятельности во внеучебное время: Научно-исследовательской работой, Техническим творчеством, Художественным творчеством, Спортом, Культурно-массовой работой, Подрабатываю, Другое, Ничем не занимаюсь.

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

В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio", все остальные такие же, как у флажков.

Пример:

Результат:

Задание 3: Продолжить создание в блокноте анкеты студента.

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

Кнопки

Существует четыре вида кнопок:

• submit - кнопка отправки содержимого формы web-серверу. Ее параметры:

  • type="submit" - тип кнопки,

  • name - имя кнопки,

  • value - надпись на кнопке.

• image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:

  • type="image" - тип графической кнопки,

  • name - имя кнопки,

  • src - адрес картинки для кнопки.

• reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:

  • type="reset" - тип кнопки очищения,

  • name - имя кнопки,

  • value - надпись на кнопке.

• button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:

  • type="button" - тип произвольной кнопки,

  • name - имя кнопки,

  • value - надпись на кнопке.

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

Если на форме несколько кнопок, то они должны иметь разные названия.

Пример кода:

Результат:

Кнопки можно задавать и по другому, при помощи тегов <button> </button>. Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

• type - тип кнопки, может принимать значения:

  • reset - кнопка очистки формы,

  • submit - кнопка отправки данных,

  • button - кнопка произвольного действия.

• name - имя кнопки,

• value - надпись на кнопке.

Пример кода:

Результат:

Задание 4: Продолжить создание в блокноте анкеты студента.

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

Поле для выбора файлов

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

Пример:

Результат:

Задание 5: Продолжить создание в блокноте анкеты студента.

Создать свою форму для выбора файлов на бланке анкеты.

Многострочное текстовое поле

Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea> </textarea> и имеет следующие параметры:

• name - имя поля,

• cols - ширина поля в символах,

• rows - количество строк текста, видимых на экране,

• wrap - способ переноса слов:

  • off - переноса не происходит,

  • virtual - перенос отображается, но на сервер поступает неделимая строка,

  • physical - перенос и на экране и при поступлении на сервер.

• disabled - неактивное поле,

• readonly - разрешено только чтение.

Пример:

Результат:

Задание 6: Продолжить создание в блокноте анкеты студента.

Создайте три окна для многострочного текста:

1-ое окно – «Отзыв на курсовую работу»

2-ое окно – «Впечатления от посещения выставки»

3-е окно – «Отчет об участии в субботнике»

Оцените и прокомментируйте разницу в значениях параметра wrap.

Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>. Рассмотрим параметры этих тегов:

• <select>:

  • name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.

  • size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки.

  • multiple - разрешает выбор нескольких элементов списка.

• <option>:

  • selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.

  • value - значение, которое будет отправлено серверу, если пункт выбран.

Пример:

Результат:

Существуют еще теги <optgroup> </optgroup>, позволяющие группировать элементы списка по каким-либо признакам. Например, мы хотим задать каталог сайтов в виде списка, тогда удобнее разбить его на группы по интересам:

Для этого нам и нужны теги <optgroup> </optgroup> с одним параметром label, который и задает название группе элементов.

Пример кода:

Обратите внимание, в данном случае необходимо указывать закрывающие теги </option>.

Задание 7: Продолжить создание в блокноте анкеты студента.

Создать раскрывающийся список для указания месяца и дня недели, в котором целесообразно проводить консультации по курсу КБТ.

Надписи

Все элементы формы можно связать с их надписями при помощи элемента <label> и его параметра for, значением которого является имя элемента, с которым связываем надпись.

Например:

Результат:

Обобщающий пример

Результат:

Сохранить оба файла «анкеты» и с расширением *.html и с расширением *.txt для возможности контроля и редактирования при защите работы.

Валидация полей формы

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

1. Подключить скрипт

2. Связать скрипт с проверяемой формой

3. Для проверяемых элементов формы написать выражение проверки

Скрипт проверки формы

1. Подключение скрипта к HTML документу: директива вызова скрипта записывается в HTML документ содержащий форму до закрывающего тега HEAD!:

<script src="gen_validatorv4.js" type="text/javascript"></script>

</head>

2. Связать скрипт с проверяемой формой

Сразу после формы необходимо создать объект Validator() и передать ему id формы.

<form id='myform' action="">

<!---- поля формы -->

</form>

 

<script type="text/javascript">

var frmvalidator  = new Validator("myform");

// myform это идентификатор формы

В данном случае создан объект с именем frmvalidator . Имя может отличаться.

• Для проверяемых элементов формы необходимо задать выражение проверки

В общем виде функция проверки выглядит следующим образом

frmvalidator.addValidation(Field Name, Validation Descriptor, Error String);

Где,

Field Name Название проверяемого поля

Validation Descriptor Выражение для проверки

Error String Строка сообщения об ошибке, появляется если при некорректном введенном значении в поле. Поле необязательное и может быть опущено.

Например, так будет выглядеть проверка первого текстового поля в нашей форме

<form action="" id="myform" >

<p>

    <label for='FirstName'>Имя:</label>

    <input type="text" id="FirstName" name="FirstName" />

</p>

…

</form>

<script  type="text/javascript">

var frmvalidator = new Validator("myform");

frmvalidator.addValidation("FirstName","req","Введите имя");

frmvalidator.addValidation("FirstName","maxlen=20",

        "Максимальная длина имени 20 символов");

…

</script>

Важно! Для работы скрипта необходимо у каждого элемента формы и самой формы прописать ID. Выражения javascript ссылаются на них!

Таблица

Дескриптор выражения проверки	Использование
required or req	Не допускается пустого поля – обязательное значение в поле. Применяется для текстовых полей и многострочных текстовых полей.
maxlen=??? Or maxlength=???	Максимальная длина вводимого поля текстаt Пример “maxlen=20″
minlen=??? Or minlength=???	Минимальная длина вводимого текста Пример “minlen=5″
alphanumeric or alnum	Поле может содержать только буквы и цифры
alphanumeric_space alnum_s	Может содержать символы, цифры и пробелы
Num numeric	Только цифры
alpha alphabetic	Только символы.
alpha_s alphabetic_space	Только символы и пробелы
email	Проверяет введен ли адрес электронной почты
lt=??? Less than=???	Проверяет что данные в поле меньше указанного значения. Пример: Если вводимое значение не должно быть больше 1000 должно быть введено “lt=1000″
gt=??? greaterthan=???	Проверяет что данные в поле больше указанного значения.
regexp=???	Проверка на соответствие регулярному выражению. Example: “regexp=^[A-Za-z]{1,20}$” позволяет ввести до 20 букв латиницы.
dontselect=??	Проверка только для выпадающих полей. Поле содержит отображаемое по умолчанию и пользователь должен выбрать любое поле кроме данного.Если значение поля ’000′, выражение для проверки должно быть“dontselect=000″
dontselectchk=??	Это выражение используется только для полей check boxes. Пользователь не может выбрать данное поле. Пример: dontselectchk=on
shouldselchk=??	Это выражение используется только для полей check boxes. Пользователь должен выбрать данное поле. Пример: Fshouldselchk=on
selone_radio	Одна из радио кнопок должна быть выбрана. Пример: chktestValidator.addValidation("Options","selone");
Сравнение двух элементов формы
eqelmnt=???	Сравнивает два поля формы. Например: пароль and и его подтверждения. Замените ???названием другого поля формы. Например: frmvalidator.addValidation("confpassword","eqelmnt=password",  "The confirmed password is not same as password");
neelmnt=???	Значение не должно быть равно другому элементу формы Пример: frmvalidator.addValidation("password","neelmnt=username", "The password should not be same as username");
ltelmnt=???	Введенное значение должно быть меньше чем значение другого поля. Название другого поля вводится вместо ???
leelmnt=???	Введенное значение должно быть меньше или равно чем значение другого поля.. Название другого поля вводится вместо ???
gtelmnt=???	Введенное значение должно быть больше чем значение другого поля Название другого поля вводится вместо ???
geelmnt=???	Введенное значение должно быть большее или равно чем значение другого поля. Название другого поля вводится вместо ???

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

Итоговое задание.

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