Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Другая программа под названием Common Gateway Interface (CGI) обрабатывает ее. Таким образом пользователь может интерактивно взаимодействовать с сервером Web через Internet.
Элементы формы (элемент < FORM >)
Элемент < FORM > используется для обозначения документа как формы. Данный элемент определяет границы использования других элементов, размещаемых в форме.
< FORM > определяется последовательностью элементов < INPUT >, размещенных внутри пары <FORM> и </FORM>. Элемент формы использует как метод, так и действие для описания обработки формой данных, вводимых пользователем:
метод (GET или POST) - определяет, как программист должен обрабатывать входные данные из формы.
действие - указывает на URI программы, ответственной за обработку данных.
Элемент < INPUT > используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля.
Можно использовать следующие атрибуты:
MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)
SIZE - размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, броузер будет прокручивать данные в окне.
а также атpибуты:
ALIGN ,
CHECKED ,
NAME ,
SRC ,
TYPE .
Пример 1 - простая форма для ввода:
< P > Улица: <INPUT NAME= "street"> <BR>
Город: <INPUT NAME= "city" SIZE= "20" MAXLENGTH= "20"> <BR>
Индекс: <INPUT NAME= "zip" SIZE= "5" MAXLENGTH= "5" VALUE= "99999"> <BR>
В окне броузера это будет выглядеть так:
Атрибут CHECKBOX
При создании форм часто бывает необходимо получить ответ пользователя на вопрос типа (Да/Нет) или (Правда/Ложь). Например, нужно выбрать из списка несколько значений. Для создания независимых кнопок в формах можно использовать атрибут CHECKBOX . В зависимости от содержания можно отметить несколько флагов.
Вместе с атрибутом CHECKBOX должны использоваться следующие атрибуты:
CHECKED - инициализировать данный флаг, как отмеченный
Пример 2 (элемент " Котлеты " указан как зараннее отмеченный):
<P> Выберите Ваше любимое блюдо:
<FORM>
<INPUT TYPE="checkbox" NAME="food" VALUE="Пельмени"> Пельмени <BR>
<INPUT TYPE="checkbox" NAME="food" VALUE="Голубцы"> Голубцы <BR>
<INPUT TYPE="checkbox" NAME="food" VALUE="Котлеты" CHECKED> Котлеты <BR>
</FORM>
В окне броузера это будет выглядеть так:
Выберите Ваше любимое блюдо:
Атрибут IMAGE
В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для организации этого используется атрибут IMAGE.
После щелчка пользователя по изображению броузер сохраняет координаты соответствующей точки экрана и принимает всю форму.
Вместе с атрибутом IMAGE должны использоваться следующие атрибуты:
ALIGN - необязательный атрибут, указывает на положение изображения на экране (аналогично элементу IMAGE)
Пример 3
<P> Выберите точку на изображении:
<INPUT TYPE= "image" NAME="point" SRC="globe.gif">
Атрибут PASSWORD
Данный атрибут используется для организации ввода пароля без вывода на экран составляющих его символов (вместо символов выводятся звездочки).
Пример 4
<FORM>
<P> Ввведите имя:
<INPUT NAME="login">
<P> Ввведите пароль:
<INPUT TYPE="password" NAME="p_word">
</FORM>
В окне броузера это будет выглядеть так:
Атрибут RESET
Данный атрибут используется для создания кнопки 'Reset'. При нажатии на эту кнопку форма восстанавливает первоначальные значения полей всех элементов <INPUT>, в которых присутствует атрибут RESET.
Вместе с атрибутом RESET может использоваться атрибут
VALUE - значение поля ввода по умолчанию.
Пример 6
<P>
<FORM>
Код: <INPUT NAME="cod"> <BR>
Телефон: <INPUT NAME="phone" SIZE="6" MAXLENGTH="6" ><BR>
<P>
<INPUT TYPE=RESET>
</FORM>
В окне броузера это будет выглядеть так:
Атрибут SELECT
Для организации списков с прокруткой и выпадающим меню можно использовать атрибут < SELECT >. Для определения списка пунктов используются элементы < OPTION > внутри < SELECT >.
Вместе с атрибутом SELECT можно использовать следующие атрибуты:
MULTIPLE - позволяет выбрать более чем одно наименование
SIZE - определяет число пунктов, видимых для пользователя.
SIZE = 1 - броузер выводит список на экран в виде выпадающего меню (видно одно наименование)
SIZE > 1 - броузер представляет на экране обычный список (число - количество видимых наименований)
C элементом OPTION можно использовать следующие атрибуты:
SELECTED - для первоначального выбора значения элемента по умолчанию
VALUE - значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу < OPTION >.
Когда пользователь заполняет форму, атрибут NAME элемента <SELECT> состыковывается с атрибутом VALUE элемента