3.2 Организация списков
Элемент <select> предназначен для организации меню, различных списков и выбора из них. Пункты списка создаются элементами <option>. При отправке данных на сервер пересылается имя списка вместе со значением, которое по умолчанию является выбранной строкой. Передаваемое значение может быть изменено. Ниже представлен пример использования элемента <option> с различными атрибутами. Результат показан на рис. 3.2.
|
Пример 3.2. Списки выбора |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Элемент <option></TITLE> </HEAD> <BODY> <SELЕСT name="select1"> <ОРТION>Москва <OPTION selected>Жмеринка <OPTION>Большие Васюки </SELECT> <SELЕСТ name="select2" size=5 multiple> <OPTION selected>Полыхаев <OPTIОN value="бухгалтер">Берлага <OРТION label="васис" selected>Васисуалий Андреевич Лоханкин <OPTION style="color: red;">Гигиенишвили <OPTION>Пряхин <OPTION>Дуня <OPТION>Люция Францевна Пферд </SELЕCT> </BODY> </HTML>
|
3.3 Связывание элементов формы
Элементы для связывания различных форм весьма полезны в случае автоматической обработки содержимого страницы и при использовании альтернативных браузеров. Они позволяют задать логическую связь между различными элементами. Например, связать надпись на экране с каким-то элементом формы, таким как ее название. Для связывания текстовой информации и элемента управления, т.е. организации подписи, используют элемент <LABEL>. Каждый конкретный элемент <LABEL> может связываться только с одним элементом формы, но с одним элементом формы может быть связано несколько элементов <label>.
В некоторых случаях необходимо организовать подпись не к одному, а к ряду элементов и организовать их в группу. Для организации подписи ко многим элементам служат элементы <fieldset> и <legend>.
Применение элементов <LABEL>, <fieldset>, <legend> показано в примере 3.3 и на рис.3.3.
|
Пример 3.3. Связывание элементов формы |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Элемент <fieldset></TITLE> </HEAD> <BODY> <FIELDSЕТ> <LEGEND style="font-family:'arial';">анкета</lеgend> <FORM action="uri" method="post"> <LABЕL for="имя">имя:</label> <INPUT type="text" id="имя"><br><br> пол<br> <LАВЕL for="пол">м</LABEL><INPUT type="radio" name="пол" value="м"> <LABEL for="пол">ж</LABEL><INPUT type="rаdio" name="пол" value="ж"> </FОRM> </FIЕLDSET> </ВОDY> </HTML>
|
4 Фреймы
4.1 Разбиение окна браузера на фреймы
Фреймы позволяют разделить окно браузера на несколько областей прямоугольной формы и отобразить в каждой из них отдельный HTML-документ. Описание фреймовой структуры строится в отдельном файле. В обычном HTML-документе за разделом HEAD непосредственно следует раздел BODY, в котором содержится информация, предназначенная для отображения. В документе с фреймами элемент BODY либо отсутствует, либо расположен в разделе NOFRAMES, предназначенном для браузеров, которые не поддерживают фреймы. Вместо элемента BODY используется элемент FRAMESET, с помощью которого задается разбиение окна браузера на столбцы или строки. В состав FRAMESET входят другие элементы FRAMESET, реализующие дальнейшее разбиение окна, либо элементы FRAME, определяющие URL документов, которые должны отображаться внутри фреймов.
В примерах 4.1 и 4.2 приведены исходные коды двух документов с фреймами. Эти документы почти идентичны и отличаются только использованием атрибута FRAMEBORDER, определяющим, должны ли отображаться разделительные линии между фреймами. Результаты показаны на рис. 4.1 и 4.2.
|
Пример 4.1. Фреймы с разделителями |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Frames with Borders</TITLE> </HEAD> <FRАМЕSET ROWS="40%,60%"> <FRAME SRC="Frame-Cell.html"> <FRАMESET COLS="*,*"> <FRАМE SRC="Frame-Cеll.html"> <FRAME SRC="Frаme-Cell.html"> </FRAMЕSET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HRЕF-"Frame-Cеll.html">nonframes version</A>. </BODY> </NOFRAMЕS> </FRAMESET> </HTML>
|
|
Пример 4.2. Фреймы без разделителей |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HЕАD> <TITLE>Frames without Borders</TITLE> </HEAD> <FRАМЕSET ROWS="40%,60%" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0> <FRАМE SRC="Frаme-Cell.html"> <FRAMЕSET COLS="*,*"> <FRAME SRC="Framе-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMЕSET> </HTML>
|