Форма и содержание

В назаметке “Форма как средство от лени” рассказано о блоке <FORM>…</FORM>, который часто встречается на гипертекстовых страницах и служит для организации интерактивности, то есть, для взаимодействия с пользователем.

Форма передается на вход серверной программы-обработчика или направляется по указанному электронному адресу. В последнем случае она может быть обработана вручную или программой, установленной на компьютере получателя. Серверная программа-обработчик имеет возможность представить результаты обработки прямо на гипертекстовой странице (типичный пример — программа-счетчик посещений). Ручная или автоматическая обработка на обычном (не серверном) компьютере такой возможности не имеет, но, тем не менее, тоже бывает полезна. Примеры приводятся ниже, но сначала завершим рассказ о специальных тегах, которые используются только внутри блока <FORM>…</FORM>.

Интерфейсные элементы блока FORM

Внутри формы могут быть использованы следующие интерфейсные элементы:

элемент	вид	тег	описание
радиокнопки		`<INPUT type=radio>`	Выбор одного варианта из нескольких альтернативных.
флажки		`<INPUT type=checkbox>`	Установка меток. Можно установить любое число меток.
строка ввода		`<INPUT type=text>`	Ввод в границах одной строки.
поле ввода	...	`<TEXTAREA> ... </TEXTAREA>`	Ввод в многострочное поле.
меню		<SELECT> <OPTION>суп</OPTION> <OPTION>борщ</OPTION> <OPTION>щи</OPTION> </SELECT>	Выбор одного варианта из нескольких альтернативных.
обычные кнопки		`<INPUT type=button value=Вид>`	Нажатие на такую кнопку обрабатывается при помощи скрипта.
очистка формы		`<INPUT type=reset value=Сброс>`	Приведение элементов формы в начальное состояние (то, которое было до воздействий пользователя).
посылка формы в сеть		`<INPUT type=submit value=Пуск>`	По нажатию на эту кнопку браузер отправляет форму по указанному в атрибуте `action` тега `FORM` адресу.

Радиокнопки и кнопка для посылки формы в сеть были рассмотрены в назаметке “Форма как средство от лени”. Кратко об остальных элементах.

Обычные кнопки

Браузер самостоятельно не обрабатывает нажатие на такую кнопку. Разработчик должен предусмотреть обработку при помощи программы (скрипта), написанной, например, на JavaScript.

Атрибуты:

value — задает надпись на кнопке.
onclick — задает программу (скрипт), который обрабатывает нажатие кнопки. В примере использована функция alert, которая выводит на всплывающую панель значение своего аргумента.

Флажки

Флажки или, как говорят, кнопки с независимой фиксацией, служат для многокомпонентного выбора.

Флажки не зависят один от другого. Их можно устанавливать и сбрасывать в любой комбинации.

Приведенная группа флажков кодируется так:

<FORM>
 <INPUT type=checkbox name=html> HTML-конструирование<BR>
 <INPUT type=checkbox name=js> JavaScript-конструирование<BR>
 <INPUT type=checkbox name=dhtml> DHTML-конструирование<BR>
 <INPUT type=checkbox name=alg checked> Алгоритмика<BR>
</FORM>

Атрибуты:

name — значение этого атрибута с префиксом =on передается в сеть, если флажок отмечен. Например, если выбрана книга “HTML-конструирование”, в сеть будет передана запись html=on.
checked — задает начальную отметку флажка.

Строка ввода

Эта форма кодируется так:

<FORM>
 <INPUT type=text name=customer size=30
        value="Иванов Петр Николаевич">BR>
 <INPUT type=text name=email size=30
        value="ivanov@sch62.nsk.ru">BR>
</FORM>

Атрибуты:

name — значение этого атрибута с текущим содержимым строки ввода передается в сеть. Например, если пользователь заменит в первой строке запись “Иванов Петр Николаевич” на запись “Горбунков Семен Семенович”, оставив вторую строку без изменения, в сеть уйдет:
```
customer=Горбунков Семен Семенович
email=ivanov@sch62.nsk.ru
```
value — задает начальную запись в строке ввода.
size — задает ширину строки ввода в символах (рекомендуется кодировать с запасом).

Поле ввода

Эта форма кодируется так:

<FORM>
 <TEXTAREA name=address rows=3 cols=24>
630090 Новосибирск,
ул.Жемчужная, 6,
средняя школа 62
 </TEXTAREA>
</FORM>

Начальное содержимое поля кодируется так же, как и содержимое блока PRE, то есть, текст выводится в поле в том виде, в каком он представлен в HTML-файле без автоматического форматирования.

Атрибуты:

name — значение этого атрибута с текущим содержимым поля ввода передается в сеть. Например, если пользователь ничего не изменит в приведенном выше примере, то в сеть уйдет:
```
address=630090 Новосибирск,
ул.Жемчужная, 6,
средняя школа 62
```
rows — задает число строк в поле ввода.
cols — задает ширину поля в символах.

<FORM>
 Укажите автора:<BR><BR>
 Здесь лапы у елей дрожат на весу,<BR>
 Здесь птицы щебечут тревожно.<BR>
 Живешь в заколдованном диком лесу,<BR>
 Откуда уйти невозможно.<BR><BR>
 <SELECT name=autor>
   <OPTION>А.Пушкин</OPTION>
   <OPTION selected>М.Лермонтов</OPTION>
   <OPTION>В.Высоцкий</OPTION>
   <OPTION>О.Какаулин</OPTION>
   <OPTION>Б.Окуджава</OPTION>
 </SELECT<
</FORM>

Атрибуты тега SELECT:

