Формы служат для обмена данными между клиентом и веб-сервером по протоколу 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, будет выбрана в списке по умолчанию.
Графическое изображение вместо кнопки:
<input name="ImgBtn" type="image" src="url" border="0">
При нажатии мышью на такую кнопку CGI программе будут переданы две переменные : name.x (где name - имя кнопки, а x - x- координата точки нажатия в пикселях), и name.y. Начало координат - левый верхний угол рисунка. Все значения атрибута VALUE игнорируются. Картинка задается тэгом < SRC> и по синтаксису совпадает с тэгом <IMG>.
Передача файлов:
Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!
Например:
Создание работающих форм без написания CGI-обработчика.
HTML имеет механизм пересылки содержимого формы по электронной почте. Для этого в тэге <FORM>, укажем следующие значения атрибутов: method="post", action="mailto:adress@domain.ru?subject=Message", enctype="text/plain". В этом случае произойдет передача данных формы по электронному адресу "adress@domain.ru" в незакодированном "text/plain" виде. Заметьте, что параметром ?subject можно указать почтовой программе тему (Subject) сообщения
Пример работающей формы:
Следующая форма отправит содержимое формы на мой eMail:
Чтобы не захламлять форму, я не стал указывать в тексте тэги таблицы оставив лишь тэги, относящиеся к форме.
<form name="sendtome" method="post" action="mailto:valery@ropnet.ru?subject=Message"
enctype="text/plain">
Ваш возраст <input style="width:100px;border:2px solid red;"name="old" type="text">
Откуда Вы узнали про этот сайт <select name="Where_You_Find_This_Site" cols="30"> <option>из поисковой системы <option>нашел по ссылкам <option>случайно </select>
Следует ли дальше продолжать уроки HTML?
да <input name="To_Continue_Lessons" type="radio" value="yes" checked>
нет <input name="question" type="radio" value="no">
не знаю <input name="question" type="radio" value="hz">
Какие разделы Вы хотели бы видеть еще?
JavaScript <input name="js" type="checkbox" value="yes">
MySQL <input name="MySQL" type="checkbox" value="yes">
Perl <input name="perl" type="checkbox" value="yes">
VBScript <input name="vbs" type="checkbox">
DHTML <input name="dhtml" type="checkbox" value="yes">
Никакие <input name="no" type="checkbox" value="yes">
Письмо придет приблизительно такого содержания:
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>
Теперь попробуйте сложить два числа используя эту форму.
