Формы и сенсорные изображения в HTML

МИНСКИЙ ИНСТИТУТ УПРАВЛЕНИЯ

 

 

 

 

 

 

 

Управляемая Самостоятельная Работа

По дисциплине «Вэб объекты в экономике»

На тему: «Формы и сенсорные изображения в HTML»

 

 

 

 

 

 

 

 

 

 

 

 

Студент 3 курса группы 80601с

Полещук Евгений Александрович

 

 

 

 

 

 

Минск 2011

Содержание

1 сенсорные изображения 3

2 Форма в языке HTML 5

2.1 Суть и назначение 5

2.2 Поле для ввода строки текста 7

2.3 Поле для ввода пароля 7

2.4 Выбор одного или нескольких  значений из определенных на  странице 8

2.5 Выбор одного значения из нескольких 8

2.6 Элемент ввода текста 8

2.7 Скрытые элементы 9

2.8 Организация меню 9

2.9 Выпадающее меню 9

2.10 Выбор файлов для отправки на сервер 10

2.11 Кнопки 11

2.12 Методы работы с формами 12

1. сенсорные изображения

Сенсорные изображения - что это такое?

Сенсорное изображение - это рисунок, разделенный на отдельные участки ("горячие области", "hot spots"), каждый из которых, как правило, является гиперссылкой на отдельный документ или связан с какой-либо процедурой.

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

<map name='имя карты'> <area shape='rect' coords='0, 0 150, 150' href='#' title='Текст, всплывающий при наведении мыши на область'> . . . <area shape='poly' coords='420,100 520,130, 620,260 740,200 740,100 420,100' href='#' title='Текст, всплывающий при наведении мыши на область'> </map> <img src="Адрес файла с рисунком" width=743 height=499 border=0 usemap='#имя карты'>

Как видно из приведенного фрагмента, тэгу <img>, обеспечивающему вывод изображения, предшествует контейнер <map>...</map>, задающий "карту разбивки" рисунка на "горячие области".

Карта должна иметь уникальное имя, задаваемое атрибутом name. Каждая область задается тэгом <area>, их может быть сколько угодно.

Атрибуты тэга <area>:

 

shape	Задает форму области: прямоугольник (rect, rectangle), многоугольник (poly, polygon) или круг (circle).
coords	Задает координаты (левый верхний  и правый нижний углы прямоугольника; вершины многоугольника (начальная  и конечная точки должны совпадать); точка на окружности и центр круга).
href	Адрес документа, вызываемого при  щелчке на данной области или '#', если загружать новый документ не нужно.
title	Текст, всплывающий при наведении  мыши на соответствующую область.

 

Рисунок загружается после разбивки карты с помощью контейнера <map>...</map>. В тэг <img> добавляется атрибут usemap=имя карты.

2. Форма в языке HTML
1. Суть и назначение

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

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

Когда пользователь загружает Web-страницу в свой браузер, то, в  соответствии с возможностями языка HTML, он может выполнить следующие  действия:

1. Ввести некоторые данные  в соответствующие поля на  сайте.

2. Указать путь к некоторому  файлу, для его последующей  отправки.

3. Выбрать одно или несколько  значений из представленных в  форме, размещенной на странице.

После выполнения таких действий и нажатия кнопки для передачи, должна загрузиться новая страница, а данные определенным образом отправлены на сервер. Сам процесс отправки нас не должен интересовать, поскольку  это уже прерогатива протокола  передачи данных HTTP. Все, что необходимо обеспечить программисту, — это  возможность свободы выполнения вышеуказанных действий пользователя. Разумеется, реализация этого происходит путем создания Web-страницы. Нужно  отметить, что после отправки данные принимаются "на другой стороне" клиент-серверного взаимодействия самим Web-сервером, а затем в строго стандартизированном  виде передаются программе-обработчику, которая была указана на Web-странице в качестве таковой.

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

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

Форма — это элемент  разметки Web-страницы, который может  содержать в себе различные интерактивные  элементы, определяемые спецификацией.

Листинг 1.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>

Область кода страницы, содержащая интерактивные элементы, начинается с тега <FORM>, в атрибутах которого находится информация о методе отправки данных и адресе серверного модуля, используемого для обработки  данных. Метод отправки данных влияет лишь на работу серверного модуля. В значении атрибута action должен указываться URL-адрес программы-обработчика пользовательских данных.

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

