Назначение форм.

Формы служат для обмена данными между клиентом и веб-сервером по протоколу CGI. Другими словами говоря, вы заполняете форму нажимаете кнопку, и ваши данные уходят на сервер в виде: [имя_переменной]=[значение_переменной].
CGI - программа на сервере обрабатывает эти данные и выполняет в зависимости от результата какие-либо действия. Это может быть обработка сообщения конференции, подписка на новости сайта, работа с базой данных посетителей сайта и т.д.

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

Задание формы.

Форма задается тэгами <form></form> и состоит из управляющих элементов (текстовое поле, кнопка, список и т.д.).

Атрибуты тэга <FORM>:

action="URL"	URL-адрес CGI-программы, выполняющей обработку данных.
method	Способ передачи данных веб-серверу. Может принимать значения: get -программа CGI, указанная в параметре ACTION, получит данные из формы через переменную среды с именем QUERY_STRING; post -программа CGI получит данные из формы через стандартный поток ввода;
enctype	Тип передаваемых данных данных. Значение по умолчанию - application/x-www-form-urlencoded.

Создание списка.

Список создается тэгом <select></select>

Атрибуты тэга <SELECT>:

name	имя списка, которое передается веб-серверу в паре с выбранной строкой
size	высота списка в строках. По умолчанию список раскрывающийся т.е. видна только одна строка.

Для записи строк в список используется тэг <OPTION>.
Строка, отмеченная параметром selected, будет выбрана в списке по умолчанию.

Пример:
Пример списка:
<select name="months" size="3">
<option>Январь
<option>Февраль
<option selected>Март
</SELECT>

ЯнварьФевральМарт

Пример раскрывающегося:
<select name="months">
<option>Январь
<option>Февраль
<option selected>Март
</SELECT>

ЯнварьФевральМарт

Поле для ввода многострочного текста.

Создается тэгом <textarea></textarea>

Атрибуты тэга <TEXTAREA>:

name	имя поля
rows	Число строк по вертикали.
cols	Число символов по горизонтали.

Пример:
Текст программы:
<textarea name="multytext" rows="4" cols="50">


Здесь
  введен
    многострочный
      текст.
 

Результат выполнения:
Здесь введен многострочный текст.

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

Создаются с помощью тэга <input></input>

Атрибуты тэга <INPUT>:

type	Тип элемента управления.
name	Имя элемента управления.
value	Начальное значение или состояние элемента управления.
checked	Установка начального значения переключателей.
size	Ширина текстового поля в символах. По умолчанию 20 символов.
maxlenght	Максимальное количество символов в текстовом поле.
align	Выравнивание текста, около формы.
src	URL графического изображения, если оно используется в элементе управления

Параметры атрибута <TYPE>:

text	однострочное поле для ввода текста.
password	аналогичен элементу управления text, но символы, вводимые в этот элемент управления, не отображаются на экране.
checkbox	Элемент управления переключатель.
radio	Элемент управления радиокнопка.
file	Элемент управления для выбора и передачи файлов.
button	Орган управления кнопка.
submit	Кнопка для пересылки данных из заполненной формы веб-серверу.
reset	Кнопка для сброса содержимого формы в начальное значение.
image	Замена кнопки submit графическим изображением.
hidden	Скрытое текстовое поле.

Примеры:
Текстовое поле:
<input name="Text_Exmpl" type="text" value="текстовое поле">

Поле ввода пароля:
<input name="Psw_Exmpl" type="password" value="password">

Переключатель:
<input name="ChkBox_Checked" type="checkbox" checked>

<input name="ChkBox_Unchecked" type="checkbox">

Группа радиокнопок:
<input name="radio_btn" type="radio" value="rb1">
<input name="radio_btn" type="radio" value="rb2" checked>
<input name="radio_btn" type="radio" value="rb3">

Отдельные радиокнопки:
<input name="radio_btn1" type="radio" value="rb1">
<input name="radio_btn2" type="radio" value="rb2" checked>
<input name="radio_btn3" type="radio" value="rb31">

Произвольная кнопка:
<input name="Btn" type="button" value="Кнопка">

Графическое изображение вместо кнопки:
<input name="ImgBtn" type="image" src="url" border="0">

При нажатии мышью на такую кнопку CGI программе будут переданы две переменные : name.x (где name - имя кнопки, а x - x- координата точки нажатия в пикселях), и name.y. Начало координат - левый верхний угол рисунка. Все значения атрибута VALUE игнорируются. Картинка задается тэгом < SRC> и по синтаксису совпадает с тэгом <IMG>.

<FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD="POST">
Отправить данный файл: <INPUT NAME="myfile" TYPE="file"> <P>
<INPUT TYPE="submit" VALUE="Отправить файл">
</FORM>

Создание работающих форм без написания CGI-обработчика.

HTML имеет механизм пересылки содержимого формы по электронной почте. Для этого в тэге <FORM>, укажем следующие значения атрибутов:
method="post", action="mailto:adress@domain.ru?subject=Message", enctype="text/plain".
В этом случае произойдет передача данных формы по электронному адресу "adress@domain.ru" в незакодированном "text/plain" виде. Заметьте, что параметром ?subject можно указать почтовой программе тему (Subject) сообщения

Пример работающей формы:

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

Письмо придет приблизительно такого содержания:
old=33
Where_You_Find_This_Site=из поисковой системы
To_Continue_Lessons=yes
js=yes

Еще один способ заставить форму работать - применить к ней обработку событий JavaScript. При нажатии на кнопку в ней возникает событие "OnClick", которое можно обработать написав функцию-обработчик.
Например, создадим простейшую форму, складывающую два числа по нажатию кнопки.
Создадим форму для ввода чисел:
<FORM name="calc">
<input name="val1" type="text" value="0" size="4">+
<input name="val2" type="text" value="0" size="4">
<input type="button" value="  +  " onclick="adding(val1, val2)">
<input name="is" type="text" value="0">
</FORM>

И напишем функцию, получающую аргументы из полей val1 и val2 и выводящую результат в поле is:
<script language="JavaScript"> function adding(val1, val2)
{
document.calc.is.value=eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value));
}
</script>

Теперь попробуйте сложить два числа используя эту форму.