Формы служат для обмена данными между клиентом и веб-сервером по протоколу CGI. Другими словами говоря, вы заполняете форму нажимаете кнопку, и ваши данные уходят на сервер в виде: [имя_переменной]=[значение_переменной].
CGI - программа на сервере обрабатывает эти данные и выполняет в зависимости от результата какие-либо действия. Это может быть обработка сообщения конференции, подписка на новости сайта, работа с базой данных посетителей сайта и т.д.
Возникает вопрос, а обязательно ли знать CGI-программирование для того, чтобы применять формы? Отвечу, что CGI знать желательно, но не обязательно. В конце этой статьи я продемонстрирую как без написания обработчика на сервере, заставить форму выполнять некоторые действия.
Форма задается тэгами <form></form> и состоит из управляющих элементов (текстовое поле, кнопка, список и т.д.).
| action="URL" | URL-адрес CGI-программы, выполняющей обработку данных. |
| method | Способ передачи данных веб-серверу. Может принимать значения:
|
| enctype | Тип передаваемых данных данных. Значение по умолчанию - application/x-www-form-urlencoded. |
Список создается тэгом <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>
| name | имя поля |
| rows | Число строк по вертикали. |
| cols | Число символов по горизонтали. |
Пример:
Текст программы:
<textarea name="multytext" rows="4" cols="50">
Здесь
введен
многострочный
текст.
<textarea>
Результат выполнения:
Создаются с помощью тэга <input></input>
| type | Тип элемента управления. |
| name | Имя элемента управления. |
| value | Начальное значение или состояние элемента управления. |
| checked | Установка начального значения переключателей. |
| size | Ширина текстового поля в символах. По умолчанию 20 символов. |
| maxlenght | Максимальное количество символов в текстовом поле. |
| align | Выравнивание текста, около формы. |
| src | URL графического изображения, если оно используется в элементе управления |
| 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>
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.
|