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