Библиотека Интернет Индустрии I2R.ru

В настоящее время в сети существует не мало красивых и к тому же наполненных полезной информацией страничек. Но зачастую им не хватает интерактивности.

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

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

И так, Вы решили сделать свой сайт интерактивным. Какими же средствами достигается интерактивность сайта? Вот об этом и пойдет речь в данной статье.

И так, Вы решили организовать на своем сайте анкетирование посетителей. Для этого необходимо, прежде всего, определиться с целью анкетирования и составить перечень задаваемых вопросов. Кстати это довольно не простая задача, но это уже совсем другая история и о ней будет рассказано совсем в другой статье. В этой же статье мы рассмотрим технические аспекты данного вопроса.

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

Вот возможный вариант:

• откуда Вы узнали о нашем ресурсе (варианты ответов:
  • поисковая система,
  • баннерная реклама,
  • периодическое издание,
  • другое);
• пол (варианты ответов:
  • мужской,
  • женский
  );
• возраст;
• предложения по улучшению ресурса.

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

Формально форма - это все то, что находиться между тэгами <FORM> и </FORM>. И что же там находиться, спросите Вы. Отвечаю, формы могут содержать практически все существующие приемы HTML разметки, включая такие виды полей форм, как однострочные или многострочные текстовые поля, группы радиокнопок, переключатели и меню.

Но обо всем по порядку. Рассмотрим форму с нашими вопросами, вот возможный вариант HTML разметки для нашей формы:

<form action="mailto: mail@kuku.ru" method="POST"><br><br> <b><font color="#000080">Откуда Вы узнали о данном ресурсе </font></b><br><br> <input type="radio" value="s1" checked name="lin">поисковая система <br> <input type="radio" name="lin" value="s2">баннерная реклама<br> <input type="radio" name="lin" value="s3">пресса<br> <input type="radio" name="lin" value="s4">другое<br> <br><br><b><font color="#000080">Ваш пол</font></b><br> <br><input type="radio" name="pol" value="p5" checked>мужской<br> <input type="radio" name="pol" value="p6">женский<br> <br><br><b><font color="#000080">Ваш возраст</font></b><br> <input name="T1" size="5"><br> <br><br><b><font color="#000080">Ваши предложения по улучшению ресурса</font></b><br> <br><textarea rows="4" name="S1" cols="50">предложения</textarea><br> <br><br> <br><br> <input TYPE="SUBMIT" VALUE="отправить"> <br> </form>

Как Вы уже поняли, форма начинается с тэга <FORM>, который имеет свои специфические атрибуты, в данном случае это: ACTION и METHOD. В атрибуте ACTION задает URL CGI скрипта, который будет обрабатывать данные формы.

В нашем случае запись "mailto: mail@kuku.ru" говорит о том, что данные формы будут отправлены по электронной почте на адрес mail@kuku.ru с использованием почтовой программы установленной на компьютере посетителя.

Такой способ отправки форм используется крайне редко, так как многие посетители не захотят засвечивать свой почтовый ящик. Но, учитывая отсутствие у нас на данный момент CGI скрипта, рассматриваемый вариант является единственно возможным и самым простым, если не считать возможности использования скриптов на других серверах. Об этом мы поговорим позже.

Атрибут METHOD указывает на метод посылки данных форм GET или POST. При отправке данных методом GET отправляемые данные будут болтаться в адресной строке браузера, а при отправке методом POST они будут скрыты от Ваших глаз. Помимо указанных атрибутов существует также атрибут ENCTYPE, который указывает механизм, используемый для кодирования содержимого формы, по умолчанию используется /x-www-form-url-кодирование.

Изменять значение данного атрибута не рекомендуется за исключением случая, когда форма используется для загрузки файлов (upload).

С заголовком кое-как разобрались. Теперь рассмотрим элементы применяемые внутри формы, а именно:

• INPUT - текстовое одностроковое поле, поля пароля, переключатели, радиокнопки, кнопки установки и перезагрузки, скрытые поля, кнопки выгрузки файла, кнопки изображений и т.д.;
• TEXTAREA - многострочное текстовое поле;
• SELECT - меню единичного или множественного выбора.

Остановимся кратко на каждом элементе.

Текстовое одностроковое поле.

Данное поле применяется очень часто, поэтому тип "text" служит для атрибута INPUT по умолчанию, его не надо каждый раз указывать. Имя поля, задаваемое атрибутом name, является обязательным. Значение поля по умолчанию задается атрибутом value. Атрибут size позволяет задать размер поля.

В нашей форме текстовое поле используется для запроса возраста посетителя.

Поле ввода пароля(password).

Очень похоже на текстовое одностроковое поле, отличается лишь тем, что вместо символов в нем отображаются символы '*'. Служит для ввода пользователем пароля.

Переключатель(checkbox).

Если надо что-то подписать, то текст подписи необходимо писать рядом с переключателем. Переключатель может быть сразу выбранным, если указан атрибут checked.

Если value не указано, то значение по умолчанию "on". Передается только в том случае, когда выбран.

Радио-кнопка(radio).

Отличие радио-кнопки от checkbox в том, что их может быть несколько с одинаковым параметром name, но с разными value, из них передается только та, что выбрана. Одна из них может быть выбрана по умолчанию, для этого должен быть установлен атрибут checked.

В нашей форме используется для получения ответа на вопрос: "откуда Вы узнали о нашем ресурсе?".

Кнопка (Submit).

Данная кнопка, предназначена для передачи (отправки) формы. Сама не передается, а служит только для управления. Текст на ней задается атрибутом value.

Reset

Существует также возможность установить кнопку для очистки полей формы, кнопка - "Reset". При ее нажатии всем измененным элементам возвращается значение по умолчанию. Она задается следующей строкой:

TEXTAREA

Часто применяемым является также текстовое многострочное поле - TEXTAREA. Вот его синтаксис:

Размеры в строках и столбцах для этого поля задаются атрибутами rows и cols. Значения атрибута wrap "hard" и "soft" -означают соответственно мягкую или жесткую разбивку на строки (в большинстве случаев его можно не указывать).

В нашей форме данное поле используется для сбора предложений посетителей.

SELECT

Осталось рассмотреть последний элемент SELECT (меню единичного или множественного выбора).

Данный элемент позволяет задать список, позволяющий выбрать одну или несколько опций из списка. Если атрибут multiple не указан, то создается простой выпадающий список, в котором можно выбрать только одну из опций. Его значение всегда передается, т.к. всегда хоть одно выбрано. Если указан атрибут multiple, то можно указать размер видимой части списка атрибутом size (Если опций больше появится скроллинг). И к тому же появится возможность одновременного выбора нескольких опций.

Ну, вот наша HTML форма почти готова остается только дописать в конце тэг </FORM>. Дописываем. Готово! Теперь разместим ее на нужной страничке нашего, вернее Вашего, сайта и будем ожидать ответов. Как было сказано выше, недостатком нашей формы является то, что данные посылаются с использованием почтовой программы установленной на компьютере посетителя. Что бы исправить этот недостаток можно написать свой скрипт на PHP или Perl, расположить его на своем сервере, а в атрибуте ACTION указать URL скрипта. Но если у Вас нет желания писать скрипт или Вы пользуетесь бесплатным хостингом который не позволяет Вам использовать скрипты, я посоветую воспользоваться сервисом по сбору форм на http://msform.hut.ru , там же Вы увидите пример формы позволяющей организовать прием от посетителей файлов (например фотографии).