Формы

Формы (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 определяет форму для заполнения в HTML документе. В одном документе может быть определено несколько форм для заполнения, но вложенные команды FORM не разрешены. Формат команды FORM выглядит следующим образом:

<FORM ACTION="url" METHOD="POST"> ... </FORM>

Атрибуты команды FORM:

ACTION=url
URL адрес сервера запросов, куда будет отослано содержание формы после подтверждения; Если это поле отсутствует, будет использован URL адрес текущего документа.
METHOD=get-post
HTTP/1.0 метод используемый для посылки содержания заполненной формы на сервер. Этот метод зависит от того, как работает конкретный сервер запросов. Настоятельно рекомендуется использование метода POST. Возможные варианты следующие:
  • GET это метод по умолчанию, который приводит к добавлению содержимого заполненной формы к URL, как и в нормальном запросе.
  • POST при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса.
ENCTYPE=
задает тип кодирования содержимого заполненной формы. Этот атрибут действует только когда используется метод POST и даже в этом случае имеет только одно возможное значение (которое является значением по умолчанию) - application/x-www-form-urlencoded. (За исключением случая, когда на сервер клиентом посылается file - File - Upload).
Передается через переменную окружения CONTENT_TYPE.
TARGET=window
Определяет положение ответа сервера по получению формы (по аналогии с командой A).
Значения параметра window:
window имя окна, в котором будет выведен результат, если указанное имя отсутствует, то результат будет показан в новом окне;
_blank показать результат в новом окне;
_parent показать результат в родительском окне;
_self показать результат в том же окне;
_top показать результат в основном окне.

Внутри команды FORM может находиться все, что угодно, кроме другого оператора FORM. Согласно спецификации, для задания интерфейсных элементов внутри команды FORM используются команды INPUT, SELECT, и TEXTAREA.


Команда SELECT

Внутри <FORM> ... </FORM>, может присутствовать любое количество команд SELECT, в сочетании с другими HTML-элементами (включая INPUT и TEXTAREA) и текстом (кроме команды FORM). Команда SELECT представляется как список.

SELECT имеет закрывающую команду. Внутри оператора SELECT, разрешена только последовательность команд OPTION - за каждым из которых следует некоторое количество простого текста (без HTML разметки); например:

 <SELECT NAME="my-menu">
 <OPTION VALUE="1" SELECTED> First option.
 <OPTION VALUE="2"> Second option.
 </SELECT>

Атрибуты команды SELECT:

NAME=идентификатор
символическое имя для этого SELECT элемента. Это поле должно присутствовать, т.к. оно используется при посылке запроса (аналогично команде INPUT).
SIZE=n
если SIZE равен 1 или если этот атрибут опущен, по умолчанию SELECT будет представлен как выпадающее меню. Если SIZE=2 или более, SELECT будет представлен как окно выбора; значение SIZE тогда будет определять, сколько элементов списка будут видны.
MULTIPLE
если присутствует (нет значения), задает, что SELECT должен позволять множественный выбор из списка. Наличие MULTIPLE принуждает SELECT быть представленным как список выбора, вне зависимости от значения SIZE.

Атрибуты команды OPTION:

VALUE="значение"
задается то значение, которое будет передано программе, обрабатывающей данную форму при выборе одного из элементов формы.
SELECTED
задает, что эта опция выбрана по умолчанию. Если SELECT позволяет множественный выбор (с помощью атрибута MULTIPLE), как SELECTED могут быть помечены несколько опций.


Команда INPUT

Команда INPUT используется для задания простого элемента ввода внутри FORM. Это одиночная команда, ее ничего не окружает и она не имеет закрывающей команды - т.е. он используется подобно команде IMG.

Атрибуты команды INPUT:

TYPE=параметр
Параметр принимает одно из следующих значений:
hidden Пользователю не предлагается поля для ввода, но содержимое команды передается при подтверждении и посылке формы. Это значение может быть использовано для передачи информации состояния при взаимодействии клиента сервера.
<INPUT TYPE=HIDDEN NAME=custom VALUE="c12-234-8534">
image Картинка, по которой вы можете сделать щелчок мышью или другим указывающим устройством, что приводит к немедленному подтверждению и отсылке формы. Координаты выбранной точки измеряются в точках от верхнего левого угла и возвращаются (наряду с другими компонентами формы) точно так же, как для команды IMG.
text Поле ввода текста, значение по умолчанию.
password Поле ввода пароля; вводимые символы представляются как звездочки.
checkbox Кнопка, принимающая положения on (включено) и off(выключено).
radio Кнопка, принимающая положения on и off; причем остальные кнопки с тем-же параметром NAME ведут себя по принципу "одна из многих".
submit Кнопка, действие которой сводится к отсылке содержимого заполненной формы на сервер запросов.
reset Кнопка, которая устанавливает во всех интерфейсных элементах значения по умолчанию.
броузеры четвертых версий позволяют организовать передачу файлов на сервер (File - Upload) - для этого используется значение TYPE=FILE и устанавливается режим передачи ENCTYPE.
NAME=идентификатор
символическое имя (оно не показывается) для этого поля ввода. Это поле должно присутствовать для всех полей ввода кроме "submit" and "reset", т.к. оно используется в стоке запроса при идентификации поля ввода при посылке ее на сервер после подтверждения формы.
VALUE=значение
для полей ввода текста или пароля, может быть использовано для задания начального содержания поля. Для checkbox или radio button, VALUE задает значение кнопки, когда она находится в отмеченном состоянии (неотмеченные кнопки опускаются при посылке запроса); значение по умолчанию для checkbox или radio button - "on". Для типов "submit" и "reset", VALUE может быть использовано для задания надписи на этих кнопках.
CHECKED (значение не требуется)
задает что данная кнопка типа checkbox или radio button отмечены по умолчанию; это поле работает только для кнопок типа checkbox и radio button.
SIZE=n
физический размер поля ввода в символах; это поле действует только для элементов ввода текста или пароля. Если не присутствует явно, то по умолчанию равно 20. Многострочные поля ввода текста могут быть заданы с помощью SIZE=ширина,высота; например SIZE=60,12. Заметим, что SIZE атрибут не следует использовать для задания многострочных полей ввода, т.к. можно воспользоваться командой TEXTAREA.
MAXLENGTH=n
максимальное количество введенных символов, которые будут приниматься для ввода, верно только для полей ввода текста и пароля (и только в однострочных полях). По умолчанию - неограничено. Подразумевается, что поля ввода должны прокручиваться.


Команда TEXTAREA

Команда TEXTAREA может быть использована для расположения многострокового поля ввода с необязательным содержимым по умолчанию в форме. Атрибуты команды TEXTAREA следующие:

TEXTAREA имеет полосы прокрутки, так что может быть введено любое количество текста. TEXTAREA требует закрывающей команды. TEXTAREA без содержания по умолчанию выглядит так:
<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>

TEXTAREA с содержанием по умолчанию выглядит так:

<TEXTAREA NAME="foo" ROWS=4 COLS=40>
Содержание поля ввода по умолчанию
</TEXTAREA>

Содержание по умолчанию должно быть строгим ASCII текстом. Символы перевода строки воспринимаются (так, что в примере выше до и после текста "Содержание поля ввода по умолчанию" будет пустая строка).


Команда ISINDEX

Команда ISINDEX посылает на сервер только одно сообщение, указанное в поле ввода. Как правило используется для оформления заданий на поиск.

Синтаксис команды ISINDEX

<ISINDEX
ACTION
=url
PROMPT=prompt-text>
Атрибуты команды ISINDEX:

ACTION=url
URL адрес сервера запросов, куда будет отослано содержание формы после подтверждения; Если это поле отсутствует, будет использован URL адрес текущего документа.
PROMPT=prompt-text
Приглашение к посылке данных для поиска на сервер.
Если атрибут 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">
Запрос на поиск ISINDEX броузер может выделять двумя горизонтальными линиями (команда <HR>).



CSS - Каскадные Таблицы Стилей

Задание стиля страницы (Style Sheet) возможно либо в заголовке документа: в разделе <HEAD> с помощью команды <STYLE>, либо непосредственно в тексте с помощью дополнительного атрибута STYLE для команд разметки текста (<P>, <H1> и т.п.)

Синтаксис стиля

Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:

 селектор {атрибут: значение}

Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=".

Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:

 H2 {color: red} 

Селекторы могут описывать следующие элементы:

В том случае, если свойств у команды предположительно много, то их разделяют точкой с запятой:

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>

Заголовок 1

<H1 STYLE="text-align: left">Заголовок 2</H1>

Заголовок 2

<H1 STYLE="font-size: 26pt">Заголовок 3</H1>

Заголовок 3

Селекторы

Другой способ выбора стиля в документе связан с предопределением различных стилей в заголовке документа. Для выбора стиля используется два вида селекторов: CLASS и ID (идентификатор).

Использование селекторов зависет от способа декларации стиля в заголовке.

Селектор CLASS

Задание выбора стиля по методу CLASS мозможно двумя способами:

  1. Задание имени стиля конкретной команды, например,
    P.redtext { color: #FF0000}
    

    Тогда соответствующий стиль параграфа включается командой
    <P CLASS="redtext">text</P>
    

  2. Задание имени стиля, которй может быть использован для произвольной команды разметки, например,
    .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>&nbsp;
<p>
<DIV CLASS="t2">Объявление</DIV>

Демонстрация примера

Селектор ID

Принцип работы селектора ID аналогичен принципу работы селектора CLASS. Идентификатор ID должен быть уникальным и используется для задания имени стиля произвольной команды HTML (является более ранней командой языка HTML 3).

Определяется в заголовке документа
#redtext { color : #FF0000}

Соответствующий стиль включается командой

<P ID="redtext">some text</P> would be coloured red.

Команда SPAN

Команда 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> цвета.

Демонстрация примера

Подробнее об элементах CSS