Урок 11. HTML формы, функция

Урок 11. HTML формы, функция ParseForm, метод POST

Начнем с того, о чем я уже говорил, а именно о том, что методом GET можно передавать несколько параметров, а не только один. Если знак "?" отделяет параметры от URL скрипта, то параметры отделяются друг от друга знаком "&" (коммерческое AND). Чтобы получить эти параметры "на руки" внутри скрипта в виде обычных переменных, придумана функция ParseForm (англ. Разделять Форму). Пусть её вид Вас не пугает, скоро Вы научитесь писать функции подлеще...

&parse_form; sub parse_form { if ($ENV{'REQUEST_METHOD'} eq "POST") {$mode = 0} if ($ENV{'REQUEST_METHOD'} eq "GET") {$mode = 1} if ($mode == 0) {read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'})} if ($mode == 1) {$buffer = $ENV{'QUERY_STRING'}} @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; } }

Я не буду пока вдаваться в подробности работы этой функции, скажу лишь чем она для нас интересна. Не зависимо от метода передачи данных, GET или POST (поговорим об этом ниже), эта функция выдает данные в виде переменных вида $FORM{'значение'}. В связи с этим изменились и условия записи данных в строке URL. Теперь их следует писать в таком виде:
"http://.../script.pl?параметр1=значение1&параметр2=значение2".

Для экономии места, во всех следующих программах я не буду полностью писать функцию, а буду лишь ссылаться на неё. Вы же должны писать всё полностью.

Следующая программа демонстрирует работу функции ParseForm.

#!/usr/bin/perl #programm 10 print "Content-Type: text/html\n\n";

&parse_form;

print "A + B = ",$FORM{'a'}+$FORM{'b'},"<br>"; print "A - B = ",$FORM{'a'}-$FORM{'b'},"<br>"; print "A * B = ",$FORM{'a'}*$FORM{'b'},"<br>"; print "A<sup>B</sup> = ",$FORM{'a'}**$FORM{'b'};

Эта программа выводит сумму, разность, произведение и результат возведения одного числа в другое. Вызывать программу следует таким образом:

"http://.../script.pl?a=значение1&b=значение2", к примеру

"http://.../script.pl?a=256&b=2"

Про такую запись говорят: "У программы 2 параметра вызова - a и b. a=256, b=2".

Формы

Чтобы было удобнее передавать данные скрипту, в HTML введены формы. С формами Вы уже сталкивались, когда заполняли строку поиска в поисковой системе, или при общении в ЧАТе.

И так, что же представляет из себя форма? Форма - это совокупность специальных HTML тэгов, ограниченных тегами <FORM> и </FORM>.

Форма может содержать в себе помимо полей формы другие HTML теги (к примеру <table>).

Чтобы можно было передать скрипту данные, введенные в форме, необходимо наличие кнопки "submit".

При нажатии на эту кнопку отсылаются данные только той формы, в которой эта кнопка находится.
Передать данные из разных форм средствами HTML нельзя.

Форма может содержать неограниченное кол-во элементов или не содержать их вовсе.

Параметры формы

Тэг <FORM> имеет нескопараметроветорв:

action	адрес скрипта, которому следует передать данные.
method	метод, которым передается форма (GET или POST)
target	Это поле позволяет указать окно/фрейм из которого будет делаться запрос. По умолчанию запрашивает текущее окно/фрейм

Таким образом форму можно записать так:

<form method="get" action="/cgi-bin/script.pl"></form>

Кнопки

Просто кнопки, как таковые, для CGI программиста бесполезны, т.к. для их программирования необходимо знать языки, работающие на локальном браузере (JavaScript, VBScript и др.). Больший же интерес представляют заранее запрограммированные кнопки "Submit" и "Reset". Первая, как Вы уже знаете, отправляет данные скрипту, вторая - обнуляет все эл-ты формы.

Для создания многих элементов формы, в том числе и кнопок, служит тэг <input>. Самым главным параметром этого тега является "type", т.к. в нем задается тип эл-та формы. Чтобы создать кнопку, значением этого параметра должно быть "button". Вот код самой простой кнопки: <input type="button">. Если Вы передадите этот код браузеру, то увидете что этой кнопкой практически нельзя пользоваться, т.к. она очень маленькая и не имеет надписи. Надпись можно задать в параметре "value". Еще у кнопок есть атрибут "disabled", который превращает эту кнопку в декоративную:

<input type="button" value="button" disabled>

Кнопка "Submit" создается такми же образом, только значение параметра "type" должно быть "submit". Анологично с кнопкой "Reset":

<input type="submit">
<input type="reset">

Простые поля для ввода

Простое поле для ввода создается тегом <input>, но в отличае от кнопок, значение атрибута "type" должно быть "text". У простого поле для ввода есть дополнительные параметры и атрибуты:

name	идентификатор данного поля
size	длина поля в символах
title	текст всплывающей подсказки
value	значение поля по умолчанию
maxlength	максимально возможное количество вводимых символов
disabled	этот атрибут не дает изменить значение по умолчанию

<

Как это работает: при отправке формы, значение каждого поля будет являться значением параметра, а имя поля - именем параметра. Именно поэтому необходимо каждому полю присваивать какое-нибудь имя.

<input type="text" size="15" title="обычное поле" maxlength="20" value="some text here" >

Поле для ввода пароля

Для этих полей справедливы вышеизложенные утверждения. Создается это поле тегом <input> со значением "pa" пара" параметра "type".

<input type="password" value="default" >

Скрытое поле

Скрытое поле не отображаемое на экране. Но оно имеет имя и значение и следовательно передается в форму. Служит для того (и очень часто программисты его применяют) чтоб передавать скрипту какую нибудь информацию.Например,если ваш скрипт обрабатывает несколько форм разных типов, то в скрытом поле каждой формы можно указать с какой формой конкретно вы имеете дело. Так как это ваша внутренняя кухня то нечего пользователю мозолить глаза этой информацией.

<input type="hidden" value="1" name="okay">

Переключатель

Переключатель должен иметь имя и значение. Имя задается в параметре "Name", значение в "value" (в отличие от кнопок, где value - надпись на кнопке). В том случае, если переключатель выбран, передается его имя и значение. Если не выбран - ничего не передается. Если необходимо чтобы переключатель был по умолчанию отмечен, он должен иметь атрибут "checked".

<input type="checkbox" checked>

Радио-кнопка

В отличие от checkbox, может быть несколько радио кнопок с одинаковым параметром name ,но с разными value, из них передается только та, что выбрана. Одна из них может быть изначально выбрана по умолчанию.

<input type="radio" value="v1" name="r1"><input type="radio" checked value="v2" name="r1">

Список

Задает список, позволяющий выбрать одну (или несколько) опций из списка. Его значение всегда передается, т.к. всегда хотя бы одно выбрано.

Список создается тегом <select>. Его синтаксис таков:

<SELECT name="s1">

<OPTION value="value1">Опция 1

<OPTION value="value2">Опция 2

.....

<OPTION value="valueN">Опция N

</SELECT>

У тега <SELECT> есть дополнительные параматрибутытребу ты:

name	имя списка
size	кол-во отображаемых пунктов
multiple	этот атрибут позволяет выделять несколько пунктов списка
selected	этот атрибут тега <option> указывает выбранный по умолчанию пункт

один два три

Область многострочного редактирования

Её еще называют областью потенциально большого объема текста. Синтаксис её таков:

<TEXTAREA>

Значение по умолчанию

</TEXTAREA>

У этого тега есть дополнительные параметры и атрибуты:

name	имя области
rows	кол-во строк области в символах
cols	ширина области в символах

<textarea cols="20" rows="5">

А роза упала на лапу Азора

</textarea>

А роза упала на лапу Азора

Метод POST

8-/ наконец-то закончили с формами, осталось рассказать только о методе POST.

Суть этого метода заключается в передаче данных в теле HTTP запроса, а не в строке URL, как при методе GET. Это снимает ограничения на длину передаваемых данных. Напомню, что длина URL не должна превышать 2048 символов. Поэтому целесообразно использовать этот метод, если вы включили в форму областью потенциально большого объема текста.

* * * *

Модернизируем программу 10 с учетом полученных знаний так, чтобы вводить данные не вручную в поле URL, а в текстовые поля.

#!/usr/bin/perl #programm 11 print "Content-Type: text/html\n\n";

&parse_form;

print "<form method=\"get\" action=\"/cgi-bin/script.pl\"><br>\n"; print "A = <input name=\"a\" size=3 value=\"$FORM{a}\"><br>\n"; print "B = <input name=\"b\" size=3 value=\"$FORM{b}\">\n"; print "<input type=\"hidden\" name=\"match\" value=1>"; print "<input type=\"submit\" value=\"Calc\"></form>\n";

if ($FORM{'match'} == 1){ print "A + B = ",$FORM{'a'}+$FORM{'b'},"<br>"; print "A - B = ",$FORM{'a'}-$FORM{'b'},"<br>"; print "A * B = ",$FORM{'a'}*$FORM{'b'},"<br>"; print "A<sup>B</sup> = ",$FORM{'a'}**$FORM{'b'};}

* * * *

Напишите программу, которая запрашивает кол-во текстовых полей и выводит их одно под другим. Напротив каждого поля должна располагаться "галочка". По нажатию на "submit", форма передается скрпту, который выводит значение только тех полей, напортив которых "галочка" была отмечена. Ограничите максимальное количество полей значением 10, а минимальное - тремя. Используйте метод Post при передаче формы.

[Содержание] [Вступление] [необходимое для начала изучения] [урок 1] [урок 2] [урок 3] [урок 4] [урок 5] [урок 6] [урок 7] [урок 8] [урок 9] [урок 10] [урок 11] [урок 12] [урок 13] [урок 14] [урок 15] [урок 16] [урок 17] [урок 18] [урок 19] [урок 20] [урок 21] [урок 22] [урок 23] [урок 24] [урок 25] [урок 26] [урок 27] [урок 28] [правила хорошего тона] [приложение A] [приложение Б] [приложение В] [заключение] [благодарности]

Copyright (c) ClericICN, 2002

Содержание раздела