Уpок 14 (Формы HTML))

Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Другая программа под названием Common Gateway Interface (CGI) обрабатывает ее. Таким образом пользователь может интерактивно взаимодействовать с сервером Web через Internet.

Элемент < FORM > используется для обозначения документа как формы. Данный элемент определяет границы использования других элементов, размещаемых в форме.

< FORM > определяется последовательностью элементов < INPUT >, размещенных внутри пары <FORM> и </FORM>. Элемент формы использует как метод, так и действие для описания обработки формой данных, вводимых пользователем:

• метод (GET или POST) - определяет, как программист должен обрабатывать входные данные из формы.
• действие - указывает на URI программы, ответственной за обработку данных.

Данный элемент поддерживает атрибуты ACTION , ENCTYPE , METHOD .

Элемент < INPUT > используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля.

Можно использовать следующие атрибуты:

• MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)
• SIZE - размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, броузер будет прокручивать данные в окне.
• VALUE - определяет начальное значение поля ввода.

Пример 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 должны использоваться следующие атрибуты:

• CHECKED - инициализировать данный флаг, как отмеченный
• NAME - наименование поля ввода формы
• VALUE - значение поля ввода

Пример 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 должны использоваться следующие атрибуты:

• ALIGN - необязательный атрибут, указывает на положение изображения на экране (аналогично элементу IMAGE)
• NAME - наименование поля ввода формы
• SRC - URI файла - источника изображнения

Пример 3

<P> Выберите точку на изображении:
<INPUT TYPE= "image" NAME="point" SRC="globe.gif">

Данный атрибут используется для организации ввода пароля без вывода на экран составляющих его символов (вместо символов выводятся звездочки).

Пример 4

<FORM>
<P> Ввведите имя:
<INPUT NAME="login">
<P> Ввведите пароль:
<INPUT TYPE="password" NAME="p_word">
</FORM>

В окне броузера это будет выглядеть так:

Данный атрибут используется для создания кнопки '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 >. Для определения списка пунктов используются элементы < OPTION > внутри < SELECT >.

Вместе с атрибутом SELECT можно использовать следующие атрибуты:

• NAME - наименование объекта
• MULTIPLE - позволяет выбрать более чем одно наименование
• SIZE - определяет число пунктов, видимых для пользователя.
  SIZE = 1 - броузер выводит список на экран в виде выпадающего меню (видно одно наименование)
  SIZE > 1 - броузер представляет на экране обычный список (число - количество видимых наименований)

C элементом OPTION можно использовать следующие атрибуты:

• SELECTED - для первоначального выбора значения элемента по умолчанию
• VALUE - значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу < OPTION >.

Когда пользователь заполняет форму, атрибут NAME элемента <SELECT> состыковывается с атрибутом VALUE элемента для формирования наименования, выбранного пользователем.

Пример 7

<FORM>
<SELECT NAME="Фрукты" SIZE=3 >
<OPTION> Сливы
<OPTION> Груши
<OPTION value="Lemon_and_orange">Лимоны и апельсины
<OPTION selected> Яблоки
</SELECT>
</FORM>

В окне броузера это будет выглядеть так:

Данный атрибут используется при окончании ввода пользователем данных. Броузер, в свою очередь выводит данный элемент, как кнопку, на которой пользователь может щелкнуть, чтобы завершить процесс редактирования.

Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:

• NAME - наименование кнопки SUBMIT
• VALUE - значение переменной поля в вашей форме

Пример 8

<P>
<FORM>
Код: <INPUT NAME="cod"> <BR>
Телефон: <INPUT NAME="phone" SIZE="6" MAXLENGTH="6" ><BR>
<P>
<INPUT TYPE=RESET> <INPUT TYPE=SUBMIT>
</FORM>

В окне броузера это будет выглядеть так:

Данный атрибут используется для ввода большого количества текстовой информации (несколько строк).

Вместе с атрибутом TEXTAREA можно использовать следующие атрибуты:

• NAME - наименование поля
• COLS - число колонок (символов) в текстовой области
• ROWS - число видимых строк в текстовой области

Пример 9

<FORM>
<TEXTAREA NAME="adress" COLS=64 ROWS=6>
Украина
Мариуполь
пр.Нахимова, 99
</TEXTAREA>
</FORM>

В окне броузера это будет выглядеть так:

Следующий пример содержит большинство описанных выше элементов.

<P> <H3 ALIGN=CENTER> Анкета пользователя </H3>
<P> Ответьте, пожалуйста, на вопросы:
<FORM METHOD="POST" ACTION="http://www.ok.com/ok">
<P> Ваше имя: <INPUT NAME="name" SIZE="48">
<P> Мужчина <INPUT NAME="gender" TYPE=RADIO VALUE="male">
<P> Женщина <INPUT NAME="gender" TYPE=RADIO VALUE="female">
<P> Детей <INPUT NAME="family" TYPE=TEXT>
<P> Страна <INPUT NAME="family" TYPE=TEXT>
<UL>
<LI> Украина <INPUT NAME="country" TYPE="checkbox" VALUE="Ukraine">
<LI> Россия <INPUT NAME="country" TYPE="checkbox" VALUE="Russian">
<LI> Другая <TEXTAREA NAME="other" COLS=48 ROWS=3></TEXTAREA>
</UL>
<P> Электронный адрес: <INPUT NAME="email" SIZE="42">
<P> Для подтверждения ввода нажмите на кнопку SUBMIT.
<P> Для сброса введенных данных нажмите на кнопку RESET.
<P>
<INPUT TYPE=SUBMIT><INPUT TYPE=RESET>
</FORM>

В окне броузера это будет выглядеть так:

Анкета пользователя

Ответьте, пожалуйста, на вопросы:

Когда пользователь щелкает на кнопке SUBMIT, броузер передает сообщение (метод POST) по адресу http://www.ok.com/ok , а тело сообщения будет выглядеть примерно так:

name=Oleg+Ivanov&gender=male&family=2&country=Ukraine&other=None&email=ok@ok.donin.com

Далее специальная программа размещенная на сервере http://www.ok.com/ok начнет обработку ответов пользователя.