11.3 Формы

HTML – это не язык программирования, но и он представляет возможность для организации диалога между пользователем и сервером, позволяя организовать ввод некоторой информации передачу ее на сервер для обработки. Эту функцию берут на себя так называемые формы.

Формы в HTML аналогичны диалоговым панелям в типовых программах, они имеют тот же набор, элементов: текст, строки ввода, кнопки, списки и так далее.

Форма начинается с тэга <FORM>, а заканчивается </FORM>.

Этот тэг имеет следующие атрибуты:

• NAME – имя формы, которое может быть использовано для обработки средствами языка JavaScript.

• ACTION – указывает действие, которое будет произведено над внедренными данными.

• METHOD – способ посылки данных серверу.

С помощью атрибута ACTION можно перенаправить введенные данные на собственный почтовый ящик. Для этого следует атрибут оформить следующим образом:

ACTION=mailto:name@mail.ru

Атрибут METHOD может принимать два значения:

• METHOD=GET

• METHOD=POST

Предпочтительнее использовать второй вариант, т.к в этом случае данные будут посланы в скрытом виде.

Строка ввода

Формат тэга для получения строки ввода текста следующий

<INPUT TYPE=TEXT NAME=F1 SIZE=15 MAXLENGTH=50>

То, что именно строка ввода, определяется значением атрибута TYPE. Атрибут NAME задает уникальное имя поля. Чтобы оно было уникальным в пределах одной HTML – страницы не должно быть двух элементов с одним именем.

Атрибуты SIZE и MAXLENGTH задают ширину строки ввода и максимально допустимую длину вводимой строки соответственно. Частным случаем строки ввода является строка ввода пароля, задаваемая значением PASSWORD атрибута TYPE. В этом случае при вводе вместо символов на экране будут отображаться звездочки:

<INPUT TYPE=PASSWORD NAME=F2 SIZE=5 MAXLENGTH=7>

Кнопки с зависимой фиксацией

Значение RADIO атрибута TYPE позволяет создать радио-кнопку. При этом тэг использует дополнительные атрибуты VALUE и CHECKED:

<INPUT TYPE=RADIO NAME=R1 VALUE=ok CHECKED>Хорошо

<INPUT TYPE=RADIO NAME=R1 VALUE=bad>Плохо

<INPUT TYPE=RADIO NAME=R1 VALUE=null>Никак

В этом примере создается три радио-кнопки для ввода ответа на некий вопрос (для типовых ответов: «хорошо», «плохо», «никак»). Обратите внимание, что атрибут NAME имеет во всех трех случаях одинаковое значение. В противном случае эти три кнопки не составят единую группу. Кроме того, в первом тэге указан атрибут CHECKED, который задает первоначально выделенную кнопку.

Кнопки с независимой фиксацией.

Значение атрибута CHECKBOX атрибута TYPE позволяет создать кнопку с независимой фиксацией.

<INPUT TYPE= CHECKBOX NAME=с1 VALUE=red CHECKED>Красный

<INPUT TYPE= CHECKBOX NAME=с1 VALUE=width>Широкий

В этом примере также значения атрибута NAME равны, а атрибут CHECKED устанавливает выделенную кнопку. В данном случае можно было этот атрибут присвоить и второй кнопке или не ставить его вовсе.

Кнопка выполнить

Как уже было сказано выше, тэг <FORM> имеет атрибут ACTION, который указывает на то, какое действие необходимо произвести с заполненной формой. Само действие начнет выполняться только после, того, как пользователь нажмет на кнопку «Выполнить». Эта кнопка создается также при помощи тэга <INPUT>, атрибут которого TYPE имеет значение SUBMIT

<INPUT TYPE=SUBMIT VALUE=Выполнить>

Значение атрибута VALUE задает текст, который появится на кнопке.

Кнопка восстановить значение по умолчанию.

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

<INPUT TYPE= RESET VALUE=Очистить форму>

Скрытое поле

В форму можно включать поля ввода, которые имеют определенное значение и передаются на сервер, но на экран не выводятся. Такое поле используется в ряде специфических случаев, например, когда сервер хочет проконтролировать очередной запрос пользователя. Скрытое поле получается, если атрибут TYPE присвоить значение HIDDEN.

<INPUT TYPE= HIDDEN NAME=hidd VALUE=Запрос_2>

