Создание HTML-форм

Для создания html-формы используется команда form. У нее могут быть следующие параметры:

NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм.
ACTION - обязательный параметр, он задает путь к скрипту, который будет запущен веб-сервером.
METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST.
TARGET - определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна.

Простой пример:

<form method=POST action=/cgi-bin/gb_show.exe>
<input type=text name=text value="Значение по умолчанию" size=40> 
<input type=submit value=Опубликовать>
</form>

Здесь мы создали форму, которую будет обрабатывать программа gb_show.exe. Параметр method, указывает каким способом передаются параметры в программу gb_show.exe. Какой именно способ указывать, зависит от программы gb_show.exe, которая будет обрабатывать вашу html-форму. В этом параграфе вы должны научиться создавать формы в html-документе. Их использовать вы сможете после установки и настройки веб-сервера, но об этом во второй части книги.
Внутри команды form могут быть следующие элементы:

поле ввода для строки
поле ввода для пароля
кнопки
радиокнопки
список
поле ввода для текста
checkbox - поле ввода для атрибутов типа Boolean
рисунок

Поле ввода для строки

Поле ввода для строки создается командой <input type=text name=text value="Начальное значение" size=40 maxlength=80>.

name задает имя параметра
value - начальное значение
size - размер видимого поля на экране
maxlength - максимальный размер строки ввода

Атрибут value обычно не указывается, это означает, что после загрузки HTML-страницы, в поле ввода будет пустая строка. Обратите внимание на параметр maxlength. Его желательно указывать, чтобы ограничить максимально допустимое количество символов. Это полезно по двум причинам. Во-первых, предостеречь пользователя от неправильного ввода. Представьте, что у вас большая форма с кучей полей. Человек ошибся, в индексе вместо шести цифр указал семь. Если вы не зададите атрибут maxlength равным шести, то бедному пользователю придется ждать, пока данные отправятся CGI-программе, потом пока программа выдаст сообщение об ошибке и т.д. Во-вторых, это будет предупреждением хакерам, что ваш сайт не так просто сломать. Но эту тему мы разберем отдельно в главе "Безопасность CGI".

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

Поле ввода для пароля создается <input type=password name=text value="Начальное значение" size=40 maxlength=10>. Как вы можете заметить, разница в значении атрибута type.

Обратите внимание, что на этот раз размер видимой части больше, чем максимальное количество символов, которое можно ввести.

Кнопки

Для создания кнопки атрибут type должен быть равен button - <input type=button value=Кнопка>. Атрибут value задает надпись на кнопке.

Такого рода кнопки используются обычно при совместном использовании с JavaScript. Наиболее часто используется кнопка для отправки данных HTML-формы на сервер и кнопка для сброса значений формы в начальное положение.
Кнопка для отправки формы создается так: <input type=submit value="Опубликовать">. Внешне она выглядит, как кнопка, но обратите внимание, что атрибут type имеет значение не button, а submit.

Для сброса формы в начальное состояние служит элемент: <input type=reset value="Сбросить в начальное состояние"> Вы можете изменить значения в элементах данной HTML-формы выше, а затем сбросить в начальное состояние, нажав следующую кнопку. Не путайте сброс в начальное состояние с нулевым. Часто на кнопке Reset пишут "очистить". Это в корне неверно. Очень часто этот элемент применяется не по делу. Во-первых, глупостью является сброс в нулевое состояние, т.е. когда у вас по умолчанию в HTML-форме никаких значений не было. Во-вторых, совсем полной глупостью является размещения кнопки Reset рядом с кнопкой Submit. Многие пользователи жмут на кнопки интуитивно и очень быстро. Например, все уже привыкли, что кнопка ОК размещается слева, а кнопка Cancel справа. Если на сайте поставить кнопку Reset слева от кнопки Submit, то будет много мата от посетителей такого сайта. Прежде, чем поставить кнопку Reset подумайте, а нужна ли она. Она нужна тогда и только тогда, когда в HTML-форме имеются начальные значения, которые пользователь редактирует. По сути кнопка Reset позволяет вернуться к начальным значениям не перегружая HTML-страницу. В Сети приходится встречать очень большие HTML-формы, в конце которых стоят рядом две кнопки Reset & Submit. И посетитель сайта долго и упорно заполнявший форму, а потом ошибившись кнопкой, начинает проклинать все что только можно и перебирать всех близких родственников разработчиков данного сайта.

