Формы
Формы применяются
для передачи данных от html-документа интерактивным элементам сайта,
например сценариям CGI. Поместив в форму какие-либо значения, посетитель
сервера нажимает мышью на соответствующую кнопку, после чего введенная
им информация передается CGI-скрипту, который принимает управление процессом
обработки данных. Эти данные претерпевают те или иные изменения, алгоритм
которых записан в файле сценария CGI, например, встраиваются в другую
web-страницу или передаются по электронной почте. Подобный принцип реализован
в многочисленных электронных конференциях, досках объявлений, гостевых
книгах и web-чатах Всемирной сети.
Поскольку подробный
рассказ об алгоритмах подготовки и настройки CGI-скриптов выходит за
рамки этой книги, я опишу только мнемонику записи тегов, определяющих
содержание форм. Для читателя, интересующегося технологиями создания
интерактивных сценариев, есть немало специализированной литературы.
В большинстве случаев web-дизайнеру нет необходимости владеть упомянутыми
технологиями, поскольку существует огромное количество серверов Интернета,
предлагающих широкий ассортимент скриптов CGI разного назначения и на
все случаи жизни.
Итак, общий вид записи
директивы вызова формы можно представить в следующем виде:
<FORM ACTION="URL"
МЕТНОD="значение">
Содержание формы,
включающее все используемые элементы
</FORM>
В качестве параметра
атрибута ACTION в кавычках указывается строка вызова CGI-скрипта, который
использует данная форма, например, "http://www.myserver.ru/cgi-bin/имя_сценария.cgi".
Значение атрибута METHOD устанавливает метод передачи данных из формы
на сервер: «GET» с помощью стандартного интерфейса HTTP
или «POST» — по каналам электронной почты. Иногда совместно
с тегом <FORM> применяют атрибут ENCTYPE, описывающий механизм
кодирования содержимого формы перед отправкой.
Содержание формы
описывается тегом <INPUT>, запись которого в общем виде выглядит
следующим образом:
<INPUT ТУРЕ="тип
элемента" NAME''имя" VALUE="строка" CHECKED="параметр"
SIZE="целое число" MAXLENGTH="целое число" ALIGN="значение">
Возможные значения
атрибута ALIGN вам уже знакомы, он определяет положение элементов формы
на web-странице. Атрибут MAXLENGTH определяет максимально возможную
длину текстового поля в символах для полей ввода текста, аналогично
атрибут SIZE определяет его видимую на экране длину в пикселах. Атрибут
CHECKED устанавливает выделенный объект из нескольких в случае, если
значением атрибута TYPE является RADIO или CHECKBOX. Атрибут VALUE указывает
первоначальное значение текущего поля, а NAME задает уникальное имя
для каждого элемента формы, записанное латиницей. Это имя служит для
идентификации данных, передаваемых серверу из формы. И наконец, атрибут
TYPE задает типы самого элемента, которые мы и рассмотрим подробнее.
Типы
элементов формы
TYPE="TEXT"
Представляет собой
одностроковое текстовое поле (рис. 6.1), физический размер которого
можно установить с использованием атрибута SIZE, а первоначально введенную
в него символьную последовательность — с помощью атрибута VALUE.
Рис. 6.1. Элемент
формы TEXT
Примером использования
данного элемента в коде HTML может служить следующая строка:
<INPUT TYPE='TEXT"
SIZE="40" NAME="user_name" VALUE-''Введите ваше
имя">TYPE="PASSWORD"
Тип, полностью аналогичный
предыдущему, за исключением того, что вводимая пользователем в текстовое
поле информация будет отображаться на экране символами «*»,
чтобы скрыть текст от постороннего зрителя.
TYPE="CHECKBOX"
Элемент, представляющий
собой простую форму выбора, принимающую одно из двух устойчивых состояний:
«отмечено» — «не отмечено» (рис. 6.2).
Рис. 6.2. Элемент
формы CHECKBOX
Данный элемент оперирует
так называемыми булевыми переменными, то есть переменными, каждая из
которых может принимать значение «ИСТИНА» или «ЛОЖЬ».
Каждый элемент формы CHECKBOX создает логическую пару значений вида
«имя_элемента—состояние» и передает их на сервер. Для установки
первоначального состояния элемента (отмечен, либо нет) используют атрибут
CHECKED.
Пример использования:
<INPUT TYPE="CHECKBOX"
CHECKED NAME="C01" VALUE="yes">
TYPE="RADIO"
Так называемая радиокнопка
(рис. 6.3) применяется в случае, когда какая-либо логическая переменная
может принимать только одно значение из множества возможных.
Рис. 6.3. Элемент
формы RADIO
Все элементы RADIO
одной формы обозначаются одним и тем же значением атрибута NAME. Использование
радиокнопок требует явного указания значений атрибута VALUE, одна из
кнопок должна быть обязательно выделена атрибутом CHECKED.
Пример использования:
<Р АLIGN="СЕМТЕR">Пожалуйста,
укажите ваш возраст</Р>
<CENTER>
<INPUT TYPE="RADIO"
NAME= "user-age" VALUE="0-12">
<INPUT TYPE="RADIO"
NAME= "user-age" VALUE="13-17">
<INPUT TYPE="RADIO"
NAME= "user-age" VALUE="18-25">
<INPUT TYPE="RADIO"
NAME= "user-age" VALUE="26-35" CHECKED>
<INPUT TYPE="RADIO"
NAME= "user-age" VALUE="36-">
</CENTER>
TYPE="BUTTON"
Отображает обыкновенную
кнопку (рис. 6.4), нажатие на которую приводит к какому-либо действию
сервера.
Рис. 6.4. Элемент
формы BUTTON
С помощью атрибута
NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет
изменять надпись, отображаемую на кнопке.
Пример использования:
<INPUT TYPE="BUTTON"
VALUE="Button" NAME="B1">TYPE="SUBMIT"
Определяет кнопку,
по нажатии которой данные из формы передаются серверу.Так же как и в
предыдущем случае, надпись, отображаемая на кнопке, задаетсяатрибутом
VALUE.
Пример использования:
<INPUT TYPE="SUBMIT"
VALUE="Отправить!">
TYPE="RESET"
Создает кнопку, которая
очищает неправильно заполненную текстовую форму. Параметры и значения
этой кнопки не передаются на сервер вместе с другими данными формы.
Пример использования:
<INPUT TYPE="RESET"
VALUE="Очистить форму">TYPE="FILE"
Генерирует на экране
кнопку, по нажатии на которую на экране появляется Проводник Windows,
позволяющий присоединить к отсылаемым на сервер данным любой файл с
локального компьютера пользователя. Данный элемент применяется в основном
в формах отправки с сервера сообщений электронной почты для организации
вложений, а также для загрузки изображений на сервер. Обычно рядом с
кнопкой отображается небольшое текстовое поле, куда автоматически заносится
имя отсылаемого файла и путь к нему на локальном диске.
Пример использования:
<INPUT TYPE="FILE"
NAME="picture">TYPE="IMAGE"
Создает кнопку отсылки,
аналогичную элементу SUBMIT, но с использованием графического изображения,
созданного пользователем. Обычно применяется вслучаях, когда стандартная
серая прямоугольная кнопка «не вписывается» в дизайн сайта.
URL к изображению, играющему роль кнопки, указывается атрибутом SRC,
причем сам элемент может содержать собственные атрибуты, аналогичные
применяемым в теге <IMG> (см. урок 5), в том числе ALIGN, ALT
и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты
элемента SUBMIT.
Пример использования:
<INPUT TYPE="IMAGE"
SRC="/images/button.giГ ALIGN="BOTTOM" NAME="submit"
VALUE="Отправить!">
TYPE="HIDDEN"
Данный элемент является
скрытым и не отображается на экране монитора пользователя. Применяется
он для хранения и передачи на сервер информации о текущем состоянии
формы: при нажатии кнопки SUBMIT элемент HIDDEN сформирует логическую
пару переменных типа «имя—значение», которые будут отосланы
серверу с помощью протокола HTTP. Элементы HIDDEN служат доступной альтернативой
файлам cookies — специальным файлам, в которых сохраняются индивидуальные
настройки пользователя и позволяющим, например, восстановить последнее
состояние формы при повторном посещении пользователем содержащей эту
форму страницы.
Пример использования:
<INPUT TYPE="HIDDEN"
NAME="forml" VALUE="c3576-236-2113">
Однако с помощью
тега <INPUT> можно передать далеко не все доступные web-дизайнеру
элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT
и PASSWORD, весьма ограничены по количеству символов, которые можно
ввести в эти поля. Если перед web-мастером встала задача создать такие
текстовое поля, чтобы пользователь мог вводить большое количество символов,
используется самостоятельный тег <TEXTAREA>, формирующий на экране
одноименный элемент формы (рис. 6.5).
Рис. 6.5. Элемент
формы TEXTAREA
Синтаксис записи
данного тега выглядит следующим образом:
<TEXTAREA МАМЕ="имя
элемента" ROWS-''целое число" СOLS="целое число">
Текст, выводимый
в текстовом поле по умолчанию</TEXTAREA>
С атрибутом NAME,
определяющим индивидуальное имя каждого элемента формы, вы уже знакомы.
Атрибуты ROWS и COLS указывают соответственно максимально допустимое
количество строк вводимого текста и символов в строке. В случае если
набираемый пользователем текст не умещается в видимую часть текстового
контейнера, по краям поля появляются вертикальные и горизонтальные полосы
прокрутки для скроллинга содержимого элемента TEXTAREA.
Пример использования:
<TEXTAREA NAME="message"
ROWS="25" COLS="40">
Введите сюда текст
сообщения
</TEXTAREA>
Для создания меню
выбора в форме (рис. 6.6) web-мастер может воспользоваться тегом <SELECT>.
Рис. 6.6. Элемент
формы SELECT
Синтаксис записи
данного тега в общем виде выглядит так:
<SELECT NAME="имя"
MULTIPLE SIZE="целое число">
<OPTION VALUE="Пункт
1">Пункт 1</OPTION>
<OPTION VALUE-''Пункт
2">Пункт 2</OPTION>
<OPTION VALUE="Пункт
3">Пункт 3</OPTION>
OPTION VALUE="Пункт
N">Пункт N</OPTION>
</SELECT>
Атрибут MULTIPLE
определяет для пользователя возможность отметить не одну, а сразу несколько
позиций из предложенного списка. Если данный атрибут задан, можно воспользоваться
атрибутом SIZE, определяющим количество позиций, видимых на экране одновременно.
Пример использования:
<Р АLIGN ="CENTER">Пожалуйста,
укажите ваш город</Р>
<CENTER>
<SELECT NAME="City"
MULTIPLE SIZE="3">
OPTION VALUE="a">Санкт-Петербург</OPTION>
OPTION VALUE="b">Mocква</OPTION>
<OPTION VALUE="c">Екатеринбург</OPTION>
</SELECT>
</CENTER>
