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

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

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

- поля для ввода данных,

- поля списков,

- открывающиеся списки,

- флажки и переключатели для выбора значений,

- другие элементы управления.

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

Рассмотрим, как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его Вам по электронной почте.

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

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

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

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

- количество строк rows,

- количество колонок cols,

- имя name, под которым содержимое текстового поля ввода будет передано программе-обработчику.

Например:

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

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

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

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

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

<input type=submit>

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

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

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

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

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

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

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

</form>

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

В результате выполненных действий HTML– код страницы, расположенной в файле lab2.html будет иметь вид:

<html>

<head>

<title>Чем мы занимаемся?</title>

</head>

<body bgcolor=aqua text=navy>

<h2 align=center>Чем мы занимаемся?</h2>

<ul>

<li>Разработкой компьютерных распределённых систем управления

<li>Разработкой простых и дешёвых SCADA–систем

<li>Внедрением покупных SCADA–систем

<li>Разработкой управляющих программ для промышленных

контроллеров

</ul>

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

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

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

</form>

</body>

</html>