15. Формы на html странице

Форма - это средство, позволяющее организовать в домашней странице диалог с ее пользователем.

Разработчик домашней страницы создает анкету с помощью специальных элементов:

- кнопки,- списки,- текстовые строки,- текстовые поля.

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

При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "submit" данной анкеты, отправляет ее содержимое программе обработки.

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

Данная команда имеет 2 основных параметра: ACTION и METHOD.

Параметр ACTION является обязательным. Он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода).

Параметр METHOD не является обязательным. Он принимает одно из двух значений: GET или POST , связанных с методом протокола передачи информации из анкеты.

По умолчанию, METHOD= GET .

Пример команды FORM: <FORM ACTION=" http://www.geocities.com/SiliconValley/99999 " METHOD= POST >

Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:

<INPUT TYPE= submit NAME=" botton1VALUE=" Произвольный текст "> где: INPUT - команда создания управляющего элемента. TYPE - параметр, определяющий управляющий элемент. submit - значение этого параметра (в данном случае: управляющая кнопка). NAME - параметр, задающий имя переменной. botton1 - имя переменной. VALUE - параметр, задающий текст, отображаемый на управляющем элементе. Произвольный текст - значение текста на управляющем элементе

Значением параметра ACTION может быть просто адрес для перехода.

<FORM ACTION=" web2e.html"> <INPUT TYPE=SUBMIT VALUE=" Вернуться к началу раздела "></FORM>

Основные типы управляющих злементов INPUT:

1) Текстовая строка: TYPE=text

Определяет окно для ввода одной строки текста. Пример: <INPUT TYPE=text NAME=" text1 " SIZE= 30 VALUE=" Введите текст ">

2) Окно для ввода пароля: TYPE=password

Аналогичен типу text , но при вводе каждый символ заменяется символом *. Пример. Надо ввести пароль длиной не более 5 символов. <INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >

3) Текстовое окно: TEXTAREA

<TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL>

.....

Первоначально заданный текст

.....

</TEXTAREA>

Параметр COLS задает количество символов в строке, параметр ROWS задает количество строк в окне, необязательный параметр WRAP=VIRTUAL задает линейку прокрутки.

4) Радиокнопка: TYPE=radio

Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением параметра NAME), но они будут взаимоисключающими: может быть нажата (CHECKED) только одна из них.

<INPUT TYPE=radio NAME= color VALUE=" Красная" checked> Красная

<INPUT TYPE=radio NAME= color VALUE=" Синяя"> Синяя

<INPUT TYPE=radio NAME= color VALUE=" Зеленая"> Зеленая

5) Помеченный квадрат: TYPE=checkbox

В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами. Например, в следующем примере первоначально задана кнопка " Водка":

<INPUT TYPE=checkbox NAME= box VALUE=" Водка" checked> Водка

<INPUT TYPE=checkbox NAME= box VALUE=" Коньяк"> Коньяк

<INPUT TYPE=checkbox NAME= box VALUE=" Ликер"> Ликер

6) Скрытый текст: TYPE=hidden

При отображении не виден пользователю. Служит для прямой передачи служебной информации от домашней страницы обработчику формы, прозрачно для пользователя. <INPUT TYPE=hidden NAME= Version VALUE=" 2.3 ">

Здесь приведен пример передачи информации о версии программы. При нажатии на кнопку submit в программу обработки будет введено: Version=2.3

7) Меню: SELECT

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

<SELECT NAME=" script ">

<OPTION VALUE=" tour1 "> Путевка в Сочи

<OPTION VALUE=" tour2 "> Путевка в Париж

<OPTION VALUE=" tour3 "> Путевка на Колыму

8) Кнопка ввода: TYPE=submit <INPUT TYPE=submit VALUE=" Ввод данных ">

9) Кнопка отмены: TYPE=reset

Кнопка выполняет инициализацию начальными значениями всех полей. <INPUT TYPE=reset VALUE=" Очистить поля ">

16. Фреймы(кадры) на HTML странице. Дескриптор <iframe>

Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация. Очень удобно использовать фреймы когда необходимо отображать на экране данные из разных источников. Чтобы сделать фрейм, надо создать новую Вэб-страницу, с тэгами <FRAMESET> <FRAME>.

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

Дескриптор <FRAME> служит для определения структуры и содержимого конкретного фрейма.

<html>

<head>

<title>Пример работы с фреймами</title>

</head>

<frameset rows="200,*">

<frame name="frame1" src="lsn017.html">

<frame name="frame2" src="lsn016.html">

</frameset>

</html>

Достоинства и недостатки фреймов

Достоинства:

- фреймы одновременно отображают различную информацию в пределах одного окна;

- используя фреймы, можно постоянно отображать какую-нибудь информацию (например логотип), не включая ее в каждую страницу сайта;

- можно гибко построить навигацию по сайту.

Недостатки:

- главное достоинство фреймов (отображение различной информации в пределах одного окна) является их же и недостатком, т.к. доступная область Вэб-страницы существенно сужается;

- при создании фрейма правильно выбрать его размер часто бывает затруднительно. Таким образом, пользователь должен постоянно пролистывать фрейм при помощи полос прокрутки, что может очень быстро надоесть;

- при низком разрешении экрана монитора объем видимой информации значительно уменьшается;

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

Еще одним из недостатков фреймов является тот факт, что некоторые браузеры не умеют обрабатывать фреймы. При этом пользователь видит перед собой пустой экран. Для того, чтобы не вводить пользователя в заблуждение служит тэг <NOFRAMES>. Текст, помещенный между открывающим и закрывающим тэгом, отображается в случае невозможности отображения фрейма.

Плавающие фреймы

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

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

Плавающие фреймы в данное время поддерживаются только Microsoft IE.

<html>

<head>

<title>Пример работы с фреймами</title>

</head>

<body>

<iframe src="lsn017.html" name="frame1"

width="350" height="300" align="left"></iframe>

<h1>Пример работы с фреймами</h1>

..

<h1>Пример работы с фреймами</h1>

</body>

</frameset>

</html>