Формы
Формы применяются для передачи данных от 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"
Представляет собой одностроковое текстовое поле , физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE.
Примером использования данного элемента в коде HTML может служить следующая строка:
<INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"
Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.
TYPE="CHECKBOX"
Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» — «не отмечено»
Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента—состояние» и передает их на сервер. Для установки первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.
Пример использования:
<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes">
TYPE="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"
Отображает обыкновенную кнопку , нажатие на которую приводит к какому-либо действию сервера.
С помощью атрибута 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>, формирующий на экране одноименный элемент формы .
Синтаксис записи данного тега выглядит следующим образом:
<TEXTAREA МАМЕ="имя элемента" ROWS-''целое число" СOLS="целое число">
Текст, выводимый в текстовом поле по умолчанию</TEXTAREA>
С атрибутом NAME, определяющим индивидуальное имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.
Пример использования:
<TEXTAREA NAME="message" ROWS="25" COLS="40">
Введите сюда текст сообщения
</TEXTAREA>
Для создания меню выбора в форме web-мастер может воспользоваться тегом <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>
| На главную |