Большая часть информации веб-форм передаётся с помощью элемента . Для ввода одной строки текста применяется элемент , для нескольких строк - элемент
Элемент
Last NameLast NameLast Name
Поля формы можно разделять на логические блоки с помощью элемента
. Браузер отобразит
в виде рамки вокруг группы элементов формы. Внешний вид рамки может
быть изменен с помощью каскадных таблиц стилей (CSS).
Чтобы добавить заголовок для каждой группы, понадобится элемент
, который задает встраиваемый в рамку текст заголовка группы.
HTML форма
- это инструмент, с помощью которого HTML-документ может послать
некоторую информацию в некоторую заранее определенную точку внешнего мира,
где информация будет некоторым образом обработана.
Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина
очень простая: создать форму HTML гораздо проще, чем ту "точку внешнего
мира", в которую HTML форма будет посылать информацию. В качестве такой
"точки" в большинстве случаев выступает программа, написанная
на Перл или Си.
Программы, обрабатывающие данные, переданные формами, часто
называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает
"общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве
случаев требует хорошего знания соответствующего языка программирования
и возможностей операционной системы Unix.
В настоящее время определенное распространение получил язык PHP/FI,
инструкции которого можно встраивать прямо в HTML-документы (документы
при этом сохраняются в виде файлов с расширением *.pht или
*.php).
HTML формы передают информацию программам-обработчикам в виде пар
[имя переменной]=[значение переменной] . Имена переменных следует
задавать латинскими буквами. Значения переменных воспринимаются обработчиками
как строки, даже если они содержат только цифры.
Как устроена HTML форма
Форма открывается тегом
и заканчивается тегом
. HTML-документ может содержать в себе несколько форм,
однако формы не должны находиться одна внутри другой. HTML-текст, включая
теги, может размещаться внутри форм без ограничений.
Тег
может содержать три атрибута, один из которых
является обязательным. Вот эти атрибуты:
Обязательный атрибут. Определяет, где находится обработчик формы.
Определяет, каким образом (иначе говоря, с помощью какого метода
протокола передачи гипертекстов) данные из формы будут переданы обработчику.
Допустимые значения: METHOD=POST и METHOD=GET . Если значение
атрибута не установлено, по умолчанию предполагается METHOD=GET .
Определяет, каким образом данные из формы HTML будут закодированы
для передачи обработчику. Если значение атрибута не установлено, по умолчанию
предполагается ENCTYPE=application/x-www-form-urlencoded .
Простейшая HTML форма
Для того, чтобы запустить процесс передачи данных из формы обработчику,
нужен какой-то орган управления. Создать такой орган управления очень просто:
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку
с надписью Submit (читается "сабмит" с ударением на втором слоге,
от английского "подавать"), при нажатии на которую все имеющиеся
в форме данные будут переданы обработчику, определенному в теге
.
Надпись на кнопке можно задать такую, какая нравится, путем введения
атрибута VALUE="[Надпись]" (читается "вэлью"
с ударением на первом слоге, от английского "значение"),
например:
Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму
(пример 11). Она не будет собирать никаких данных,
а просто вернет нас к тексту этой главы.
Пример 11
Простейшая форма
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику
путем введения в определение кнопки атрибута NAME=[имя] (читается
"нэйм", от английского "имя"), например:
При нажатии на такую кнопку обработчик вместе со всеми остальными данными
получит и переменную button со значением Поехали! .
В форме может быть несколько кнопок типа submit с различными
именами и/или значениями. Обработчик, таким образом, может действовать
по-разному в зависимости от того, какую именно кнопку submit нажал
пользователь.
Как HTML форма собирает данные
Существуют и другие типы элементов . Каждый элемент
должен включать атрибут NAME=[имя] , определяющий
имя элемента (и, соответственно, имя переменной, которая будет передана
обработчику). Имя должно задаваться только латинскими буквами
.
Большинство элементов должны включать атрибут
VALUE="[значение]" , определяющий значение, которое будет
передано обработчику под этим именем. Для элементов
и , однако, этот атрибут не обязателен, поскольку
значение соответствующей переменной может вводиться пользователем с клавиатуры.
Основные типы элементов :
TYPE=text
Определяет окно для ввода строки текста. Может содержать дополнительные
атрибуты SIZE=[число] (ширина окна ввода в символах) и
MAXLENGTH=[число] (максимально допустимая длина вводимой строки
в символах).
Пример:
Определяет окно шириной 20 символов для ввода текста. По умолчанию
в окне находится текст Иван, который пользователь может редактировать.
Отредактированный (или неотредактированный) текст передается обработчику
в переменной user .
TYPE=password
Определяет окно для ввода пароля. Абсолютно аналогичен
типу text , только вместо символов вводимого текста показывает
на экране звездочки (*). Пример:
Определяет окно шириной 20 символов для ввода пароля. Максимально
допустимая длина пароля - 10 символов. Введенный пароль передается
обработчику в переменной pw .
TYPE=radio
Определяет радиокнопку. Может содержать дополнительный атрибут
checked (показывает, что кнопка помечена). В группе радиокнопок
с одинаковыми именами может быть только одна помеченная радиокнопка.
Пример:
9600 бит/с
14400 бит/с
28800 бит/с
Определяет группу из трех радиокнопок, подписанных 9600 бит/с,
14400 бит/с и 28800 бит/с. Первоначально помечена первая из
кнопок. Если пользователь не отметит другую кнопку, обработчику будет
передана переменная modem со значением 9600 . Если пользователь
отметит другую кнопку, обработчику будет передана переменная modem
со значением 14400 или 28800 .
TYPE=checkbox
Определяет квадрат, в котором можно сделать пометку. Может
содержать дополнительный атрибут checked (показывает, что
квадрат помечен). В отличие от радиокнопок, в группе квадратов с
одинаковыми именами может быть несколько помеченных квадратов.
Определяет группу из четырех квадратов. Первоначально помечены второй и
четвертый квадраты. Если пользователь не произведет изменений, обработчику
будут переданы две переменные: comp=WS и comp=IS .
TYPE=hidden
Определяет скрытый элемент данных, который не виден пользователю
при заполнении формы и передается обработчику без изменений. Такой элемент
иногда полезно иметь в форме, которая время от времени подвергается переработке,
чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие
возможные варианты использования Вы вполне можете придумать сами.
Пример:
Определяет скрытую переменную version , которая передается обработчику
со значением 1.1 .
TYPE=reset
Определяет кнопку, при нажатии на которую форма HTML возвращается
в исходное состояние. Поскольку при использовании этой кнопки данные обработчику
не передаются, кнопка типа reset может и не иметь атрибута name .
Пример:
Определяет кнопку Очистить поля формы, при нажатии на которую форма HTML
возвращается в исходное состояние.
Помимо элементов , формы HTML могут содержать меню
Меню
Как Вы видите, меню начинается с тега . Тег
Тег
Тег
Разберем небольшой пример:
Такой фрагмент определяет меню из трех элементов: Вариант 1 ,
Вариант 2 и Вариант 3 . По умолчанию выбран элемент
Вариант 1 . Обработчику будет передана переменная
selection значение которой может быть option1
(по умолчанию), option2 или option3 .
После всего, что мы уже узнали, элемент
Все атрибуты обязательны. Атрибут NAME определяет имя, под
которым содержимое окна будет передано обработчику (в примере -
address). Атрибут ROWS устанавливает высоту окна в строках
(в примере - 5). Атрибут COLS устанавливает ширину окна в символах
(в примере - 50).
Текст, размещенный между тегами , представляет собой содержимое окна по умолчанию.
Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне
Пример:
Для демонстрации использования форм HTML я написал небольшую программу на
PHP, которая находится по адресу:
Http://206.31.82.215/hp/nc/fd-win.pht
Исходные данные в эту программу передаст форма, описанная в
примере 12 :
Пример 12
Несколько более сложная форма
Расскажите немного о себе...
Указывать подлинные данные совсем не обязательно.
Для целей демонстрации вполне подойдут и вымышленные.