Меню

Учебник HTML

Получение информации из форм

До сих пор речь шла о способах предоставления информации посетителям веб-страниц. Теперь пришло время поговорить о методах получения от них откликов с использованием форм. Формы удобны для посетителей в первую очередь тем, что позволяют им быстро отправлять информацию на ваш сайт. Применение форм дает определенные преимущества и автору веб-страницы, в частности, возможность быстро получать ответы на поставленные вопросы. Формы применяются на веб-страницах для решения самых различных задач, и в частности таких:

получения откликов от посетителей (своего рода электронная книга замечаний и предложений);
анкетирования с целью узнать мнение читателей по определенному вопросу;
предоставления читателям возможности заказывать товары.

Автор веб-страницы должен разработать макет формы в НТМL и написать сценарий CGI (Common Gateway Interface - стандартный интерфейс обмена данными) для обработки ответов посетителей веб-сайта.

В настоящем разделе рассказывается лишь о создании в НТМL страницы формы, поскольку для обработки данных из форм, как правило, используются CGI сценарии, выполняемые на сервере провайдера, предоставляющего услуги хостинга веб-страниц.

Создание формы

На начало и конец формы указывают теги <FORM> и </FORM>. Между ними размещаются теги, используемые для получения информации от читателя. В теге <FORM> задаются два атрибута.

МЕТНОD. Определяет способ передачи информации от читателя в сценарий CGI. В атрибуте МЕТНОD следует использовать параметр POST, если провайдер Интернета не требует иного.
ACTION. Указывает местонахождение сценария CGI, который должен быть выполнен, когда пользователь заполнит и передаст форму.

Например, следующий тег начинает форму, которая будет обработана сценарием bookform, хранящимся в каталоге веб-сервера под названием cgi-bin:

<FORM МЕТНОD="post" ACTION="cgi-bin/bookform">

Заполнение бланков

Тело формы (к нему относится все, что находится между тегами <FORM> и </FORM>) содержит объекты, которые посетитель может применять для ввода информации. Кроме текстовых полей, куда вводится информация, используются следующие элементы управления:

переключатели — можно выбрать один вариант из списка;
флажки — можно отметить любое число вариантов;
поля со списками — предоставляется возможность выбора одного варианта ответа из списка.

Для создания каждого из этих элементов применяется тег <INPUT>. Атрибут ТYРЕ тега <INPUT> определяет тип создаваемого поля или кнопки, а атрибут NАМЕ присваивает создаваемому элементу имя. В зависимости от типа элемента можно указывать и другие атрибуты.

Текстовые поля

Текстовые поля представляют собой пустые прямоугольники, в которые посетители веб-страниц должны в произвольной форме вводить ответы. Для создания текстового поля применяется тег <INPUT> с атрибутом ТYРЕ, которому присваивается значение "ТЕХТ". Можно также указать размер поля (измеряемый числом символов). Следующий тег создает поле ввода шириной 25 символов.

<INPUT ТYРЕ="ТЕХТ" NАМЕ="source" SIZE="25">

Если вы хотите предоставить посетителям возможность вводить пространные ответы (длиной в несколько строк), используйте тег <ТЕХТАRЕА>. Размером текстового окна в данном случае можно управлять посредством атрибутов COLS и ROWS Приведенный ниже тег позволяет создать большое текстовое окно высотой 5 строк и шириной 40 символов:

<ТЕХТАRЕА NАМЕ="resource" COLS="40" ROWS="5">
</ТЕХТАRЕА>

Переключатели

Для того чтобы предоставить посетителю веб-страницы возможность выбирать один вариант из нескольких предлагаемых, применяются переключатели. При создании переключателя используется тег <INPUT> с атрибутом ТYРЕ, которому присваивается значение "RADIO". Все переключатели группы должны иметь одинаковое имя (определяемое атрибутом NАМЕ). Если вы применяете в форме несколько наборов переключателей, задайте уникальное имя для каждого набора. Атрибут VALUE определяет значение, выбираемое пользователем при нажатии данной кнопки. Когда посетитель веб-страницы отправляет содержимое формы на сервер, браузер обрабатывает значение атрибута VALUE только выбранного переключателя.

Рассмотрим в качестве примера три следующих тега <INPUT>, создающих набор переключателей, из которых пользователь может выбрать только один.

<INPUT ТYРЕ="RADIO" NАМЕ="bknumber" VALUE="three">Три
<INPUT ТYРЕ="RADIO" NАМЕ="bknumber" VALUE="four">Четыре
<INPUT ТYРЕ="RADIO" NАМЕ="bknumber" VALUE="more">Больше четырех

Флажки

Используя флажки, посетителю веб-страницы можно предоставить возможность выбирать по нескольку вариантов ответа. Наборы флажков аналогичны наборам переключателей, и теги для них содержат такие же атрибуты, как и теги переключателей. Однако флажки позволяют читателю выбрать любое число опций. Например, следующий набор флажков предоставляет пользователю возможность выбрать сразу несколько средств массовой информации:

<INPUT ТYРЕ="СНЕСКВОХ" NAME="media" VALUE="newspaper">Газеты<ВR>
<INPUT ТYРЕ="СНЕСКВОХ" NAME="media" VALUE="magazine">Журналы<ВR>
<INPUT ТYРЕ="СНЕСКВОХ" NAME="media" VALUE="radio">Радио<ВR>

Чтобы каждый вариант в списке переключателей или флажков появлялся в отдельной строке, после каждого тега <INPUT>следует добавлять тег <ВК>.

Ниспадающие списки

Использование ниспадающих списков позволяет значительно экономить место в форме. Возможные значения поля списка не отображаются на экране до тех пор, пока посетитель веб-страницы не щелкнет на кнопке со стрелкой, направленной вниз.

Обычно из ниспадающего списка выбирается только один элемент. Однако, применив параметр multiple тега <SELECT>, вы можете предоставить пользователям возможность выбирать в списке и по нескольку элементов. Пользователь же должен знать, с помощью каких именно клавиш это можно делать. В Windows выбор нескольких элементов из списка осуществляется путем удерживания при их выделении клавиш Shift и Ctrl.

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

Введите теги <SELECT> и </SELECT>, которые ограничивают теги элементов списка. Тег <SELECT> должен включать атрибут NАМЕ, используемый для хранения имени списка. После тега <SELECT> для каждого элемента, который должен появиться в списке, следует ввести тег <OPTION>. Рассмотрим в качестве примера код, создаюший список с четырьмя элементами:

<SELECT NAME="booktypes">
<OPTION>Путешествия/приключения
<OPTION>История
<OPTION>Фантастика
<OPTION>Политический триллер
</SELECT>

Передача данных формы

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

Читатели будут щелкать на кнопке отправки (независимо от того, как она называется) после заполнения формы при необходимости передать содержащиеся в ней данные на веб-сервер для обработки. Сценарий CGI, указанный в теге <FORM>, вступает в силу после нажатия кнопки Отправить и выполняет обработку данных, введенных пользователями.

Для добавления в форму кнопки Отправить используется тег <INPUT> с атрибутом ТYРЕ, которому присваивается значение "Submit". Если вы не хотите, чтобы кнопка имела такое название, переименуйте ее, указав в атрибуте VALUE данного тега другое значение. Так, следующий тег присваивает кнопке имя "Отправить содержимое формы":

<INPUT ТYРЕ="SUBMIT" VALUE="Отправить содержимое формы">

[Вернуться к содержанию...]