Книга отзывов и предложений на нашей странице
Рассказав на 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".
Еще один атрибут тега <form> - 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> должен принять следующий вид:
<form actions="mailto:geoton@narod.ru" 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 Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждением закроется.