|
Формы представляют собой интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может ответить на вопросы, заполнить ответы для последующей обработки результатов, либо для внесения информации в базу данных. Содержимое формы может передаваться сценарию (например, PHP-функции), в котором должно быть определено, что делать с полученной информацией (например: отправить полученную информацию по электронной почте). Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание сценария для обработки результатов. Форма создается при помощи элементов управления.
Синтаксис:
<FORM METHOD="get|post" ACTION="URL">
Элементы формы, другие элементы HTML, текст
</FORM>
Атрибуты:
METHOD - Метод посылки сообщения с данными из формы. В зависимости от
используемого метода вы можете посылать результаты ввода данных в форму двумя путями:
GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа
(CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.
POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа
получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в
стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам
необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.
ACTION - описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму. Допустимо использовать запись mаilto:URL, благодаря которой форма будет послана по электронной почте. Если атрибут action все-таки не указан, то содержимое формы будет отослано на URL-адрес, с которого загружалась данная Web-страница.
ENCTYPE - указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В html определены два возможных значения для атрибута enctype: application/x-www-form-urlencoded (используется по умолчанию), и multipart/form-data.
ID, CLASS - идентификаторы в пределах документа
TITLE - заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента);
STYLE - встроенная информация о стиле
Форма может содержать текст и разметку (параграфы, списки и т.п.) в дополнение к элементам управления формы.
В следующем примере показана форма, обрабатываемая программой "function.php" после отправки.
Форма могла бы быть отправлена программе методом "post", если бы в примере мы предусмотрели кнопку submit.
| Код | Отображение |
|---|
<FORM action="http://mysite.ru/function.php" method="post">
Введите ваше имя: <INPUT type=text name=naim value="Петя Иванов">
<br>
<?php
$imj="Петя Иванов";
echo "Введите ваше имя: <INPUT type=text name=naim value=".$imj."><br>";
$imj2="Петя Иванов";
echo "Введите ваше имя: <INPUT type=text name=naim2 value=".str_replace(" "," ",$imj2).">";
?>
</FORM>
|
При необходимости обратной замены неразрывного пробела на обычный в обработчике необходимо предусмотреть команду
<?php
$naim2=str_replace(chr(160)," ",$naim2);
?>
См. Замечание к использованию элемента управления INPUT.
|
Элементы управления
| Элемент | Описание |
|---|
| INPUT |
Используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию данные в виде пар имя:значение. Элемент имеет атрибуты:
CHECKED - означает, что CHECKBOX или RADIO будет выбран.
MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества
допустимых символов броузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с
атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно
бесконечности.
NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы
сможете получить данные, помещенные пользователем в это поле.
SIZE - определяет визуальный размер поля ввода на экране в символах.
SRC - URL,. указывающий на картинку (используется совместно с атрибутом IMAGE).
TYPE - определяет тип поля ввода.
CHECKBOX - Используется для простых логических
(BOOLEAN) значений. Значение, ассоциированное с именем данного
поля, которое будет передаваться в вызываемую CGI-программу,
может принимать значение ON или OFF.
HIDDEN - Поля данного типа не отображаются броузером
и не дают пользователю изменять присвоенные данному полю по
умолчанию значение. Это поле используетс для передачи в
CGI-программу статической информации, как то ID прользователя,
пароля или другой информации.
IMAGE - Данный тип поля ввода позволяет вам связывать графический
рисунок с именем поля. При нажатии мышью на какую-либо часть
рисунка будет немедленно вызвана ассоциированная форме
CGI-программа. Значения, присвоенные переменной NAME будут
выглядеть так - создается две новых переменных: первая имеет
имя, обозначенное в поле NAME с добавлением .x в конце имени.
В эту переменную будет помещена X-координата точки в пикселах
( считая началом координат левый верхний угол рисунка), на
которую указывал курсор мыши в момент нажатия, а переменная с
именем, содержащимся в NAME и добавленным .y, будет содержать
Y-координату. Все значения атрибута VALUE игнорируются. Само
описание картинки осуществляется через атрибут SRC и по
синтаксису совпадает с тэгом <IMG>.
Примечание: Хотя в командной строке (видно при использовании метода GET) к имени переменных добавляется ".x" и ".y", в обработчике PHP нужно отлавливать переменные с координатами с добавлением "_x" и "_y" соответственно.
PASSWORD - То же самое, что и атрибут TEXT, но вводимое пользователем
значение не отображается броузером на экране.
RADIO - Данный атрибут позволяет вводить одно значение из
нескольких альтернатив. Для создания набора альтернатив вам
необходимо создать несколько полей ввода с атрибутом
TYPE="RADIO" с разными значениями атрибута VALUE, но с
одинаковыми значениями атрибута NAME. В CGI-программу будет
передано значение типа NAME=VALUE, причем VALUE примет
значение атрибута VALUE того поля ввода, которое в данный
момент будет выбрано (будет активным). При выборе одного из
полей ввода типа RADIO все остальные поля данного типа с тем
же именем (атрибут NAME) автоматически станут невыбранными на
экране.
RESET - Данный тип обозначает кнопку, при нажатии которой все поля
формы примут значения, описанные для них по умолчанию.
SUBMIT - Данный тип обозначает кнопку, при нажатии которой будет
вызвана CGI-программа (или URL), описанная в заголовке формы.
Атрибут VALUE может содержать строку, которая будет высвечена
на кнопке.
TEXT - Данный тип поля ввода описывает однострочное поле ввода.
Используйте атрибуты MAXLENGTH и SIZE для определения
максимальной длинны вводимого значения в символах и размера
отображаемого поля ввода на экране (по умолчанию принимается
20 символов).
FILE - Создает управляющий элемент выбор файла.
ACCESSKEY - Задает кнопку, при нажатии которой происходит обработка поля.
ID - Задает имя для ссылки.
DISABLED - Отключает возможность изменять содержимое поля или положение кнопки.
TABINDEX - Определяет порядок обхода полей формы в соответствии с нумерацией поля (например: tabidex=2).
VALUE - присваивает полю значение по умолчанию или
значение, которое будет выбрано при использовании типа RADIO (для
типа RADIO данный атрибут обязателен)
Замечание: При предварительном внесении в поле INPUT type='text' средствами PHP для корректировки содержания переменной, содержащей текст, в котором имеются пробелы, в поле ввода остается только первое слово (до пробела) и нужно позаботиться о замене символов пробела на (неразрывный пробел) и, при необходимости, обратно. См. пример выше.
|
| TEXTAREA |
При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:
NAME | ROWS | COLS.
В отличие от INPUT type='text' корректно работает с символами пробела и переноса строки.
|
| SELECT |
Элемент - контейнер <SELECT></SELECT> может принимать форму раскрывающегося списка или меню элементов.
Имеет вложенный тэг <OPTION> и атрибуты:
name - Задаёт имя.
size - Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
multiple - Задаёт возможность одновременного выбора нескольких значений.
Элемент же <OPTION></OPTION> задает возможные варианты выбора меню <SELECT>
Синтаксис: <OPTION value="n" selected>значение</OPTION>
имеет атрибуты:
selected. Задаёт изначально выбранное слово.
value. Задаёт значение выбранного слова для сценария.
|
| FIELDSET |
Элемент <FIELDSET> позволяет логически группировать элементы формы.
Синтаксис: <FIELDSET> имя</FIELDSET>
| | LEGEND |
Элемент <LEGEND> позволяет давать наименования логическим группам элементов формы.
Синтаксис: <LEGEND> имя</LEGEND>
|
Примеры
| Код | Отображение |
|---|
<FORM action="htm_form.php" method="post">
Однострочный текст со значением по умолчанию:<br>
<INPUT type="text" name="naim" value="Петя Иванов"><br>
Поле для ввода пароля:<br>
<INPUT type="password" id="imj" name="pass" value="555"><br>
Передача скрытой переменной:<br>
<INPUT type="hidden" name="hidd" value="secret"><br>
Поле checkbox: <INPUT type="checkbox" name="odin" value="yes">
<INPUT type="checkbox" name="dva" value="yes" checked><br>
Переключатель: Visa <INPUT type="radio" name="payment_type" value="visa">
Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
American Express <INPUT type="radio" name="payment_type" value="AmEx" checked><br>
Вы можете прислать файл: <INPUT type="file"><br>
Изменить значение - нажми клавишу {Alt+q} на латинице: <INPUT type="checkbox" name="tri" accesskey="q"><br>
Поле шириной 5 знаков со значением до 3 знаков <INPUT type="text" name="naim1" MAXLENGTH="3" SIZE="5"><br>
Без возможности корректировки <INPUT type="text" name="naim2" disabled value="Петя Иванов"><br>
Введи текст <TEXTAREA name="ключевое слово" rows=3 cols=30>
Область для ввода текста </TEXTAREA><br>
Выбери из списка:
<SELECT multiple>
<OPTION value=a>Первый</OPTION>
<OPTION selected value=b>Второй</OPTION>
<OPTION value=c>Третий</OPTION>
<OPTION value=d>Четвертый</OPTION>
</SELECT>
или
<SELECT size=1>
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</SELECT>
<br>
Разбивка списка на группы
<SELECT size=1>
<OPTGROUP label="Первая группа">
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
</OPTGROUP>
<OPTGROUP label="Вторая группа">
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</OPTGROUP>
</SELECT>
<br>
<FIELDSET>
<LEGEND>Группа 1</LEGEND>
<INPUT type="text" id="name1"><br>
<INPUT type="text" id="name2"><br>
</FIELDSET>
<FIELDSET>
<LEGEND>Группа 2</LEGEND>
<INPUT type="text" id="name3"><br>
<INPUT type="text" id="name4"><br>
</FIELDSET>
<br>
<INPUT type="button" value="Кнопка">
<INPUT type="image" src="knopka_ei.gif" name="obrabotka_1">
<INPUT type="reset" value="Очистить">
<INPUT type="submit" name="obrabotka_2" value="Послать">
</FORM>
|
|
|