Списки

Раскрывающийся список создается парным тэгом <SELECT>. Каждая строка списка задается тэгом <OPTION>, причем элемента, который будет выбран первоначально, требуется указать атрибут SELECTED/

<SELECT NAME=lst1 MULTIPLE>

<OPTION SELECTED>Первый</OPTION>

<OPTION>Второй</OPTION>

<OPTION>Третий</OPTION>

</SELECT>

В примере создается список из трех элементов («Первый», «Второй», «Третий»). Причем первый элемент выбран по умолчанию. Атрибут MULTIPLE указывает на то, что возможен выбор более, чем одного элемента. Если этого не требуется – атрибут MULTIPLE можно опустить.

Ввод текстового массива

Парный тэг <TEXTAREA> позволяет организовать ввод большого фрагмента текста в несколько строк в специальном окне, снабженном полосой прокрутки. Атрибуты ROWS и COLSопределяют высоту и ширину этого окна соответственно в строках и символах При необходимости можно ввести текст по умолчанию, расположив его между открывающим и закрывающим тэгами:

<TEXTAREA NAME=comml ROWS=5 COLS=50>

Комментарий.

Введите любую текстовую информацию

</TEXTAREA>

В созданном таким образом окне можно редактировать текст, как в стандартном текстовом редакторе.

Теперь рассмотрим пример формы, которую можно использовать для сбора данных о посетителях сайта.

Листинг 7

<HTML><HEAD>

<TITLE>ПРИМЕР ФОРМЫ</TITLE></HEAD>

<!-Тело HTML-Документа->

<BODY> <P ALIGN=LEFT>

<FORM NAME=talk ACTION=mailto:xxx_main@mail.ru METHOD=POST>

<HR>

<CENTER>Пожалуйста, заполните мою анкету:</CENTER>

<HR> Ваше имя:

<INPUT TYPE=TEXT NAME=name SIZE=35>

Ваш e-mail:

<INPUT TYPE=TEXT NAME= e-mail SIZE=35>

Ваш возраст (лет):

<INPUT TYPE=RADIO NAME=years VALUE=o-le15>Младше 15

<INPUT TYPE=RADIO NAME=years VALUE=o-15-25 CHECKED>15-25

<INPUT TYPE=RADIO NAME=years VALUE=o-26-35>26-35

<INPUT TYPE=RADIO NAME=years VALUE=o-36-60>36-60

<INPUT TYPE=RADIO NAME=years VALUE=o-old60>Старше 60

<BR>

Место вашего проживания

<SELECT NAME=city>

<OPTION SELECTED>Москва</OPTION>

<OPTION SELECTED>С-Петербург</OPTION>

<OPTION SELECTED>Самара</OPTION>

<OPTION SELECTED>Курск</OPTION>

<OPTION SELECTED>Брест</OPTION>

<OPTION SELECTED>Новосибирск</OPTION>

<OPTION SELECTED>Другое</OPTION>

</SELECT>

<HR>

Вам понравился мой сайт?

<INPUT TYPE CHECKBOX NAME=mark VALUE=Yes><BR><BR>

Ваши пожелания:<BR>

<TEXTAREA NAME=comment ROWS=5 COLS=50>

Теперь осваивай CGI:) )

</TEXTAREA>

<BR>

<INPUT TYPE=SUBMIT VALUE=Послать запрос>

<INPUT TYPE=RESET VALUE=Очисть форму>

</FORM>

</P></BODY></HTML>

Рис. 11. 5 Пример формы

С помощью такой формы можно собирать информацию о посетителях сайта.

Краткие итоги

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

Контрольные вопросы

1. Перечислите атрибуты тэга <TABLE> и их назначение.

2. Дайте определение, что такое фреймы и для чего они нужны.

3. Какая тэговая пара нужна для установки разбивки текста на фреймы?

4. Какие атрибуты имеет тэговая пара <FRAMESET> </FRAMESET> и что они означают?

5. Какие атрибуты имеет тэг <FRAME>.

6. Что означают атрибуты тэга <FRAME>?

7. Для чего предназначена тэговая пара <NOFRAMES> </NOFRAMES>?

8. Дайте определение Формы.

9. Какие атрибуты имеет тэговая пара <FORM> </FORM>?

10. Для чего нужны атрибуты тэговой пары <FORM> </FORM>?