В приведенном выше примере  используется элемент TEXTAREA, позволяющий  вводить несколько строк текста, и две кнопки, с зарезервированными значениями типов: submit и reset. Первый тип  означает, что после нажатия на эту кнопку, данные, содержащиеся в  элементах формы, будут отправлены на сервер, по указанному выше пути, а  второй — что все состояние  элементов формы будет сброшено до начального. То есть, если пользователь введет в форму некий текст, а  затем нажмет кнопку reset, то в поле TEXTAREA введенный пользователем текст  будет уничтожен и опять появится надпись "В это поле вводится текст".

После описания всех интерактивных  элементов в HTML-документе форму  нужно закрыть тегом </FORM>.

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

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

 

2. Поле для ввода строки текста

Такое поле внутри формы задается сочетанием элемента и атрибута, приведенным в листинге 2.1. 

Листинг 2.1 Пример описания поля для ввода строки 

<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 ограничивает максимальное  число символов, которое может  ввести пользователь. Как и предыдущий  параметр, не является обязательным.  

 

3. Поле для ввода пароля

Это поле внутри формы задается приведенным в листинге 3.1 сочетанием элемента INPUT с атрибутом type, равным password. Роль данного элемента заключается лишь в замене на экране вводимых символов звездочками. При этом при передаче по сети информация никак не защищается. 

Листинг 3.1 Пример определения в 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.

4. Выбор одного или нескольких значений из определенных на странице

Для пометки нужных сведений флажками используется элемент checkbox, (листинг 4.1).

Листинг 4.1 Пример использования элемента 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, а не значения, следующие  после указания тега и отображаемые на экране. 

 

5. Выбор одного значения из нескольких

Для обеспечения такой  возможности применяется элемент Radiobutton. Его использование аналогично предыдущему, за исключением того, что  свойство checked может быть установлено  только у одного элемента и значение надписи каждой позиции элементов  хранится в атрибуте value (листинг 5.1). 

Листинг 5.1 Пример использования элемента Radiobutton 

<INPUT type="radio" name="fruct" value=" Яблоки"> .

<INPUT type=" radio" name="fruct" value=" Апельсины" checked>

<INPUT type=" radio" name="fruct" value=" Лимоны" > 

 

6. Элемент ввода текста

Описывается в теле документа тегом <TEXTAREA> (листинг 6.1). Служит для отправки больших объемов текстовой информации и, при необходимости, может иметь полосы прокрутки. 

Листинг 6.1 Пример использования элемента ТЕХТАRЕА 

<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. Скрытые элементы

Поскольку далеко не всегда удобно сохранять информацию, которая  неизбежно накапливается в клиент-серверном  обмене данными на стороне сервера, в языке HTML присутствует тип элемента INPUT, позволяющий сохранять значения, которые никак не отображаются на Web-странице, но отправляются вместе с  содержимым запроса. Это так называемый скрытый элемент hidden (ЛИСТИНГ 7.1). 

Листинг 7.1 Использование элемента hidden 

<FORM ..описание параметров  формы...>

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

<INPUT type="hidden" name="somename" value="somevalue">

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

</FORM>

8. Организация меню

В случае, когда значение атрибута size элемента SELECT установлено  больше единицы, то вместо выпадающего  списка создается меню с числом одновременно отображаемых строк равным SIZE и пунктами, указанными с помощью тегов <OPTION> (листинг 8.1). Атрибут multiple разрешает одновременно выбирать несколько пунктов.

Листинг 8.1 Пример создания меню 

<SELECT multiple name="sel" size="3" >

<OPTION name="good">MoM город уютный</OPTION>

«OPTION selected name="bad" >Мой город красивый</OPTION>

<OPTION> Мой город тихий</ОРТION>

</SELECT>

 

9. Выпадающее меню

Для реализации этого элемента служит конструкция, приведенная в листинге 9.1.

Листинг 9.1. Пример реализации выпадающего меню 

<FORM action="myscript.exe" method="Post">

<Р> Какая у вас  сейчас погода?<Р>

<SELECT name="sel" size="l" >

<OPTION name="good">Xopomaя</OPTION>

<OPTION selected name="bad" >Плохая</ОРТION>

<OPTION>He скажу</ОРTION>

</SELECT>

<INPUT type="submit" value="Submit" name="Sub">