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

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

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

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

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

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

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

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

<form action="mailto: [email protected]" method=post >

</form>

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

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги <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> должен принять следующий вид:

<form actions="mailto:[email protected]" method=post>

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

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

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

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

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

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