name — значение этого атрибута с текущим содержимым позиции меню передается в сеть. Например, если пользователь ничего не изменит в приведенном выше примере, то в сеть уйдет:
```
autor=М.Лермонтов
```
size — задает число видимых строк меню. Если атрибут не задан, то он считается равным 1. Вот как будет выглядеть меню при size=5:

Атрибуты тега OPTION (этот тег задает позиции меню):

selected — задает первоначальную отметку в меню.

Очистка формы

Эта кнопка приводит все интерфейсные элементы формы в начальное положение, то есть, то, которые они имели до воздействий пользователя.

Измените значения полей на следующем стенде и посмотрите, что получится после нажатия кнопки Сброс (это кнопка <INPUT type=reset value=Сброс>).

Друзья Роботландии

Ниже представлен пример с сайта Роботландии — форма для тех, кто хочет добавить на сайт свою ссылку. Это тот самый случай, когда отправка формы по e-mail оправдана, а автоматическая обработка содержимого, пожалуй, даже вредна.

В самом деле, огромного количества таких писем не бывает, зато при ручной обработке есть возможность выполнить “работу над ошибками” и, кроме того, правильным образом отформатировать полученную информацию.

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

Заявка
(это учебный пример, форма посылаться не будет)
Фамилия
Имя
Отчество
Город
Учебное заведение
Web-адрес
E-mail
Почтовый адрес
Краткая информация

Ниже приводится полный код этой формы.

<FORM action=mailto:kurs@robotland.pereslavl.ru
      method=post enctype="text/plain">
 <TABLE border=1 cellspacing=0 cellpadding=0
        bgcolor=#DFD9BB>
 <TR><TD>
   <TABLE border=0 cellspacing=0 cellpadding=5>
    <TR valign=top>
     <TD><B>Заявка</B></TD>
     <TD>
      <INPUT type=reset name=reset value=Откатка>
      <INPUT type=submit name=friend value=Послать>
     </TD>
    </TR>
    <TR>
     <TD colspan=2><HR noshade size=1></TD>
    </TR>
    <TR>
     <TD>Фамилия</TD>
     <TD><INPUT type=text size=30 name=fam
                value=Иванов></TD>
    </TR>
    <TR>
     <TD>Имя</TD>
     <TD><INPUT type=text size=30 name=name
                value=Иван></TD>
    </TR>
    <TR>
     <TD>Отчество</TD>
     <TD><INPUT type=text size=30 name=father
                value=Иванович></TD>
    </TR>
    <TR>
     <TD>Город</TD>
     <TD><INPUT type=text size=30 name=sity
                value=Луховицы></TD>
    </TR>
    <TR>
     <TD>Учебное заведение</TD>
     <TD><INPUT type=text size=30 name=school
                value="Школа 1"></TD>
    </TR>
    <TR>
     <TD>Web-адрес</TD>
     <TD><INPUT type=text size=30 name=web
                value="http://come.to/school1"></TD>
    </TR>
    <TR>
     <TD>E-mail</TD>
     <TD><INPUT type=text size=30 name=email
                value="ivan@come.to"></TD>
    </TR>
    <TR>
     <TD>Почтовый адрес</TD>
     <TD><INPUT type=text size=30 name=address
          value="152400, г.Луховицы, ул.Пушкина, д.58"></TD>
    </TR>
    <TR>
     <TD>Краткая информация</TD>
     <TD><TEXTAREA name=text rows=4 cols=24></TEXTAREA></TD>
    </TR>
   </TABLE>
 </TD></TR>
 </TABLE>
</FORM>

После отправки формы в роботландском ящике kurs@robotland.pereslavl.ru окажется такое письмо:

friend=Послать
fam=Иванов
name=Иван
father=Иванович
sity=Луховицы
school=Школа 1
web=http://come.to/school1
email=ivan@come.to
address=152400, г.Луховицы, ул.Пушкина, д.58
text=Мы, учителя информатики языкового лицея,
хотим пообщаться с учителями, использующими
продукты Роботландии в своей работе.

Заявка на услугу или продукт

Если вы — директор крупного электронного магазина, то без серверных программ вам, конечно, не обойтись.

Устройство интернет-магазина

Как правило, интернет-магазин (как программа) имеет две части: клиентскую и серверную. Клиентская часть обслуживается скриптом, вмонтированным в HTML-код страницы, которую просматривает покупатель. Пользователь листает каталоги-меню, отмечая товары, затем оформляет заказ. Заказ посылается на сервер и там обрабатывается CGI-программой — серверной частью сетевого магазина.

Что такое CGI-скрипты?

CGI-скриптом называют программу, работающую на сервере (на котором лежит www-страничка). Эта программа получает с машины клиента (той машины, с которой смотрят www-страничку) данные. Данные посылаются, например, из формы по нажатию на кнопку Обработать заказ (<INPUT type=submit>). Данные поступают на сервер в программу-скрипт CGI, обрабатываются и результат посылается клиенту. Гипертекстовая страничка на машине клиента получает данные и что-нибудь делает с ними, например, выводит на страницу надпись “Заказ обработан и принят к исполнению. Ждите книги почтой через неделю”.

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

Кстати, CGI расшифровывается как Common Gateway Interface. То есть, под сокращением CGI понимают описание структуры информации, ее вид, в котором она следует от клиента к серверу и обратно. Имеется в виду, не сетевые протоколы, а логическое представление данных (для формы — это пары типа “имя=значение”).

Маленький бизнес

Если размах бизнеса не велик, то реально обойтись без автоматической обработки данных на сервере. Можно принимать формы, посланные заказчиками с вашей гипертекстовой странички, и обрабатывать их вручную или с помощью какой-нибудь программы-помощника. “Ручной” контакт бывает приятнее шаблонной вежливости автоматического обработчика (вам напишут “Дорогой Иван”, а не “Уважаемый(ая) Сидоров”!).