Формы служат для обмена данными между клиентом и веб-сервером по протоколу

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">


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

<textarea>

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

Создаются с помощью тэга <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>.

Передача файлов:
Внимание! Поскольку данная возможность требует поддержки получения

айлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал

получение файлов! Например:

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

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">

<input type="submit" value="Проголосовать">
<input type="reset" value="Обнулить">
</FORM>

Письмо придет приблизительно такого содержания:
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>

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

Урок6.Графика и звук в документах HTML.