КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Формы и сенсорные изображения
|
|
|
|
- Форма в языке HTML
- Поле для ввода строки текста.
- Поле для ввода пароля
- Выбор одного или нескольких значений из определенных на странице
- Выбор одного значения из нескольких
- Элемент ввода текста
- Выпадающее меню
- Организация меню
- Скрытые элементы
- Выбор файлов для отправки на сервер
- Кнопки
- Навигационные карты
До сих пор мы обсуждали аспекты реализации Интернет-сайтов, практически не связанные с обменом данными с пользователем. Все, что он мог сделать, — это выбрать или не выбрать ссылку. На самом деле, язык HTML предлагает достаточно развитые возможности для интерактивного взаимодействия с клиентом. В данной главе мы изучим элементы, позволяющие получать информацию от клиента и отправлять ее на сервер для обработки.
Прежде всего, необходимо четко разграничить полномочия и обязанности элементов интерактивного обмена информацией.
Когда пользователь загружает Web-страницу в свой браузер, то, в соответствии с возможностями языка HTML, он может выполнить следующие действия:
1. Ввести некоторые данные в соответствующие поля на сайте.
2. Указать путь к некоторому файлу, для его последующей отправки.
3. Выбрать одно или несколько значений из представленных в форме, размещенной на странице.
После выполнения таких действий и нажатия кнопки для передачи, должна загрузиться новая страница, а данные определенным образом отправлены на сервер. Сам процесс отправки нас не должен интересовать, поскольку это уже прерогатива протокола передачи данных HTTP. Все, что необходимо обеспечить программисту, — это возможность свободы выполнения вышеуказанных действий пользователя. Разумеется, реализация этого происходит путем создания Web-страницы. Нужно отметить, что после отправки данные принимаются "на другой стороне" клиент-серверного взаимодействия самим Web-сервером, а затем в строго стандартизированном виде передаются программе-обработчику, которая была указана на Web-странице в качестве таковой.
Программист, который пишет серверный модуль, тоже избавлен от необходимости вникать во все подробности получения сервером информации от клиента. Эти аспекты находятся в поле ответственности создателя Web-сервера. Все, что сервер должен сделать, — это корректно считать данные в соответствии со спецификацией интерфейса обмена данными между сервером и программой (CGI — Common Gateways Interface), который будет подробно описан в следующей главе, сгенерировать новую страницу и отправить ее клиенту.
В данной главе будут рассмотрены аспекты создания Web-страниц с интерактивными возможностями. Несмотря на то, что реальная интерактивность подразумевает обработку полученных данных сервером, на этом этапе мы будем преследовать одну цель: научиться создавать такие страницы с расчетом на то, что, прочитав следующую главу, можно уже будет полностью реализовывать схему клиент-серверного взаимодействия (см. рис. 1.1).
Форма в языке HTML
Поскольку понятие формы, как элемента HTML, имеет принципиальное отличие от его значения в Delphi, где под формой понимается окно приложения, то необходимо делать различия между этими двумя элементами. В данной главе мы будем вести разговор только о формах HTML. Итак, что же такое форма?
Форма — это элемент разметки Web-страницы, который может содержать в себе различные интерактивные элементы, определяемые спецификацией. Пример формы приведен в листинге 7.1.
Листинг 7.1. Пример описания формы в теле страницы
<HTML>
<МЕТА http-eguiv="Content-Type" content="text/html;
charset=windows-1251">
<ТIТLЕ>Пример формы</ТIТLЕ>
<BODY>
<Р> Это форма, в которой предусмотрено поле для ввода текста, а также кнопки для отправки данных и сброса введенных значений
<Р>
<FORM method="post" action="http://www.server.com/scripts/modulel.exe">
<TEXTAREA style="WIDTH: 257px; HEIGHT: 90px" name="Info" rows=ll cols=42>
В это поле вводится текст </TEXTAREA> <Р> <INPUT type="submit" value="Submit" name="Sub">
<INPUT type="reset" value="Reset" name="Res"> </FORM> </BODY> </HTML>
Листинг 7.1 имеет отображение в браузере, приведенное на рис. 7.1.
Рис. 7.1. Пример формы
Область кода страницы, содержащая интерактивные элементы, начинается с тега <FORM>, в атрибутах которого находится информация о методе отправки данных и адресе серверного модуля, используемого для обработки данных. Метод отправки данных влияет лишь на работу серверного модуля, а значит, пока этого атрибута мы касаться не будем, полагая его равным post. В значении атрибута action должен указываться URL-адрес программы-обработчика пользовательских данных.
Следом за открывающим тегом могут быть размещены уже изученные и интерактивные элементы языка HTML.
В приведенном выше примере используется элемент TEXTAREA, позволяющий вводить несколько строк текста, и две кнопки, с зарезервированными значениями типов: submit и reset. Первый тип означает, что после нажатия на эту кнопку, данные, содержащиеся в элементах формы, будут отправлены на сервер, по указанному выше пути, а второй — что все состояние элементов формы будет сброшено до начального. То есть, если пользователь введет в форму некий текст, а затем нажмет кнопку reset, то в поле TEXTAREA введенный пользователем текст будет уничтожен и опять появится надпись "В это поле вводится текст".
После описания всех интерактивных элементов в HTML-документе форму нужно закрыть тегом </FORM>.
Таким образом, на Web-странице могут создаваться блоки, представляющие собой удобные структуры для ввода данных, на базе которых строится клиент-серверное взаимодействие в среде WWW (справедливости ради следует заметить, что это не единственный, хотя и самый распространенный способ отправки данных клиента).
Для ввода и отправки данных предусмотрено несколько элементов языка HTML, и для удобства и ясности материала мы будем описывать их, исходя из их функционального назначения.
Поле для ввода строки текста
Такое поле внутри формы задается сочетанием элемента и атрибута, приведенным в листинге 7.2.
Листинг 7.2. Пример описания поля для ввода строки
<FORM action="myscript.exe" method="Post">
<INPUT type="text" name="sometext" size="20" maxlength="25">Sometext
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
В приведенном листинге кроме описания поля присутствует также элемент отправки данных (в данном случае — кнопка). Его присутствие обязательно.
Атрибут type определяет тип элемента для ввода. В случае строки, его значение должно устанавливаться в text.
Атрибут name определяет уникальное имя элемента, что в последующем позволит серверному модулю установить принадлежность полученных данных именно к этому полю ввода данных.
Атрибут size задает ширину поля (количество символов, отображаемых на экране).
Maxlength ограничивает максимальное число символов, которое может ввести пользователь. Как и предыдущий параметр, не является обязательным.
Поле для ввода пароля
Это поле внутри формы задается приведенным в листинге 7.3 сочетанием элемента INPUT с атрибутом type, равным password. Роль данного элемента заключается лишь в замене на экране вводимых символов звездочками. При этом при передаче по сети информация никак не защищается.
Листинг 7.3. Пример определения в HTML-документе поля для ввода пароля
<FORM action="myscript.exe" method="Post">
<INPUT type="password" name="somepass" size="20" maxlength="25">
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Роль атрибутов элемента password аналогична элементу text.
Выбор одного или нескольких значений из определенных на странице
Для пометки нужных сведений флажками используется элемент checkbox, (листинг 7.4).
Листинг 7.4. Пример использования элемента checkbox
<FORM action="myscript.exe" method="Post">
<Р>Я люблю...<Р>
<INPUT type="checkbox" name="fruct" value="apple">Яблoки
<INPUT type="checkbox" name="fruct" value="0range" checked>Aпeльcины
<INPUT type="checkbox" name="fruct" value="Lime" checked disabled>flMMOHH
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Обратите внимание, что группа этих флажков помечена одним именем fruct, в то время, как каждый из них имеет свое уникальное значение. Атрибут checked означает, что по умолчанию данный флажок уже выбран, а disabled — изменение состояния недоступно. На сервер отправляются значения, указанные в поле value, а не значения, следующие после указания тега и отображаемые на экране.
Выбор одного значения из нескольких
Для обеспечения такой возможности применяется элемент Radiobutton. Его использование аналогично предыдущему, за исключением того, что свойство checked может быть установлено только у одного элемента и значение надписи каждой позиции элементов хранится в атрибуте value (листинг 7.5).
Листинг 7.5. Пример использования элемента Radiobutton
<INPUT type="radio" name="fruct" value=" Яблоки">.
<INPUT type=" radio" name="fruct" value=" Апельсины" checked>
<INPUT type=" radio" name="fruct" value=" Лимоны" >
Элемент ввода текста
Описывается в теле документа тегом <TEXTAREA> (листинг 7.6). Служит для отправки больших объемов текстовой информации и, при необходимости, может иметь полосы прокрутки.
Листинг 7.6. Пример использования элемента ТЕХТАКЕА
<FORM action="myscript.exe" method="Post">
<Р>Опишите свои впечатления<Р>
<TEXTAREA name="minds" rows="200 px" cols="300 px"XTEXTAREA>
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Атрибут rows означает высоту, a cols — ширину поля ввода. Если между открывающим и закрывающим тегами поместить текст, то он будет отображаться на экране по умолчанию. Возможна установка свойства readonly, делающего редактирование поля невозможным.
Выпадающее меню
Для реализации этого элемента служит конструкция, приведенная в листинге 7.7.
Листинг 7.7. Пример реализации выпадающего меню
<FORM action="myscript.exe" method="Post">
<Р> Какая у вас сейчас погода?<Р>
<SELECT name="sel" size="l" >
<OPTION name="good">XopomaH</OPTION>
«OPTION selected name="bad" >Плохая</ОРТ10Ы>
<OPTION>He скажу</ОРТЮЫ>
</SELECT>
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
В рассмотренном примере атрибут size как раз и устанавливает форму элемента, как выпадающего списка (значение этого атрибута равно 1). Внутри тегов <OPTION> задаются возможные значения для выбора. Если тег <OPTION> содержит атрибут selected, то это значение будет установлено по умолчанию. При отсутствии атрибута name, в качестве выбранного значения, на сервер отправляется текст между открывающим и закрывающим тегами <OPTION>.
Организация меню
В случае, когда значение атрибута size элемента SELECT установлено больше единицы, то вместо выпадающего списка создается меню с числом одновременно отображаемых строк равным SIZE и пунктами, указанными с помощью тегов <OPTION> (листинг 7.8). Атрибут multiple разрешает одновременно выбирать несколько пунктов.
Листинг 7.8. Пример создания меню
<SELECT multiple name="sel" size="3" >
<OPTION name="good">MoM город уютный</ОРТ10Ы>
«DPTION selected name="bad" >Мой город красивый</ОРТЮЫ>
<OPTION> Мой город тихий</ОРТЮМ>
</SELECT>
Скрытые элементы
Поскольку далеко не всегда удобно сохранять информацию, которая неизбежно накапливается в клиент-серверном обмене данными на стороне сервера, в языке HTML присутствует тип элемента INPUT, позволяющий сохранять значения, которые никак не отображаются на Web-странице, но отправляются вместе с содержимым запроса. Это так называемый скрытый элемент hidden (ЛИСТИНГ 7.9).
Листинг 7.9. Использование элемента hidden
<FORM..описание параметров формы...>
...элементы формы...
<INPUT type="hidden" name="somename" value="somevalue">
...элементы формы...
</FORM>
Выбор файлов для отправки на сервер
Для указания пути к файлу и последующей его загрузки на сервер используется конструкция, приведенная в листинге 7.10.
Листинг 7.10. Реализация отправки файлов на сервер
<INPUT type="file" enctype="multipart/form-data" name="fl" value="c:\autoexec.bat">
Атрибут value устанавливает путь и имя файла по умолчанию, a enctype — тип передаваемых данных. В остальных элементах форм этот атрибут можно не использовать. Вместе с полем для ввода расположения и имени файла появляются кнопки обзора для поиска файла и отправки.
Кнопки
Кроме уже отмеченных стандартных кнопок Submit и Reset, существует возможность использовать на Web-странице и другие кнопки. Однако, для того чтобы при нажатии на кнопку совершалось определенное действие, необходимо использовать скрипты, что выходит за рамки излагаемого в данной главе материала, и поэтому не будем останавливать на этом внимание.
В качестве управляющих кнопок формы, можно использовать графические картинки, загружаемые из определенных файлов.
Заменим стандартную кнопку submit на изображение из файла (листинг 7.11).
Листинг 7.11. Использование картинок вместо стандартных кнопок
<BUTTON name="submit" value="Submit" type="submit">
Отправить<1МС src="filename.gif" value="Отправить"></ВОТТON>
Как видим, в приведенном примере вместо тега <INPUT> использовался тег <BUTTON>. Это более общее описание кнопок и при указании значения атрибута type равным submit или reset описанные кнопки могут использоваться вместо стандартных для отправки и/или сброса содержимого формы. Приведенный в листинге 7.11 пример демонстрирует, как вместо кнопок в при-вычом понимании используются картинки для потверждения отправки содержимого формы.
Навигационные карты
Очень часто бывает необходимо предусмотреть различные варианты поведения серверного модуля в зависимости от того, по какой части изображения, загруженного в Web-страницу, щелкнул мышью пользователь. Это можно реализовать с помощью сенсорных изображений (навигационных карт).
Язык HTML предусматривает два способа реализации этих возможностей: с использованием клиентских и серверных карт.
Клиентские карты представляют собой картинку и информацию о том, какие части изображения соответствуют каким ссылкам. Вся картинка как бы "нарезана" на несколько фрагментов, каждому из которых соответствует определенная ссылка. Причем, изображение загружается из одного графического файла, и ему соответствует текстовое описание его фрагментов.
Серверные карты — это обычные изображения, но если к ним подвести указатель мыши и щелкнуть им, то автоматически на сервер будет отправлен GET-запрос с указанием в качестве параметров координат указателя. Подробнее об использовании метода GET читайте в гл. 9. Пример серверной карты приведен в листинге 7.12.
Листинг 7.12. Пример серверной карты
<HTML>
...тело документа...
<А href="someurl"><IMG src="somegraph.jpg" ismap></A>
...продолжение документа...
</HTML>
Как видим, включение серверной карты в документ аналогично помещению изображения в качестве визуализации ссылки, но здесь должен присутствовать параметр ismap, указывающий браузеру на то, что при переходе по ссылке на сервер должны быть отправлены координаты указателя мыши в момент нажатия ее клавиши. Координаты передаются относительно левого верхнего угла изображения.
Для работы с клиентскими картами необходимо "нарезать" изображение на области, каждой из которых присвоить свою ссылку. Делается это посредством описания нескольких геометрических фигур: прямоугольника, многоугольника или круга.
Пусть у нас имеется некий графический файл. Например, такой, как изображен на рис. 7.2.
Рис. 7.2. Пример графического изображения
Мы можем присвоить каждому участку изображения свою ссылку. Для этого необходимо включить в HTML-код описание клиентской карты и ее участков (листинг 7.13).
Листинг 7.13. Описание клиентской карты
<PXIMG src="ris.gif" usemap="#mymap"> <MAP name="mymap">
<A href="filel.htm" shape="rect" coords="48,60,339,191">Ссылка №1</А> <A href="file2.htm" shape="circle" coords="217,476,145">Ссьшка №2</A> <A href="file3.htm" shape="poly" coords=
"432,258,601,411,522,520,621,635,917,646,1009,
457,928,263,818,312,700,141 ">Ссылка №3</А>
<A href="fil4.htm" shape="default">Bcя область</А> </MAP>
Таким образом, в тексте HTML-файла были описаны 3 геометрические фигуры и ссылка, относящаяся ко всей остальной области. В качестве параметров четырехугольника (rect) выступают координаты левого верхнего и правого нижнего углов относительно левого верхнего угла изображения. Сначала указывают координату X, а затем Y. Параметрами многоугольника выступают последовательные координаты его вершин, а круга — сначала координаты центра, затем — радиус. Разумеется, разметка клиентской карты определяется задумками Web-мастера, а не содержимым графического файла.
Существуют и иные способы описания клиентских карт, которые подробно описаны в спецификации языка HTML.
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 462; Нарушение авторских прав?; Мы поможем в написании вашей работы!