Урок 5. Навигационные карты. Формы Навигационные карты Карты изображений

Урок 5. Навигационные карты. Формы
Навигационные карты
Карты
изображений
позволяют
авторам
специфицировать
регионы/области изображения или объекта и назначать отдельное действие
каждому региону (например, запросить документ, запустить программу и т.п.).
Если
регион
активируется
пользователем,
действие
запускается
на
выполнение.
Карта изображений (image map) создаётся путём ассоциирования объекта
со спецификацией сенситивного геометрического региона на объекте.
Существуют карты двух типов:

Клиентские (на стороне клиента (Client-side)). Если пользователь
активирует мышью регион клиентской карты, координаты щелчка (в
пикселах)
интерпретируются
браузером.
Браузер
выбирает
ссылку,
определённую для данного региона, и переходит по ней.

Серверные (на стороне сервера (Server-side)). Если пользователь
активирует мышью регион серверной карты, координаты щелчка (в пикселах)
пересылаются на сервер агенту, определённому атрибутом href элемента <A>.
Агент на сервере интерпретирует координаты и выполняет некоторое
действие.
Клиентские карты изображений предпочтительнее, нежели серверные по
двум (как минимум) причинам: они доступны для людей, просматривающих
документ в неграфических браузерах, и немедленно реагируют при
перемещении указателя над активным регионом.
Рассмотрим только первый тип карт.
Клиентские карты изображений
Элемент <MAP>.
Описание: определяет клиентскую карту (или другой механизм
навигации), который может быть ассоциирован с другими элементами (IMG,
OBJECT или INPUT).
Определения атрибутов:
name = «строка» – назначает имя карте изображений.
Элемент <AREA>.
Описание: определяют геометрические регионы карты изображений и
гиперссылки, ассоциированные с каждым регионом.
Определения атрибутов:
shape
=
«default|rect|circle|poly» –
определяет границы
региона.
Возможные значения:
 default: весь регион;
 rect: прямоугольный регион;
 circle: круглый регион;
 poly: многоугольный регион;
coords = «координаты» – определяет позицию на экране и очертания.
Количество и порядок значений зависят от определяемой фигуры. Возможные
сочетания:
 rect: координата x слева, координата y сверху, координата x справа,
координата y снизу;
 circle: координата x цента, координата y центра, радиус. Если значение
радиуса – в процентах, браузер должн вычислять окончательное
значение радиуса на базе ширины и высоты ассоциированного
объекта;
 poly: x1, y1, x2, y2, ..., xN, yN. Первая пара координат x и y и последняя
должны бить одинаковыми, чтобы "закрыть" многоугольник. Если эти
значения не одинаковы, ПА должен вычислить дополнительную пару
координат, чтобы закрыть многоугольник;
nohref – если установлен этот булев атрибут, то он указывает, что регион
не имеет ассоциированной гиперссылки:
href = «ссылка» – определяет адрес размещения ресурса;
alt = «строка» – альтернативный текст, если браузер не поддерживает
карты. В этом случае браузер может использовать альтернативный текст для
создания тестовых ссылок вместо графических.
Для того, чтобы изображение можно было использовать в качестве карты,
нужно
после
закрывающегося
соответствующими
атрибутами
тега
</map>,
указать
тег
и
добавить
еще
один
<img>
usemap=
“#имя_карты”(имя_карты – значение атрибута name в элементе MAP).
Пример html-кода (рис.1):
Рис.1. html-код
В браузере это будет выглядеть так (рис.2):
с
Рис.2. Отображение в браузере
Формы
HTML формы используются для регистрации посетителей на сайте, для
интерактивных опросов и голосований, позволяют отправлять сообщения,
совершать покупки и так далее. HTML Форма создается с одной целью: сбор
и последующая передача информации на обработку программному сценарию
или по электронной почте.
Вход в систему
Теги, атрибуты и значения
 <form> </form> – определяют форму.
 name="" – определяет имя формы.
 method="" –
