Плавающие фреймы
Плавающий фрейм вставляется в тело обычного документа HTML аналогично графическому изображению при помощи тега <IFRAME>, использующегося в паре с </IFRAME>.
Обязательным атрибутом этого тега является src, определяющий имя документа, помещаемого в окно плавающего фрейма и аналогичный по использованию одноименному параметру тега <FRAME>: <IFRAME src=’’fr2.htm’’ >.
Помимо этого, для тега <IFRAME> можно задавать атрибуты align - выравнивание текста, расположенного рядом с фреймом (значения аналогичны align в <IMG>), width и heigh - высота и ширина фрейма (измеряются в пикселах), атрибуты frameborder и scrolling аналогичны одноименным в <FRAMESET>.
Например:
<HTML>
<HEAD>
<TITLE> Фрейм </title></head>
<BODY bgcolor=’’#FFFFFF’’>
Плавающий фрейм: <P>
<IFRAME src=’’fr1.htm’’ align=left frameborder=1 scrolling=’’Yes’’>
</IFRAME> Текст, расположенный справа от фрейма.
<BR> Текст, расположенный ниже фрейма.
</body>
</html>
11.Формы
Формой в HTML называется конструкция для ведения диалога с пользователем. Обычно формы содержат в себе различные элементы управления: выбор пункта меню, область для ввода текста, пароль, список, выпадающее меню, кнопки и др. элементы.
Для построения сложных форм используются теги <FORM> и </FORM>, между которыми находятся описания органов управления формой (кнопок, меню, паролей и т.п.) в виде тегов <INPUT>, <SELECT>, <TEXTAREA> и др. После заполнения формы и подтверждения ввода со стороны пользователя введенная информация пересылается на сервер
и обрабатывается при помощи специальной CGI - программы, связанной с формой. Тег <FORM> имеет атрибуты:
action - указание на имя программы, обрабатывающей форму: action =’’http://www. название. домен /имя программы’’.
Одним из вариантов обработки может быть пересылка по электронной почте: аction=’’mailto: Адрес@название.домен’’.
metrhod - применяется для указания протокола, используемого для пересылки данных на сервер. Протокол GET выбран по умолчанию, но в большинстве случаев разработчики предпочитают метод POST;
enctype - указание способа кодирования содержимого формы (используется редко).
Например:
<FORM method = POST action =’’http://www.serv.ru./cgi/form.exe>
{теги, описывающие элементы управления в форме} </FORM >.
Примечание: для выполнения лабораторной работы достаточно указать в HTML - документе только теги элементов управления формой, не указывая <FORM>, так как программная обработка через Internet форм, содержащихся в лабораторных заданиях, не предусмотрена.
Для создания в форме различных органов управления используются теги <INPUT>, <TEXTAREA> и <SELECT>.
Элемент <INPUT> позволяет создавать такие элементы управления как флажки, поля ввода текста, кнопки, переключатели. Элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов.
Вид элемента определяет атрибут type.
type=’’text’’ - создание строки ввода текста. Ширина строки задается с помощью атрибута size в символах: size=80. По умолчанию ширина равна 20 символам. Атрибут value позволяет автоматически разместить в строке произвольный текст: value=’’сообщение’’. По умолчанию поле ввода текста является пустым. Атрибут maxlength определяет максимальную длину строки, записанной в поле ввода текста: maxlength=60. По умолчанию это ограничение отсутствует.
Например: <INPUT type=’’text’’ size=70>
type=’’password’’ - создание строки для ввода пароля Введенная информация отображается звездочками.
t
ype=’’checkbox’’-
создание флажка: .
Обычно в формах используют несколько флажков, означающих выбор одного или нескольких пунктов текста. С этим элементом используется атрибут checked, который определяет, какой из флажков должен быть выбран по умолчанию (то есть, в нем должна стоять галочка). Можно выбрать сразу несколько флажков.
Например: <P> Вы имеете дома:
<INPUT type=’’checkbox’’ name=’’F001’’ > Телевизор<BR>
<INPUT type=’’checkbox’’ name=’’F001’’ checked> Телефон <BR>
<INPUT type=’’checkbox’’ name=’’F001’’ checked > Видео <BR>
<INPUT type=’’checkbox’’ name=’’F001’’ > Холодильник <BR>
<
/P>
4.type=’’radio’’
-
определение одного переключателя:
.
Для создания группы переключателей нужно использовать несколько элементов <INPUT>. Атрибут checked определяет выбранный по умолчанию переключатель. В отличие от флажков, переключатель может быть выбран только один.
Например: <P> Ваш возраст:
<INPUT type=’’radio’’ name=’’S001’’ checked > до 20 лет<BR>
<INPUT type=’’ radio’’ name=’’S001’’ > от 20 до 30 лет<BR>
<INPUT type=’’ radio’’ name=’’S001’’ > от 30 до 45 лет<BR>
<INPUT type=’’ radio’’ name=’’S001’’ > более 45 лет<BR>
</P>
Для всех вышеописанных элементов должен использоваться атрибут name , определяющий имя поля формы, посылаемое программе обработки формы на сервере: name=’’F001’’.
5.type=’’submit’’ - создание кнопки, нажатие на которую подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке: value=’’Ввод закончен’’.
6.type=’’reset’’ - кнопка для отмены ввода данных в форму. Атрибут value имеет тот же смысл, как и у ’’submit’’.
Элементы <SELECT> <OPTION> </select> предназначены для создания списка или меню на гипертекстовой странице.
<SELECT> и </select> создают список или выпадающее меню, а <OPTION> создает пункт списка.
Для тега <SELECT> используются три атрибута: name определяет имя меню (см. тег <INPUT>). При помощи атрибута multiple пользователю разрешается выбрать сразу несколько пунктов списка. Атрибут size определяет количество видимых
на экране пунктов списка. Когда size не использован, список выглядит обычным образом: сначала видна только первая строка, а позиционирование на ней указателя мыши раскрывает список (так называемое выпадающее меню). Если значение атрибута задано, то список не раскрывается, а прокручивается, причем пользователь видит только указанное количество строк.
Элемент <OPTION> имеет два атрибута: selected определяет, какой из пунктов списка должен быть выбран по умолчанию при загрузке страницы. Таким способом может быть помечен только один элемент. Атрибут value используется для обработки данных на стороне сервера. Выбранный пункт списка характеризуется значениями возвращенных атрибутов name и value.
Пример списка:
<P> <H2> Выберите дисциплину для сдачи зачета: <SELECT>
<OPTION value=a selected> Архитектура ВС и сетей
<OPTION value=b> Операционные системы
<OPTION value=c> Базы данных
<OPTION value=d> Культурология
</SELECT></H2></P>
Элемент <TEXTAREA> ..</textarea> позволяет создать область для ввода или просмотра текста. Размеры области создаются при помощи атрибутов rows (количество строк) и cols (количество столбцов). Назначение атрибута name точно такое же, как и в предыдущих случаях.
Например: <TEXTAREA name=’’text001’’ rows=5 cols=30>
Текст, отображенный в окне ввода
</textarea>
Элементы <TEXTAREA> и <SELECT> могут быть использованы не в составе формы, а как самостоятельные детали web-страницы.