Бегущая строка
Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега {MARQUEE} … {/MARQUEE}.
Между {MARQUEE} и {/MARQUEE} могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием {IMG …}.
|
Синтаксис атрибута |
Назначение |
|
BGCOLOR=цвет |
Фоновый цвет. Если фон задан, то браузер рисует на экране цветную полосу, вдоль которой движется текст или картинка. |
|
HEIGHT= значение |
Высота фоновой полосы. Значение указывается в пикселях или в процентах от высоты окна браузера. Например, если указать атрибут HEIGHT=25%, то полоса бегущей строки будет занимать четверть высоты окна |
|
WIDTH = значение |
Ширина полосы бегущей строки, указывается в пикселях или в процентах от ширины окна браузера |
|
DIRECTION= значение |
Направление движения строки: left − налево (по умолчанию), right − направо, up − вверх, down − вниз |
|
BEHAVIOR = значение |
Атрибут управляет поведением бегущей строки: scroll (по умолчанию) − дойдя до края окна, строка уходит из поля зрения, а затем появляется с противоположной стороны; slide − строка появляется из-за края окна, достигает противоположного и останавливается; alternate − строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения |
|
HSPACE = смещение в пикселях |
Сдвиг полосы бегущей строки по горизонтали вправо |
|
VSPACE = выcoтa в пикселях |
Создание пустого пространства выше и ниже полосы |
|
LOOP = значение |
Количество переходов строки по экрану |
|
SCROOLAMOUNT = значение |
Число пикселей, которые проходит строка за каждый шаг. Режим по умолчанию соответствует примерно 10 пкс/шаг. Данный атрибут позволяет регулировать скорость движения строки |
|
SCROLLDELAY = значение |
Определяет временной интервал (в миллисекундах) между шагами, с помощью этого атрибута можно заставить строку двигаться рывками |
|
TRUESPEED |
При установке этого флага (атрибута без значения) будет использовано заданное значение SCROLLDELAY. Если флаг не установлен, значение SCROLLDELAY {= 59 будет округлено до 60 |
Формы
Современный веб-сайт предполагает наличие на его страницах интерактивных элементов, позволяющих вести диалог с посетителем. Техническую поддержку этого процесса обеспечивают формы.
Форма представляет собой отдельную веб-страницу или часть страницы, на которой размещены разнообразные стандартные для Windows элементы интерактивного диалога: поля ввода текста, флажки и радиокнопки (переключатели) с поясняющими строками текста, раскрывающиеся списки, кнопки и т.п.
Учитывая, что форма является основным способом получения данных от пользователя – посетителя сайта, именно с проектирования и разработки содержащих ее страниц обычно начинается создание всего клиент-серверного механизма.
Форма в HTML-документе определяется в виде блока, обрамленного тэгами {FORM} и {/FORM}, между которыми располагаются тэги, задающие те или иные компоненты формы, а также играющие роль подсказок текстовые строки и ссылки на графические файлы. Кроме того, в составе тэга {FORM} записываются атрибуты, определяющие способ и характеристики обработки заключающейся в форме информации, в частности, способ пересылки ее на сервер и кодирования данных в процессе этой пересылки.
|
Синтаксис атрибута |
Назначение |
|
ACTION |
Определяет адрес (url) или тип объекта, на который возлагается обработка (или передача) содержащейся в форме информации. Таким объектом может быть CGI-программа, скрипт или почтовый клиент (в последнем случае предполагается, что данные формы лишь пересылаются по заданному адресу электронной почты, а обработка этих данных производится автором сайта вручную; учитывая сложности разработки и размещения на общедоступных серверах программ-обработчиков, использование в качестве значения данного параметра адреса e-mail (в виде mailto:[адрес]) представляет собой наиболее распространенный вариант, особенно когда речь идет о простейших формах типа откликов посетителей сайта о его качестве) |
|
ENCTYPE |
Указывает способ кодирования информации при ее пересылке на сервер или указанный адрес e-mail: application/x-www-form-urlencoded пересылает всю информацию (возвращаемые значения для всех компонентов формы) единым массивом и при этом преобразует пробелы в символы « + », а специальные символы и русские буквы – в пары символов, обозначающие шестнадцатеричный код ASCII и предваряемые знаком «%»; multipart/form-data предписывает пересылать каждое возвращаемое значение элемента формы в отдельном блоке; text/plain – упрощенный способ кодирования, используемый при пересылке данных по электронной почте (METHOD="POST", см. ниже) и предполагающий пересылку никак не закодированной информации |
|
METHOD |
Определяет способ передачи данных обработчику: get – формируется типовое обращение к CGI-приложению, включающее в себя его адрес (значение параметра ACTION), символ «?» (признак, что далее следуют передаваемые CGI-программе значения) и сами данные (возвращаемые значения для каждого из элементов формы); post – браузер сначала устанавливает связь с сервером, а затем, получив подтверждение от CGI-приложения, передает ей собственно данные. При использовании в качестве обработчика адресации к почтовому ящику e‑mail используется только значение post |
Для случая, когда предполагается отправка содержимого формы по e-mail для дальнейшей ручной расшифровки данных владельцем сайта заголовок формы может быть следующим:
{FORM ACTION="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it." или
{FORM ACTION="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it."
В этом случае, когда пользователь выполняет действие, приводящее к отправке заполненной формы (щелчок мышью на соответствующей кнопке), на его локальной ПЭВМ активизируется почтовый клиент и автоматически отправляет (или подготавливает к отправке, помещая в папку Исходящие) письмо, содержащее в поле Кому указанный в параметре ACTION адрес e-mail, к которому в качестве прикреплен файл данных формы.
Каждому отдельному элементу формы соответствует тэг {INPUT}, параметр TYPE которого указывает тип данного элемента, контейнер {TEXTAREA}…{/TEXTAREA} (для многострочного текстового окна) или контейнер {SELECT}...{/SELECT} (для раскрывающегося списка). Рассмотрим подробнее каждый из возможных элементов интерфейса с его параметрами.
Поле ввода текста {INPUT TYPE=text}
Поле ввода текста представляет собой прямоугольное поле, предназначенное для ввода одной строки текста.
|
Синтаксис атрибута |
Назначение |
|
NAME |
Уникальное имя поля |
|
SIZE |
Ширина поля (в символах) |
|
MAXLENGHT |
Максимально допустимое количество вводимых символов |
|
VALUE |
Строка (записывается в кавычках), изначально выводимая в данном текстовом поле |
При нажатии во время ввода текста в поле ввода TEXT клавиши Enter браузер автоматически инициирует отправку на сервер информации, содержащейся в данной форме (даже если она еще не заполнена до конца), независимо от наличия в ее составе кнопки Submit.
Поле ввода пароля (INPUT TYPE=password)
Прямоугольное однострочное текстовое поле, отличающееся от уже рассмотренного только тем, что вводимый текст отображается в нем только как соответствующее количество символов *.
Многострочная текстовая область {TEXTAREA} … {/TEXTAREA}
Прямоугольное текстовое поле с заданными шириной и высотой в HTML кодируется при помощи контейнера {TEXTAREA} … {/TEXTAREA}. Если объем вводимого текста превысит размеры поля, то автоматически генерируется вертикальная линейка прокрутки.
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя области |
|
COLS |
Ширина области (в символах) |
|
ROWS |
Высота области (в строках) |
|
WRAP |
Управление автоматическим переносом строк внутри окна и при передаче введенного текста на сервер: off – без переноса, physical – автоматический перенос с вставкой в соответствующие места текста символов перехода на новую строку, virtual — автоматический перенос строк без добавления символов перехода на новую строку (т. е. на сервер весь текст передается как одна строка) |
Текст, который должен быть изначально выведен в данной области, нужно ввести между тэгами {TEXTAREA} и {/TEXTAREA}.
Флажки (INPUT TYPE=checkbox)
Флажки служат для ответа пользователя по типу «Да»-«Нет» либо для предоставления возможности произвольного выбора из нескольких опций.
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя флажка (при объединении нескольких флажков в группу всем им дается одно и то же имя) |
|
VALUE |
Записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данный флажок будет помечен пользователем |
|
CHECKED |
При наличии данного параметра соответствующий флажок изначально будет выводиться как помеченный |
Текстовая строка – описание назначения данного флажка вставляется отдельно как обычный текст, расположенный рядом с флажком.
Радиокнопки (переключатели) (INPUT TYPE=radio)
В отличие от флажков, переключатели позволяют выбрать только одну из представленных опций. Одиночная радиокнопка функционально аналогична одиночному флажку, но если ее пометить хотя бы однажды, сбросить выделение уже нельзя.
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя радиокнопки (при объединении в группу всем радиокнопкам дается одно и то же имя); |
|
VALUE |
Записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данная радиокнопка будет помечена пользователем |
|
CHECKED |
При наличии данного параметра соответствующая радиокнопка изначально будет выводиться как помеченная. Атрибут CHECKED может быть записан только для одной радиокнопки в данной группе (для ранее указанных пометка снимается); этот атрибут может быть не указан вовсе, тогда ни одна радиокнопка не будет помечена, пока пользователь не щелкнет мышью на какой-либо из них |
Текстовая строка — описание назначения данной радио кнопки вставляется отдельно как обычный текст, расположенный рядом с ней.
Раскрывающиеся списки
Списки предназначаются для предоставления пользователю возможности выбора одной или нескольких опций, или для использования в качестве своеобразного меню, содержащего названия страниц, к которым может быть осуществлен переход. В HTML кодируется при помощи контейнера {SELECT}... {/SELECT}.
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя списка |
|
size |
Количество одновременно отображаемых пунктов |
|
MULTIPLE |
Разрешение помечать (при одновременно нажатых клавишах Ctrl или Shift) сразу несколько пунктов списка |
Если задан параметр MULTIPLE и/или значение параметра SIZE больше 1, то список выводится развернутым (тогда значение SIZE определяет количество одновременно видимых на экране пунктов списка, для просмотра остальных используется линейка прокрутки). В противном случае (при отсутствии параметра MULTIPLE и SIZE=1) выводится список, раскрывающийся щелчком мыши на кнопке .
Значения отдельных пунктов списка определяются при помощи тэгов {OPTION}, каждый из которых определяет один пункт. Название пункта записывается после тэга {OPTION}.
|
Синтаксис атрибута |
Назначение |
|
VALUE |
Записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер; при отсутствии данного параметра на сервер передается название выбранного пункта списка |
|
SELECTED |
Определяет данный пункт как помеченный по умолчанию (для раскрывающегося списка, т. е. при SIZE=1 и отсутствии параметра MULTIPLE, параметр SELECTED может быть присвоен только одному пункту; при отсутствии в таком списке параметра SELECTED изначально выбранным (отображаемым) по умолчанию является первый пункт списка) |
Поле ввода имени пересылаемого файла (INPUT TYPE=file)
Поле такого типа предназначено для обеспечения пересылки на сервер вместе с заполненной формой указанного пользователем файла. Имя файла (и путь к нему) вводятся в однострочном текстовом поле или, после щелчка мышью на расположен ной справа кнопке Обзор требуемый файл выбирается в стандартном окне открытия файла.
|
Синтаксис атрибута |
Назначение |
|
name |
Имя данного диалогового элемента |
|
SIZE |
Ширина текстового поля |
|
MAXLENGHT |
Максимально допустимое количество символов имени файла (вместе с путем) |
Командные кнопки
1. Кнопка «Очистка формы» (INPUT TYPE=reset).
Щелчок мышью на этой кнопке очищает форму (т. е. при водит ее к изначальному виду, в том числе восстанавливая изначальные значения в текстовых полях и изначальную пометку флажков и радиокнопок).
|
Синтаксис атрибута |
Назначение |
|
name |
необязательный параметр — имя кнопки (нигде не используется) |
|
value |
текстовая строка надписи на кнопке (при отсутствии данного параметра выводится стандартная надпись Сброс или Reset) |
2. Кнопка «Отправка формы» (INPUT TYPE=submit).
Щелчок мышью на данной кнопке вызывает отправку информации формы на сервер (в соответствии с указанным в тэге {FORM} методом обработки).
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя кнопки |
|
VALUE |
Текстовая строка надписи на кнопке (при отсутствии данного параметра выводится стандартная надпись Подача запроса или Submit) |
3. Пользовательские командные кнопки стандартного вида
(INPUT TYPE=button).
Кнопка, вид и функционирование которой является типовым для Windows, а назначение целиком определяется алгоритмом работы CGI-программы или скрипта, куда передается имя кнопки (NAME). Эти кнопки обычно используются также совместно со скриптами.
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя кнопки |
|
VALUE |
Текстовая строка надписи на кнопке |
4. Графические командные кнопки (INPUT TYPE=image).
По назначению такие кнопки аналогичны пользовательским стандартного вида, но здесь в качестве кнопки используется произвольное изображение, хранящееся в отдельном графическом файле. Фактически это рисунок-гиперссылка. (Для графической кнопки на сервер, кроме ее имени, дополнительно передается информация о координатах курсора мыши в момент нажатия.)
|
Синтаксис атрибута |
Назначение |
|
NAME |
Имя кнопки |
|
ALIGN |
Выравнивание кнопки относительно окружающего текста: bottom – нижний край кнопки выравнивается по нижней (базовой) линии строки; left – выравнивание по левому краю страницы; middle – центрирование кнопки по высоте строки; right – выравнивание по правому краю страницы; top – верхний край кнопки выравнивается по верхней линии строки |
|
BORDER |
Толщина рамки вокруг кнопки |
|
SRC |
путь к графическому файлу с изображением кнопки |
|
VALUE |
Текстовая строка |
Задание 3.6
Создайте страничку, предназначенную для сбора сведений о посетителях вашего сайта. Сведения должны пересылаться по электронной почте на ваш адрес (если его у вас нет, придумайте – например, VasyaIvanov@Ivanov.kirov.ru) и никак не кодироваться.
Используйте следующие элементы пользовательских форм:
ü текстовая строка;
ü поле для ввода пароля;
ü поле выбора локального файла для загрузки на Web-сервер;
ü опция выбора нескольких вариантов данных;
ü опция переключения между несколькими вариантами данных;
ü текстовое поле;
ü ниспадающее меню;
ü список наименований;
ü кнопка отправления данных;
ü кнопка сброса данных.
Ваша страничка может выглядеть, например, так:
