Форма - инструмент, с помощью которого HTML-документ может послать информацию в заранее определенную точку внешнего мира, где информация будет обработана.

В качестве такой точки обычно выступает программа.
- Программы, обрабатывающие данные переданные формами, обычно называют CGI-скриптами.

В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

Формы передают информацию программам-обработчикам в виде пар Name="значение".

Имена следует задавать латинскими буквами.

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

Метка <FORM> может содержать три атрибута, один из которых является обязательным:

ACTION - Обязательный атрибут - где находится обработчик формы.

METHOD - каким образом данные из формы будут переданы обработчику.
- Допустимые значения: METHOD="POST" и METHOD="GET". Если значение не установлено, по умолчанию - METHOD="GET".

ENCTYPE - каким образом данные из формы будут закодированы для передачи обработчику. Если значение не установлено, по умолчанию предполагается ENCTYPE="application/x-www-form-urlencoded".





Чтобы запустить процесс передачи данных из формы обработчику, нужен орган управления:
- <INPUT TYPE=submit>

- Встретив такую строчку, браузер нарисует на экране кнопку с надписью Submit, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="Надпись", например: <INPUT TYPE=submit VALUE="Start">





Простейшая форма

<FORM ACTION="http://gonchij.wen.ru">
<INPUT TYPE="submit" VALUE="Gonchij">
</FORM>




Надпись, нанесенную на кнопку, можно тоже передать обработчику путем введения атрибута NAME="имя", например:
<INPUT TYPE="submit" NAME="button" VALUE="Start">
- При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Start.
- В форме может быть несколько кнопок типа submit с различными значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.





Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME="имя", - имя переменной, которая будет передана обработчику.

Большинство элементов <INPUT> должны включать атрибут VALUE="значение", - значение, которое будет передано обработчику под этим именем.
- Для элементов <INPUT TYPE="text"> и <INPUT TYPE="password"> этот атрибут не обязателен, поскольку значение соответствующей переменной (текст или пароль) может вводить сам пользователь.





Основные типы элементов <INPUT>:

TYPE="text" - окно для ввода текста. Может содержать дополнительные атрибуты SIZE="число" (ширина окна в символах) и MAXLENGTH="число" (максимально допустимая длина вводимой строки в символах):
- <INPUT TYPE="text" SIZE="15" NAME="user">

- окно шириной 15 символов для ввода текста - текст передаcтся обработчику в переменной user.





TYPE="password" - окно для ввода пароля - аналогичнo типу text, только вводимый текст тут же преобразуется в звездочки (*):
- <INPUT TYPE="password" NAME="pw" SIZE="15">

- окно шириной 15 символов для ввода пароля. Введенный пароль передается обработчику в переменной pw.





TYPE="radio" - радиокнопкa. Может содержать дополнительный атрибут checked (кнопка заведомо помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
- <INPUT TYPE="radio" NAME="modem" VALUE="9600" checked> 9600 bit/s
<INPUT TYPE="radio" NAME="modem" VALUE="14400"> 14400 bit/s
<INPUT TYPE="radio" NAME="modem" VALUE="28800"> 28800 bit/s

9600 bit/s
14400 bit/s
28800 bit/s

- группа из трех радиокнопок, подписанных 9600 bit/s, 14400 bit/s и 28800 bit/s. Первоначально помечена первая из кнопок. Если пользователь не отметит другую, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.





TYPE="checkbox" - квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (квадрат заведомо помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:
- <INPUT TYPE="checkbox" NAME="comp" VALUE="PC"> Персональные компьютеры
<INPUT TYPE="checkbox" NAME="comp" VALUE="WS" checked> Рабочие станции
<INPUT TYPE="checkbox" NAME="comp" VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE="checkbox" NAME="comp" VALUE="IS" checked> Серверы Интернет

Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы интернет

- группа из четырех квадратов. Первоначально помечены второй и четвертый. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp="WS" и comp="IS".





TYPE="hidden" - скрытый элемент данных - не виден пользователю при заполнении формы и передается обработчику без изменений.
Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело:
- <INPUT TYPE="hidden" NAME="version" VALUE="1.1"> - скрытая переменная version, которая передается обработчику со значением 1.1.





TYPE="reset" - кнопка, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:
- <INPUT TYPE="reset" VALUE="Sbros">
- кнопка Sbros, при нажатии на которую форма возвращается в исходное состояние.





Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.




Меню <SELECT>:
- <SELECT NAME="menyu">
<OPTION VALUE="1">
text 1
<OPTION VALUE="2">text 2.
<OPTION VALUE="3">text 3
</SELECT>



- меню начинается с метки <SELECT> и заканчивается меткой </SELECT>.
- Метка <SELECT> содержит обязательный атрибут NAME - имя которoe генерирует меню.
- Метка <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE="число").
- Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.
- Метка <OPTION> - элемент меню.
- Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню.
- Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.





Наконец элемент <TEXTAREA>:
- <TEXTAREA NAME="address" ROWS="3" COLS="15">
Ваш адрес.
</TEXTAREA>



- Все атрибуты обязательны. NAME - имя, под которым содержимое окна будет передано обработчику (address). ROWS - высотa окна в строках (3). COLS - ширинa окна в символах (20). Текст, размещенный между метками <TEXTAREA> и </TEXTAREA> - содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
- русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.





Более сложная форма

<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD="post">
<b>
О себе.</b><br>
Имя: <INPUT TYPE="text" SIZE="20" NAME="fn"><br>
Фамилия: <INPUT TYPE="text" SIZE="20" NAME="ln"><br>
Пол: <INPUT TYPE="radio" NAME="gender" VALUE="male">мужской
<INPUT TYPE="radio" NAME="gender" VALUE="female">женский<br>
Возраст: <INPUT TYPE="text" SIZE="10" NAME="age"><br>
<INPUT TYPE="submit" VALUE="Start">
</FORM>


О себе
Имя:
Фамилия:
Пол:
мужской
женский
Возраст:






Все это прекрасно, скажут скептики, но на кой нужны формы людям, которым их нечем обработать?

HTML - мощный механизм пересылки содержимого форм по электронной почте. Допустим, что мы Вместо строки <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD="post"> мы ввели <FORM ACTION="mailto:q2212@yandex.ru" ENCTYPE="text/plain">

О себе
Имя:
Фамилия:
Пол:
мужской
женский
Возраст:



Bнимание - изменили алгоритм кодирования на text/plain - фактически выключили кодирование вообще.

Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. И если теперь пользователь нажмет Start, на адрес q2212@yandex.ru автоматически будет отправлено сообщение следующего содержания:
fn=Иван
ln=Петров
gender=male
age=22

Hе все пользователи смогут воспользоваться такой формой - всю работу по составлению сообщения и запуску почтовой программы для его отправки берет на себя браузер пользователя. Значит конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Но даже если это невозможно, ничего особого не случится. Браузер просто выдаст сообщение об ошибке.


Карта сайта
q2212@yandex.ru
+79030100732

Создай сайт! Create site!