определяет
Значения: "get" (по
способ
отправки
данных
умолчанию)
и "post".
Чаше
из
формы.
используется
метод "post", так как позволяет передавать большие объемы данных.
 action="" – определяет url по которому данные отправляются на
обработку. В нашем случае –enter_data.php. Также может быть обозначен
адрес электронной почты, например,action="mailto:ab-w.net".
 <input
/> –
определяют
такие
элементы
формы
переключатели, текстовые поля для ввода данных.
как
кнопки,
 type="text" – определяет текстовое поле для ввода данных.
 type="password" – определяет поле для ввода пароля, при этом текст
отображается в виде звездочек или кружочков.
 type="checkbox" – определяет переключатель.
 type="submit" – определяет кнопку.
 type="hidden" – определяет скрытый элемент формы – используется для
передачи дополнительной информации на сервер.
 size="25" – длина текстового поля в символах.
 maxlength="30" – максимально допустимое количество
вводимых
символов.
 value="" – определяет значение, которое будет отправлено на обработку
если относится к радиобутонам или переключателям. Значение данного
атрибута в составе текстового поля или кнопки будет показано как, на
примере (рис.3):
Рис.3. html-код
В браузере это выглядит так (рис.4):
Рис.4. Отображение формы в браузере
Комментарии на сайте
Теги, атрибуты и значения
 action="http://ab-w.net/comments.php" – определяет url по которому будут
отправлены данные из формы.
 id="" – определяет имя, идентификатор элемента формы.
 name="" – определяет имя элемента формы.
 <textarea> </textarea> – определяют текстовое поле в составе формы.
 cols="" – определяет количество колонок текстового поля формы.
 rows="" – определяет количество рядов текстового поля формы.
Если между <textarea> </textarea> поместить текст, он будет показан
внутри поля как пример, который легко удалить.
Код будет выглядеть следующим образом (рис.5):
Рис.5. html-код для формы (комментарии на сайте)
В браузере это будет выглядеть так (рис.6):
Рис.6. Отображение в браузере
Выпадающий список
Теги, атрибуты и значения
 <select> </select> – определяют список с позициями для выбора.
 size="" – определяeт количество видимых позиций списка. Если значение
равно 1, мы имеем дело с выпадающим списком.
 <option> </option> – определяют позиции (пункты) списка.
 value="" – содержит значение, которое будет отправлено формой по
указанному url на обработку.
 selected="selected" – выделяет позицию списка в качестве примера.
Код выглядит так, как показано на рисунке 7:
Рис.7. html-код (форма: выпадающий список)
В браузере это выглядит так (рис.8):
Рис.8. Отображение в браузере
Список с полосой прокрутки
Для этого варианта применим флажок multiple="multiple", который делает
возможным выбор нескольких позиций. Его отсутствие разрешает выбрать
только один пункт.
Код будет выглядеть так (рис.9):
Рис.9. html-код (форма: список с полосой прокрутки)
В браузере выглядит так (рис.10):
Рис.10. Отображение формы в браузере
Переключатели, кнопки
Атрибуты и значения
 value="" – определяет значение, которо будет отправлено формой по
указанному url.
 checked="checked" – определяет в качестве примера одно из возможных
значений.
 type="submit" – определяет кнопку.
 type="reset" – определяет кнопку сброса.
 value="" – определяет надпись на кнопке.
Код выглядит следующим образом (рис.11):
Рис.11. html-код (формы: переключатели, кнопки)
В браузере эта форма будет выглядеть так (рис.12):
Рис.12. Отображение в браузере
Радиобутоны, прикрепить файл
Код будет выглядеть так (рис.13):
Рис.13. html-код (форма: радиобутоны, прикрепить файл)
В браузере это выглядит так (рис.14):
Рис.14. Отображение формы в браузере
Fieldset
Код выглядит так, как показано на рисунке 15:
Рис.15. html-код (форма: fieldset)
В браузере это выглядит так (рис.16):
Рис.16. Отображение формы в браузере
Чтобы научиться создавать полноценные web-сайты с работающими
формами, необходимы знания в области программирования на PHP.