Книга отзывов и предложений на нашей странице

Рассказав на Web-странице о сфере своей деятельности, компания ГЕОТОН предполагает, что познакомившиеся с этой информацией и заинтересовавшиеся ею посетители сайта захотят связаться с компанией, задать вопросы, обсудить общие проблемы, предложить сотрудничество. Чтобы ускорить и облегчить им процедуру связи, достаточно поместить на данной странице специальную форму; заполнив ее, посетитель сайта передаст компании информацию, которую он насчитает нужным послать.

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

Посмотрим, как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его по электронной почте компании ГЕОТОН. Но сначала вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, огра­ничив его парой тегов < р> < /р>, и выровнять по центру с помощью атрибута align=center.

u Вставьте пустую строку между закрывающим тегом < /u1> и закрывающим тегом < / body > и введите в этой строке следующий код:

< р align=center> Ecли у Вас есть вопросы или предложения, напи­шите нам: < /р>

Каждая форма начинается тегом < form > и заканчивается тегом < /form >. HTML-документ может содержать в себе несколько форм, однако они не долж­ны находиться одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений. Открывающий тег < form> должен содержать обяза­тельный атрибут action, который определяет, где находится программа-обработчик или адрес сервера, который будет обрабатывать форму. Так как со­общение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action=" mailto: geoton@narod.ru".

Еще один атрибут тега < f orm> - method - определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post: method=post. Таким образом, элемент < form >... < / form > будет иметь примерно такой вид:

< form action=" mailto: geoton@narod.ru" method=post >

< /form>

u Добавьте в документе spisok. html пустую строку перед закрывающим тегом < / body > и введите указанный код, вставив в качестве значения атрибута action вместо geoton@narod.ru свой адрес электронной почты.

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги < textarea> < /textarea >. В качестве атри­бутов открывающего тега < textarea> необходимо указать количество строк (rows) и колонок (cols), а также имя (name), под которым содержимое тексто­вого поля ввода будет передано программе-обработчику, например:

< textarea rows=5 cols=40 name=Comments> < /textarea>

Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 сим­волов. Введенный посетителем сайта текст будет передан обработчику под именем Comments (Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, следует ограничить его тегами < center> < /center>.

u Вставьте пустую строку перед закрывающим тегом < /form > и введите сле­дующий элемент, создающий текстовое поле:

< center> < textarea rows=5 cols=40 name=Comments> < /textarea> < /center>

Здесь для центрирования текстового поля мы использовали теги < center> < /center>, а не атрибут align=center тега < р >, так как данный атрибут предназначен преимущественно для выравнивания текстовых фрагментов, и.некоторые браузеры могут игнорировать данный атрибут для поля формы.

Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то элемент управления, например, кнопка. Создать такой элемент управления пень легко с помощью одиночного тега < input > с атрибутом type. Если нужно создать кнопку, то значение этого атрибута должно быть submit (передать):

< input type=submit>

Такой элемент по умолчанию выведет на Web-странице кнопку с надписью Submit Query (Передать запрос). Чтобы изменить надпись на кнопке, достаточно включить в данный тег атрибут value с нужным вам значением, например: value =" Отправить". Напомним, что значения атрибутов, в которых используются символы, отличные от латинских, следует обязательно заключать в кавычки.

u Вставьте пустую строку перед закрывающим тегом < / form > и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий во центру страницы:

< p > < center > < input type=submit value=" Oтправить " > < /center > < /p>

В результате элемент < form>... < /form> должен принять следующий вид:

< formactions=" mailto: geoton@narod.ru" method=post>

< center> < textarea rows=5 cols=40 name=Comments> < /textarea> < center> < p > < center> < input type=submit values" Отправить " > < /centerx/p> < /form>

Напомним еще раз, что в качестве значения атрибута action, в открывающем теге < form > следует указать ваш адрес электронной почты.

u Щелкните мышью на текстовом поле ввода в окне браузера. В этом месте появится текстовый курсор.

u Введите в текстовом поле несколько слов.

u Нажмите кнопку Отправить под текстовым полем. На экране появится диа­лог с предупреждением о том, что форма передаст ваш адрес E-mail получа­телю, а данные, содержащиеся в форме, будут переданы без шифрования и, если они конфиденциальны, это может быть нежелательно для вас.

u Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с преду­преждением закроется.