Урок 11. HTML формы, функция ParseForm, метод POST
Начнем с того, о чем я уже говорил, а именно о том, что методом GET можно передавать несколько параметров, а не только один. Если знак "?" отделяет параметры от URL скрипта, то параметры отделяются друг от друга знаком "&" (коммерческое AND). Чтобы получить эти параметры "на руки" внутри скрипта в виде обычных переменных, придумана функция ParseForm (англ. Разделять Форму). Пусть её вид Вас не пугает, скоро Вы научитесь писать функции подлеще...
Я не буду пока вдаваться в подробности работы этой функции, скажу лишь чем она для нас интересна. Не зависимо от метода передачи данных, 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> имеет нескопараметроветорв:
Таким образом форму можно записать так:
<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, из них передается только та, что выбрана. Одна из них может быть изначально выбрана по умолчанию.
Задает список, позволяющий выбрать одну (или несколько) опций из списка.
Его значение всегда передается, т.к. всегда хотя бы одно выбрано.
Список создается тегом <select>. Его синтаксис таков:
Её еще называют областью потенциально большого объема текста. Синтаксис её таков:
<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 при передаче формы.