Создание 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/guestbook.
Переключатель - поле ввода для атрибутов типа 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>
onetwozero
В команде 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>
onetwozeroten11
Поле ввода для текста
Область ввода для текста создается командой <textarea
name=textarea cols=45 rows=6>Здесь текст по умолчанию</textarea>
Здесь текст по умолчанию
Рисунок
<input type=image src=button.gif>
Упражнение
Попробуйте создать следующую форму. Код см.
|