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


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


Элементы формы (элемент < FORM >)

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

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

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


Сбор данных при помощи форм (элемент < INPUT >)

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

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

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

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

Пример 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>

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

Ввведите имя:

Ввведите пароль:


Атрибут RADIO

Данный атрибут используется для организации выбора одного единственного варианта их нескольких возможных.

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

Пример 5

<P> Укажите сорт Вашего любимого пива:
<FORM>
<INPUT TYPE="radio" NAME="beer" VALUE="slav"> Славутич<BR>
<INPUT TYPE="radio" NAME="beer" VALUE="obol"> Оболонь<BR>
<INPUT TYPE="radio" NAME="beer" VALUE="chern"> Черниговское<BR>
</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 можно использовать следующие атрибуты:

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

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

Пример 7

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

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


Атрибут SUBMIT

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

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

Пример 8

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

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

Код:
Телефон:


Атрибут TEXTAREA

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

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

Пример 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.

Для сброса введенных данных нажмите на кнопку RESET.

Когда пользователь щелкает на кнопке 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 начнет обработку ответов пользователя.


[Пpедыдущий уpок] [Оглавление] [Следующий уpок]

Copyright © 1998 , O'K