Скрытые поля формы
Скрытые поля позволяют хранить “невидимую” информацию в форме документа. Такие поля не отображаются браузером, но это вовсе не означает, что информация спрятана, любой может увидеть ее, вызвав опцию браузера “View Source”. Таким образом скрытые поля нельзя использовать в целях безопасности, а можно только в целях прозрачной передачи информации.
Приведу пример определения двух скрытых полей формы:
<form action=”/cgi-bin/sendmail.pl” method=”post”> … <input type=”hidden” name=”mail_to” value=”andrey@novikov.com”> <input type=”hidden” name=”subject” value=”Test letter”> … </form>
При посылке формы, данные, заключенные в скрытые поля, кодируются и посылаются серверу точно так же, как и данные других полей. Для CGI-сценария нет никакой разницы между скрытыми и видимыми полями.
Простейшим способом использования скрытых полей для сохранения контекста является запись данных формы в скрытые поля следующей формы. Приведу пример первой формы:
<form action=”/cgi-bin/firststep.pl” method=”post”> Введите Ваше имя: <input type=”text” name=”realname”> <br> Введите Ваш адрес: <input type=”text” name=”email”> <br> <input type=”submit” name=”Send” value=”Следующий шаг”> <input type=”reset” name=”Reset” value=”Очистить”> </form>
При посылке этой формы на сервер соответствующий сценарий динамически генерирует следующую форму, содержащую скрытые поля:
<form action=”/cgi-bin/secondstep.pl” method=”post”> <input type=”hidden” name=”realname” value=”Андрей Новиков”> <input type=”hidden” name=”email” value=”andrey@novikov.com”> Город проживания: <input type=”text” name=”city”> <br> <input type=”submit” name=”Send” value=”Следующий шаг”> <input type=”reset” name=”Reset” value=”Очистить”> </form>
И так до самого конца. Достоинством такого подхода является отсутствие необходимости временных файлов и “волшебных cookies”. С другой стороны недостатком такого подхода авляется снижение производительности при обработке форм с большим количеством полей.
Приведу пример скрипта, который генерирует форму, вставляя в нее все полученные параметры в ввиде скрытых полей:
#!/usr/local/bin/perl print “Content-type: text/html\n\n”;
read(STDIN, $buffer, $ENV{‘CONTENT_LENGTH’}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { local($name, $value) = split(/=/, $pair); $name =~ tr/+/ /; $name =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack(“C”, hex($1))/eg; $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack(“C”, hex($1))/eg; $value =~ s/<!–(.|\n)*–>//g; $FORM_DATA{$name} = $value; }
print ‘<form name=”newtext” action=”newtext.pl” method=”post”>’,”\n”; foreach $key (keys %FORM_DATA) { $value = $FORM_DATA{$key}; print “<input type=hidden name=\”$name\” value=\”$value\”>\n”; } print <<END; Можете добавить мысль:<br> <textarea name=”text” rows=5 cols=50></textarea><br> <input type=”submit” name=”post” value=”Добавить”> <input type=”reset” name=”escape” value=”Очистить”> </form> END
Того же результата можно достичь несколько другим способом. При этом нет необходимости генерировать все документы, содержащие форму, динамически. Достаточно создать один сценарий, который будет пропускать сквозь себя документ, вставляя в него соответствующие скрытые поля. В этом случае первая форма будет выглядеть так:
<form action=”/cgi-bin/shopping.pl/firstspep.html” method=”post”> Введите Ваше имя: <input type=”text” name=”realname”> <br> Введите Ваш адрес: <input type=”text” name=”email”> <br> <input type=”submit” name=”Send” value=”Следующий шаг”> <input type=”reset” name=”Reset” value=”Очистить”> </form>
Обратите внимание на то, что в этом примере скрипту передается параметр PATH_INFO, содержащий имя следующего отображаемого документа с формой. Этот документ должен содержать форму, в которую сценарием shopping.pl будут добавлены все скрытые поля. Вот примерный текст такого сценария:
#!/usr/local/bin/perl print “Content-type: text/html\n\n”;
read(STDIN, $buffer, $ENV{‘CONTENT_LENGTH’}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { local($name, $value) = split(/=/, $pair); $name =~ tr/+/ /; $name =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack(“C”, hex($1))/eg; $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack(“C”, hex($1))/eg; $value =~ s/<!–(.|\n)*–>//g; $FORM_DATA{$name} = $value; }
$form_file = $ENV{‘PATH_INFO’}; $full_path = “/usr/local/etc/httpd/htdocs” . $form_file;
open(FILE, “<” . $full_path); while (<FILE>) { if (/<\s*form\s*.*>/i) { print; foreach $key (keys %FORM_DATA) { $value = $FORM_DATA{$key}; print “<input type=hidden name=\”$name\” value=\”$value\”>\n”; } } else { print; } } close(FILE);
Использование скрытых полей является наболее простым и интуитивно понятным механизмом сохранения контекста. Он опирается на общепринятые стандарты и требует минимум затрат при реализации.
Кнопки
Кнопка — это элемент интерфейса, на который нужно нажимать. Создается следующим образом.
<input type="button" параметры>
Параметры кнопки перечислены в табл. 1.
|
Табл. 1. Параметры кнопки |
|
|
Параметр |
Описание |
|
name |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. Параметр name может быть опущен, в этом случае значение кнопки не передается на сервер. |
|
value |
Надпись на кнопке, а также ее значение. |
Использование параметров и создание обычных кнопок показано в примере 1.
Пример 1. Создание кнопки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <form action="/cgi-bin/handler.cgi"> <p align="center"><input type="button" name="press" value=" Нажми меня нежно "> </form> </body> </html>
В надписи на кнопке можно ставить пробелы в любом количестве.
Кнопка SUBMIT
Когда пользователь нажимает на эту кнопку, данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега <FORM>.
<input type="submit" параметры>
Параметры те же, что и у простых кнопок (пример 2).
Пример 2. Кнопка Submit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <form action="/cgi-bin/handler.cgi"> <p align="center"><input type="submit"> </form> </body> </html>
Вид кнопки показан ниже.
Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, автоматически появится надпись Подача запроса или Submit (для IE) или Submit Query (для Netscape).
Кнопка RESET
При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение.
<input type="reset" параметры>
Параметры совпадают с параметрами простых кнопок (пример 3).
Пример 3. Кнопка Reset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <form action="/cgi-bin/handler.cgi"> <input type="text" size="20"> <input type="reset"> </form> </body> </html>
Вид кнопки Reset и принцип ее действия показан ниже.
Начало формы
Конец формы
Значение кнопки Reset никогда не пересылается на сервер.
Универсальная кнопка
Cоздадим кнопку, которая будет расширяться и сужаться в зависимости от количества содержащегося в ней текста, её еще называют «резиновой».
Вам больше не придётся задавать параметры отдельно для каждой кнопки, содержащей разное количество текста! Теперь Вы сможете создать единый стиль для всех кнопок, и при этом имена для кнопок задавать самой разной длинны!!!
Наша кнопка будет автоматически растягиваться по горизонтали и вертикали, для вмещения любого количества текста любого объёма или текста, разделённого на некоторое количество строк. Так же мы сделаем эту кнопку ссылкой на какую-то страницу.
Приступим.
В нашем файле index.html пропишем следующий код:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css"><!--Подключаем таблицу стилей-->
</head>
<body>
<input class="button" type="button" value="Кнопка" href="путь"><!--Как и в предыдущем уроке задаём класс, тип и добавим ссылку на страницу, указав к ней путь -->
</body>
</html>
Сохраняем наш файл и переходим к style.css. В нём пропишем такой код:
.button {
float: left; /*Задаём плавающий блок, который будет прижиматься к левому краю*/
color: #003300; /*указываем цвет текста до наведения мышки на кнопку */
background: #CCFF33;/* задаём цвет фона для кнопки*/
font: 1.2em/1.0 Georgia,serif;/*задаём размер и шрифт текста*/
text-decoration: none;/*убираем подчеркивания у ссылок*/
/*задаём толщину и цвет границ кнопки*/
border-left: solid 1px #c3f83a;
border-top: solid 1px #c3f83a;
border-right: solid 1px #82a528;
border-bottom: solid 1px #58701b;
-moz-border-radius: 10px; /*устанавливаем радиус скругления углов кнопки*/
border-radius: 10px;/*скругляем фон*/
}
/*задаём цвет текста при*/
.button:hover,/*при наведении курсора на неактивный элемент*/
.button:focus,/*наведении курсора*/
.button:active { color: red; /* нажатии мышки на кнопку*/
border: 4px solid #00FF00; /* задаём рамку*/
}
Сохраняем наш файл и открываем в браузере index.html. Смотрим что у нас получилось!
Наша кнопка теперь имеет такой вид:
А при наведении на нё курсора и нажатии кнопки такой:
Впечатляет? Теперь давайте проверим насколько резиновая наша кнопка! Для этого файл style.css не изменяем, а в файле index.html увеличим название нашей кнопки:
<html>
<head>
<title>JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input class="button" type="button" value="Смотрите! Наша кнопка резиновая!!!" href="путь">
</body>
</html>
Сохраним файл и откроем его в браузере. Что у нас получилось?
Не активная кнопка теперь имеет такой вид:
А при наведении курсора или нажатии кнопки такой:
Обратите внимание, что текст полностью влился в кнопку как там и был! И это притом, что параметры стиля мы не изменили!
Но что делать в том случае, если мы хотим в кнопку поместить надпись, состоящую из двух строчек?
Опять-таки файл style.css мы не изменяем, ведь кнопка у нас резиновая, не так ли?
Изменения мы внесём в файл index.html. Здесь, для того, чтобы задать две строчки текста в одной кнопке мы будем использовать div-ы. Изменим наш файл таким образом:
<html>
<head>
<title>JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="button" type="button" href="путь"><!--Как и в предыдущем уроке задаём класс, тип и добавим ссылку на страницу, указав к ней путь -->
<center><h3>Двухстрочная</h3>
<p>кнопка </p></center>
</div>
</body>
</html>
Сохраним наши изменения и откроем файл в браузере. Что мы видим? Кнопка теперь имеет такой вид:
Рисунок 4
А при наведении на неё курсора мышки или нажатии такой:
Рисунок 5
Мы снова не изменяли style.css, что даёт Вам в очередной раз убедиться в том, что наша кнопка действительно универсальная!
Теперь проверим её на «резинистость». Добавим немного текста в содержимое кнопки:
<html>
<head>
<title>JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="button" type="button" href="путь"><!--Как и в предыдущем уроке задаём класс, тип и добавим ссылку на страницу, указав к ней путь -->
<center><h3>Двухстрочная</h3>
<p>кнопка тоже резиновая!!!!!</p></center>
</div>
</body>
</html>
Сохраните файл и откройте его в браузере. Вот что мы увидим:
Рисунок 6
А при наведении крсора такой:
Рисунок 7
Итак, мы создали универсальную кнопку, которую теперь можем наполнять любымтекстом не изменяя style.css!
На этом наш урок закончен. Всем удачи! До встречи на следующих уроках!
Группы элементов формы
Мы будем создавать форму посложнее - форму опроса. Допустим, вы ведущий популярного сайта о кино. Ваш спонсор предлагает вам разместить у вас на сайте опрос, чтобы выяснить, какие фильмы и актеров предпочитают люди, которые любят смотреть кино. В качестве приза - одному из заполнивших анкету достанется путешествие в выбранную им страну. Вот такую анкету вы предложите заполнить вашим посетителям:
|
|
|
|
Начало формы Ф.И.О.
Конец формы |
Вы: Мужчина
Женщина
Какие
фильмы вы любите
смотреть?
фантастику
боевики
приключенческие
мелодрамы
документальные
Из
этих актеров вам больше нравится:
В
какую страну вы хотели бы поехать?
Ваш
е-майл:
В этой анкете много для вас незнакомых элементов формы, но есть и уже знакомые вам. Давайте для начала создадим их, а затем я познакомлю вас с остальными. Что мы уже знаем? Мы знаем, как форма вводится в документ:
|
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script"> </form> |
Name - обязательный элемент, имя формы. Method - как будет обрабатываться наша форма. Action - путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса. Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):
|
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script"> <b>Ф.И.О.</b><br> <input type=text name="fio" size=37 maxlength=100><br><br> <b>Ваш е-майл:</b><br> <input type=text name="email" size=37 maxlength=80 value="@"> </form> |
Type=text - мы указали, что имеем дело с полем для ввода текста. Name - имена элементов. Size - размер полей для ввода текста. Maxlength - максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля). Пока что у нас с вами получилась такая форма:
|
|
|
|
Начало формы Ф.И.О.
Конец формы |
Ваш
е-майл:
Как видите, нам еще далеко до конечного результата. Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:
|
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script"> <b>Ф.И.О.</b><br> <input type=text name="fio" size=37 maxlength=100><br><br> <b>Ваш е-майл:</b><br> <input type=text name="email" size=37 maxlength=80 value="@"><br><br> <input type=submit value="Отправить анкету"><input type=reset value="Отмена"> </form> |
Type - тип элемента, мы указали, что это кнопка отправки и кнопка сброса. Value - надписи на кнопках.
|
|
|
|
Начало формы Ф.И.О.
Конец формы |
Ваш
е-майл:
Больше знакомых нам элементов в данной форме нет. Поэтому приятный процесс вспоминания проденного ранее закончен, и начинается обучение. Начнем мы с "переключателей":
|
|
|
|
Начало формы Вы: Мужчина Конец формы |
Женщина
Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ - ИЛИ. Или он - мужчина, или она - женщина, и то и другое выбрать не получится. А теперь разберем код, который мы должны ввести в нашу форму:
|
|
|
|
<b>Вы:</b> Мужчина<input type=radio name="sex" value="man"> Женщина<input type=radio name="sex" value="woman"> <br><br> |
Итак, "переключатели" вводятся в нашу форму при помощи знакомого вам тега <INPUT>, type для которого мы указываем radio (type=radio). Name - обратите внимание, что для "переключателей" имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) - должно быть обязательно разным. Теперь поговорим о следующем незнакомом нам элементе формы, о "флажках":
|
|
|
|
Начало формы Какие
фильмы вы любите
смотреть?
Конец формы |
фантастику
боевики
приключенческие
мелодрамы
документальные
Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ). Но давайте посмотрим код для этого элемента формы и разберемся в нем:
|
|
|
|
<b>Какие фильмы вы любите смотреть?</b><br> <input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes"> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br> |
Итак, как мы видим, во всем виноват знакомый нам тег <INPUT>, только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name - обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) - для всех "флажков" одинаковое. Если вы хотите, чтобы какой-то флажок или переключатель был выбран по умолчанию, то мы можем ввести в наш код для этого "флажка" или "переключателя" атрибут checked:
|
|
|
|
<b>Какие фильмы вы любите смотреть?</b><br> <input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes" checked> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br> |
Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":
|
|
|
|
Начало формы Какие
фильмы вы любите
смотреть?
Конец формы |
фантастику
боевики
приключенческие
мелодрамы
документальные
Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое. Когда мы разобрались с "переключателями" и "флажками", перейдем к следующему незнакомому нам элементу в нашей форме:
|
|
|
|
Начало формы В
какую страну вы хотели бы поехать?
Конец формы |
Знакомьтесь, господа, это - выпадающий список. Этот весьма удобный элемент можно использовать не только в опросах для выбора чего-либо, очень часто его используют в качестве дополнительного меню на сайтах для быстрого перехода в какой-либо раздел-подраздел сайта.
|
|
|
|
Начало формы <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option value="france">Франция <option value="USA">США <option value="england">Англия <option value="italy">Италия <option value="australia">Австралия </select> <br><br> Конец формы |
Итак, выпадающий список вводится при помощи тега <SELECT></SELECT>. Каждый пункт выпадающего списка вводится при помощи тега <OPTION>. Name - мы задаем только для тега <SELECT>, и оно относится ко всему списку. Value - мы задаем для каждого тега <OPTION> (пункта списка). По умолчанию первый пункт в списке - так и отображается, первым, выбранным. Однако, мы можем при помощи атрибута selected для тега <OPTION> выбрать другой пункт по умолчанию:
|
|
|
|
Начало формы <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option value="france">Франция <option value="USA">США <option value="england">Англия <option value="italy" selected>Италия <option value="australia">Австралия </select> <br><br> Конец формы |
Получим следующее:
|
|
|
|
Начало формы В
какую страну вы хотели бы поехать?
Конец формы |
Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега <OPTGROUP></OPTGROUP>:
|
|
|
|
Начало формы <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <OPTGROUP label="Европа"> <option value="italy">Италия <option value="france">Франция </OPTGROUP> <OPTGROUP label="Другие"> <option value="USA">США <option value="england">Англия <option value="australia">Австралия </OPTGROUP> </select> <br><br> Конец формы |
Результат (нажмите на список):
|
|
|
|
Начало формы В
какую страну вы хотели бы поехать?
Конец формы |
Вот и все премудрости с выпадающем списком. А значит нам в этом уроке осталось разобрать последний незнакомый нам элемент нашей формы:
|
|
|
|
Начало формы Из
этих актеров вам больше нравится:
Конец формы |
Это прокручивающийся список. Создается он также, как и выпадающий, код абсолютно идентичный, только добавляется один незаметный, но важный атрибут, который делает выпадающий список прокручивающимся:
|
|
|
|
<b>Из этих актеров вам больше нравится:</b><br> <select name="actor"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br> |
Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега <SELECT>, то выпадающий список превратится в прокручивающийся:
|
|
|
|
<b>Из этих актеров вам больше нравится:</b><br> <select name="actor" size="4"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br> |
Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 - в нашем списке четыре видимых строки.