Формы (Forms) позволяют запросить у пользователя информацию требуемую для дальнейшие работы сервера, например, "права доступа" для регистрации или комментарии о работе сервера. Формы составляются из одного (или нескольких) запросов к пользователю, ответом на которые должен быть ввод текста или выбор условий.
Передаваемая на сервер информация активизирует специальную программу для ее обработки (CGI Script). Активные программы помимо обработки запросов от пользователя, могут выполнять множество различных функций таких как: формирование активных WWW страниц, обращение к базам данных, поиск информации на сервере, запуск вычислительных программ и выполнения разрешенных, в зависимости от ответа пользователя, действий по дальнейшему предоставлению информации.
Взаимодействие активных программ с протоколом передачи гипертекста (HTTP) организовано через спецификацию интерфейса между сервером httpd и внешними, вызываемыми программами - CGI (Common Gateway Interface).
К сожалению, язык HTML не содержит средств для обработки информации, передаваемой через форму - с этой целью используются, например, языки Java Script или РНР (последний вы будете изучать в курсе "Сетевые базы данных").
Для создания формы используется команда FORM, внутри которой содержится как минимум одна команда INPUT.
Команда FORM задает тип запроса информации от пользователя.
Команда INPUT определяет способ и адрес для запрашиваемой от пользователя информации.
Пример задания формы:
<FORM ACTION="http://intranet/local" METHOD=POST> <P>Имя пользователя <BR> <INPUT NAME="CONTROL1" TYPE=TEXTBOX VALUE="Введите Ваше имя"> <P>Пароль <BR><INPUT TYPE="PASSWORD" NAME="CONTROL2"> <P>Выберете цвет <BR><INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="0" CHECKED>Красный <INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="1">Зеленый <INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="2">Голубой <P>Ваши комментарии <BR><TEXTAREA NAME="CONTROL4" ROWS="2" COLS="25"></TEXTAREA> <P><INPUT NAME="CONTROL5" TYPE=CHECKBOX CHECKED> Подтвердить получение <P><INPUT TYPE="SUBMIT" VALUE="Готово" OnClick="alert('Это только пример')"> <INPUT TYPE="RESET" VALUE="Отменить"> </FORM> |
Что даст:
Атрибуты команды FORM:
Внутри команды FORM может находиться все, что угодно, кроме другого
оператора FORM. Согласно
спецификации, для задания интерфейсных элементов внутри команды FORM
используются команды INPUT,
SELECT, и TEXTAREA.
SELECT имеет закрывающую команду. Внутри оператора SELECT,
разрешена только последовательность команд OPTION - за каждым из которых следует некоторое
количество простого текста (без HTML разметки); например:
Атрибуты команды SELECT:
Атрибуты команды OPTION:
Атрибуты команды INPUT:
TEXTAREA имеет полосы прокрутки, так что может быть введено любое количество текста.
TEXTAREA требует закрывающей команды. TEXTAREA без содержания по
умолчанию выглядит так:
TEXTAREA с содержанием по умолчанию выглядит так:
Содержание по умолчанию должно быть строгим ASCII текстом. Символы перевода строки
воспринимаются (так, что в примере выше до и после текста
"Содержание поля ввода по умолчанию" будет пустая строка).
Команда ISINDEX посылает на сервер только одно сообщение,
указанное в поле ввода. Как правило используется для оформления
заданий на поиск.
Синтаксис команды ISINDEX
<ISINDEX
Пример
Задание стиля страницы (Style Sheet) возможно либо в заголовке документа:
в разделе <HEAD> с помощью команды <STYLE>,
либо непосредственно в тексте с помощью дополнительного атрибута STYLE
для команд разметки текста (<P>, <H1> и т.п.)
Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:
Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=".
Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее: Селекторы могут описывать следующие элементы:
Синтаксис
<FORM ACTION="url" METHOD="POST"> ... </FORM>
Передается через переменную окружения CONTENT_TYPE.
Значения параметра window:
window
имя окна, в котором будет выведен результат, если указанное
имя отсутствует, то результат будет показан в новом окне;
_blank
показать результат в новом окне;
_parent
показать результат в родительском окне;
_self
показать результат в том же окне;
_top
показать результат в основном окне.
Команда SELECT
Внутри <FORM> ... </FORM>, может присутствовать любое количество команд SELECT,
в сочетании с другими HTML-элементами (включая INPUT и TEXTAREA)
и текстом (кроме команды FORM).
Команда SELECT представляется как список.
<SELECT NAME="my-menu">
<OPTION VALUE="1" SELECTED> First option.
<OPTION VALUE="2"> Second option.
</SELECT>
Команда INPUT
броузеры четвертых версий позволяют организовать передачу файлов на сервер
(File - Upload) - для этого используется значение
TYPE=FILE и устанавливается режим передачи ENCTYPE.
hidden
Пользователю не предлагается поля для ввода, но содержимое команды передается
при подтверждении и посылке формы. Это значение может быть использовано для
передачи информации состояния при взаимодействии клиента сервера.
<INPUT TYPE=HIDDEN NAME=custom VALUE="c12-234-8534">
image
Картинка, по которой вы можете сделать щелчок мышью или другим указывающим
устройством, что приводит к немедленному подтверждению и отсылке формы.
Координаты выбранной точки измеряются в точках от верхнего левого угла и
возвращаются (наряду с другими компонентами формы) точно так же, как для
команды IMG.
text
Поле ввода текста, значение по умолчанию.
password
Поле ввода пароля; вводимые символы представляются как звездочки.
checkbox
Кнопка, принимающая положения on (включено) и off(выключено).
radio
Кнопка, принимающая положения on и off; причем остальные кнопки с тем-же
параметром NAME ведут себя по принципу "одна из многих".
submit
Кнопка, действие которой сводится к отсылке содержимого заполненной формы
на сервер запросов.
reset
Кнопка, которая устанавливает во всех интерфейсных элементах значения по умолчанию.
Команда TEXTAREA
Команда TEXTAREA может быть использована для расположения многострокового поля ввода с
необязательным содержимым по умолчанию в форме. Атрибуты команды TEXTAREA следующие:
NAME= символическое имя поля ввода.
ROWS= число строк в поле ввода
(высота).
COLS= число столбцов в поле ввода (ширина).
<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>
<TEXTAREA NAME="foo" ROWS=4 COLS=40>
Содержание поля ввода по умолчанию
</TEXTAREA>
Команда ISINDEX
ACTION=url
PROMPT=prompt-text>
Атрибуты команды ISINDEX:
Если атрибут PROMPT= не используется, выводится следующее сообщение
в a text box: "You can search this index. Type the keyword(s) you want to
search for:"
После нажатия пользователем ENTER, набранный текст добавляется к
указанному адресу URL (по аналогии с методом GET для отправки FORM).
<ISINDEX ACTION="http://www.ict.nsk.su/cgi-bin/test-cgi.sh"
PROMPT="Тест ISINDEX">
CSS - Каскадные Таблицы Стилей
Синтаксис стиля
селектор {атрибут: значение}
H2 {color: red}
Пример: P {color: red} стиль применяется к команде <P>
Пример: H1 B {color: red} стиль применяется к команде <B>, находящейся внутри заголовка первого уровня, т.е. являющимся его потомком
Пример: OL LI {color: red} стиль применяется к команде <LI>, которая является дочерним элементом для команды <OL>,
т.е. на команды <LI>, которые являются дочерними элементами для команды <UL> стиль не распространяется
Пример: DIV[class=red] {color: red } стиль применяется ко всем элементам, включенным в <DIV>, у которых атрибут class равен red
Пример: P#12 {color: red } стиль применяется к
команде <P>, у которой идентификатор ID равен 12
Пример: .red {color: red} стиль применяется к любомым командам, у которых атрибут class равен red
Пример: A:visited {color: red } стиль применяется к посещенной команде <A>.
В том случае, если свойств у команды предположительно много, то их разделяют точкой с запятой:
H2 {color: red; font-size: 15pt} |
Если какая либо команда в документе вставлена внутри другой команды, то она наследует все свойства, и для того, чтобы задать ей особые свойства необходимо использовать следующий синтаксис:
H3 B {color: green} |
Здесь назначается зеленый цвет для текста выделенного командами <B> и </B>, если он является заголовком третьего уровня.
Следующий пример демонстрирует задание стиля в заголовке документа:
<HTML> <HEAD> <TITLE>Style Sheets</TITLE> <STYLE TYPE="text/css" TITLE="Bright Colours"> BODY { background: #FFFFFF;} P { color: blue; font-size: 12pt; font-family: Arial} H1 { color: red; font-size: 18pt} </STYLE </HEAD> <BODY> ... |
Атрибуты TYPE и TITLE команды <STYLE> являются необязательными. Атрибут TYPE задает определение MIME (Content-Type: "text/css") а атрибут TITLE используется для задания названия соответсвующего стиля документа.
Определение стиля обязатально требует задания начала и конца команды
<STYLE> ... </STYLE>
Задание цвета
P {color: #800000} /* RGB - color |
Задание размера
P {font-size: 32pt} /* pt - point, px - pixel |
Задание курсива
P {font-style: italic} |
Задание жирного шрифта
P {font-weight: bold} |
Задание семейства шрифтов
P {font-family: Arial} /* имя семейства шрифтов |
Задание размещения
P {text-align: center} /* center/left/right |
Задание отступов
P {margin-top: -10pt} P {margin-left: -20pt} P {margin-right: 15pt} P {text-indent: 5em } /* задание отступа в начале абзаца |
Использование команды <LINK> позволяет задать внешний стиль документа,
например,
<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.foo.org/sheet" TITLE="coolsheet"> |
Стиль соответсвующей команды языка HTML может быть изменен в ходе выполнения документа при помощи атрибута STYLE соответсующей команды разметки текста, например,
<H1 STYLE="color: #FF0000">Заголовок </H1> |
<H1 STYLE="color: #00FF00; text-align: right">Заголовок 1</H1> |
<H1 STYLE="text-align: left">Заголовок 2</H1> |
<H1 STYLE="font-size: 26pt">Заголовок 3</H1> |
Другой способ выбора стиля в документе связан с предопределением различных стилей в заголовке документа. Для выбора стиля используется два вида селекторов: CLASS и ID (идентификатор).
Использование селекторов зависет от способа декларации стиля в заголовке.
Задание выбора стиля по методу CLASS мозможно двумя способами:
P.redtext { color: #FF0000} |
Тогда соответствующий стиль параграфа включается командой
<P CLASS="redtext">text</P> |
.redtext { color: #FF0000} |
Тогда соответствующий стиль включается командой
<H1 CLASS="redtext">text</H1> |
Использование селекторов для задания отступов позволяет сделать наложение текста друг на друга как это сделано в следующем примере. Команда <DIV> создает блок текста, в пределах которого действуют заданные в этой команде значения атрибутов.
<HTML> <HEAD> <TITLE>Style Sheets</TITLE> <STYLE> .t1 { color: darkmagenta; margin-left: 10pt; font-size: 30pt; font-weight: bold; font-family: Courier New } .t2 { margin-top: -37pt; margin-left: 8pt; color: magenta; font-size: 30pt; font-weight: bold; font-family: Courier New } </STYLE> </HEAD> <BODY BGCOLOR=#FFFFFF> <DIV CLASS="t1">Объявление</DIV> <DIV CLASS="t2">Объявление</DIV> <p> <DIV class="t1">Объявление</DIV> <P> <p> <DIV CLASS="t2">Объявление</DIV> |
Принцип работы селектора ID аналогичен принципу работы селектора CLASS. Идентификатор ID должен быть уникальным и используется для задания имени стиля произвольной команды HTML (является более ранней командой языка HTML 3).
Определяется в заголовке документа
#redtext { color : #FF0000} |
Соответствующий стиль включается командой
<P ID="redtext">some text</P> would be coloured red. |
Команда SPAN позволяет менять стиль вывода текста внутри одной команды (внутри параграфа), например, следующий текст будет отбражен красным цветом. Это изменение сделано командой:
<SPAN STYLE="color: #FF0000">будет отбражен красным цветом</SPAN> |
Следующее определение в заголовке документа переопределяет стиль команды STRONG
STRONG { color: #00FF00} |
И если в документе встречается текст в скобках
<STRONG> ... </STRONG> |
То данный текст будет показан "зеленым" цветов и с соответвующим выделенем для команды STRONG (по-умолчанию - жирный текст)
Задание стиля
P STRONG { color: #00FF00} |
устанавливает зеленый цвет для параграфа помеченного командой STRONG,
между скобками
<P> ... <STRONG> ... </STRONG> ...</P> |
<P><STRONG>Этот текст ярко зеленый</STRONG></P> А этот - <STRONG>основного</STRONG> цвета. |