Радиокнопки

Для создания радиокнопки атрибут type должен быть равен radio.

<input type=radio checked name=smile value=images/smiles/icon1.gif>
<img src=images/smiles/icon1.gif>
<input type=radio name=smile value=images/smiles/icon2.gif>
<img src=images/smiles/icon2.gif>
<input type=radio name=smile value=images/smiles/icon3.gif>
<img src=images/smiles/icon3.gif>
<input type=radio name=smile value=images/smiles/icon4.gif>
<img src=images/smiles/icon4.gif>
<input type=radio name=smile value=images/smiles/icon5.gif>
<img src=images/smiles/icon5.gif>
<input type=radio name=smile value=images/smiles/icon6.gif>
<img src=images/smiles/icon6.gif>
<input type=radio name=smile value=images/smiles/icon7.gif>
<img src=images/smiles/icon7.gif>
<input type=radio name=smile value=images/smiles/icon8.gif>
<img src=images/smiles/icon8.gif>
<input type=radio name=smile value=images/smiles/icon9.gif>
<img src=images/smiles/icon9.gif>
<input type=radio name=smile value=images/smiles/icon10.gif>
<img src=images/smiles/icon10.gif>
<br>
<input type=radio name=smile value=images/smiles/icon11.gif>
<img src=images/smiles/icon11.gif>
<input type=radio name=smile value=images/smiles/icon12.gif>
<img src=images/smiles/icon12.gif>
<input type=radio name=smile value=images/smiles/icon13.gif>
<img src=images/smiles/icon13.gif>
<input type=radio name=smile value=images/smiles/icon14.gif>
<img src=images/smiles/icon14.gif>
<input type=radio name=smile value=images/smiles/icon15.gif>
<img src=images/smiles/icon15.gif>
<input type=radio name=smile value=images/smiles/icon16.gif>
<img src=images/smiles/icon16.gif>
<input type=radio name=smile value=images/smiles/icon17.gif>
<img src=images/smiles/icon17.gif>
<input type=radio name=smile value=images/smiles/icon18.gif>
<img src=images/smiles/icon18.gif>
<input type=radio name=smile value=images/smiles/icon19.gif>
<img src=images/smiles/icon19.gif>
<input type=radio name=smile value=images/smiles/icon20.gif>
<img src=images/smiles/icon20.gif>

От группы радиокнопок на сервер посылается пара name=value, в нашем случае это smile=images/smiles/icon1.gif. Если вы переставите точку на другую кнопку, то соответственно value изменится. В одной форме может быть несколько групп радиокнопок. Радиокнопки группируются на основании поля name. Если вы хотите заранее пометить какую-то кнопку, как отмеченную, то поставьте ей атрибут checked. См. самую первую строчку в примере.

Такие радиокнопки используются в форумах и гостевых книгах, см. http://itsoft.ru/gb.

Переключатель - поле ввода для атрибутов типа Boolean

<input type=checkbox name=checkbox> Аналогично примеру выше, для того чтобы отметить переключатель, укажите атрибут checked. Также вы можете задать и атрибут value. По умолчанию он имеет значение on. Но смысла в этом особого нет, т.к. если переключатель не отмечен, то он не передается на сервер вообще.

Список

Список создается командой SELECT. Запись в списке создается командой OPTION. В команде OPTION обязательный атрибут value. Атрибут SELECTED указывает, что данная строка будет выбрана по умолчанию.

<SELECT NAME=list>

    <OPTION value=1>one

    <OPTION value=2>two

    <OPTION value=0 SELECTED>zero

</SELECT>

В команде SELECT могут быть атрибуты SIZE и MULTIPLE. SIZE задает размер списка на экране в строчках. Модификатор MULTIPLE указывает, что в данном списке можно выбрать несколько строк.

<SELECT NAME=list2 SIZE=3 MULTIPLE>

    <OPTION value=1>one

    <OPTION value=2>two

    <OPTION value=0 SELECTED>zero

    <OPTION value=10>ten

    <OPTION value=11>11

</SELECT>

Поле ввода для текста

Область ввода для текста создается командой <textarea name=textarea cols=45 rows=6>Здесь текст по умолчанию</textarea>

Рисунок

Упражнение

Попробуйте создать следующую форму. Код см. здесь.