HTML: Популярный самоучитель
Шрифт:
• src – URI HTML-документа, отображаемого в окне фрейма;
• frameborder – режим отображения границы фрейма, может принимать значения 0 (не показывать границу) или 1 (показывать границу);
• scrolling – режим отображения полос прокрутки содержимого фрейма, может принимать значения no (не показывать полосы прокрутки), yes (показывать полосы прокрутки) или auto (используется по умолчанию, показывать полосы прокрутки, только если содержимое не помещается);
• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);
• marginheight – задает расстояние между границами и содержимым фрейма по вертикали;
• align – задает положение плавающего фрейма в
• width – задает ширину окна плавающего фрейма, значение может быть как абсолютным (в пикселах), так и процентным;
• height – задает высоту окна плавающего фрейма.
Текст между тегами <IFRAME> и </IFRAME> отображается браузером только в случае невозможности отобразить сам плавающий фрейм.
В качестве примера использования элемента IFRAME ниже приведен текст HTML-документа, внешний вид которого показан на рис. 8.3 (пример 8.7).
<TITLE>Пример страницы с плавающим фреймом</TITLE>
<BODY>
Плавающий фрейм выглядит следующим образом:
<IFRAME src = "start.html" align = center frameborder = 1 width = "100%" >
Ваш браузер не поддерживает "плавающие" фреймы. Для просмотра содержимого документа start.html нажмите
<A href = "start.html">сюда</A>
</IFRAME>
</BODY>
8.6. Замена фреймов внедренными HTML-документами
Если по каким-то причинам у вас нет возможности использовать фреймы, но все же хочется сохранить интерфейс сайта в том же виде, каким он был бы при использовании фреймов, можно прибегнуть к использованию HTML-элемента OBJECT. Взгляните на текст примера 8.8. Здесь для создания аналога плавающего фрейма, показанного на рис. 8.3, используется элемент OBJECT.
<TITLE>Замена плавающего фрейма внедренным HTML-документом</TITLE>
<BODY>
Внедренный HTML-документ выглядит так:
<OBJECT type = "text/html" data = "start.html" align = center width = "100%" height = "200">
Ваш браузер не поддерживает внедрение объектов. Для просмотра содержимого документа start.html нажмите
<A href = "start.html">сюда</A>
</OBJECT>
</BODY>
Результат внедрения в HTML-документ еще одного HTML-документа приведен на рис. 8.4. Как видите, внедрение объекта по виду практически не отличается от добавления плавающего фрейма.
Рис. 8.4. Внедренный документ в роли плавающего фрейма
Правда, есть в рассматриваемой здесь замене один подвох. Средствами только лишь HTML не получится использовать область внедренного документа как целевой фрейм для гиперссылок, так что область применения описанного здесь решения гораздо уже, чем область возможного применения фреймов.
Глава 9
Формы
Формы – замечательная возможность HTML, позволяющая с привлечением довольно небольшого количества усилий разработчика организовать взаимодействие с пользователями программ, работающих на удаленных серверах Сети.
Возможно, вам не раз приходилось заполнять анкеты на сайтах, например при регистрации ящика электронной почты. Если приходилось, то вспомните, что данные вы вводили прямо в окне браузера. После ввода данных нажимали кнопку типа Отправить. Далее браузер упаковывал и отсылал введенные вами данные на сервер, где их обрабатывало специализированное приложение (CGI-приложение). Так вот, формы нужны как раз для того, чтобы можно было организовать ввод данных от пользователя. HTML-документы с формами отличаются от обычных документов только наличием различных элементов управления: полей ввода текста, флажков, кнопок и др. (см. любое окно Windows или рис. 9.1).
Рис. 9.1. Пример HTML-документа с формой
Выше было сказано, что данные, введенные пользователем в форму, обрабатываются CGI-приложениями, работающими на сервере. Подробное рассмотрение этих приложений выходит за рамки книги. Здесь же стоит сказать, что CGI-приложение – это обычное приложение (программа), запущенное на сервере и способное получать данные, отправленные с использованием CGI (Common Gateway Interface). Отсюда, собственно, и название этого класса приложений. Вообще, такое приложение может быть реализовано как угодно: на Java, сценарием PHP, JSP или ASP и т. д. Общее, что такие приложения выполняют, – прием запроса (набора значений полей формы) с некоторой служебной информацией и передача в ответ HTML-документа, являющегося результатом обработки принятого запроса.
Данные, введенные в форму, в некоторых случаях могут обрабатываться и на стороне клиента с помощью сценариев. Однако сценарии будут рассмотрены позже. Далее же в этой главе описываются создание и настройка форм, данные которых предназначены для отправки CGI-приложению.
9.1. Создание формы
Для вставки формы в HTML-документ используется элемент FORM. Он задается парными тегами <FORM> и </FORM>. Между этими тегами помещаются описания элементов управления формы. Здесь также может быть помещен и другой текст с использованием разметки средствами HTML. Этот текст обычно используется для пояснения, какие данные и в какой элемент управления нужно вводить. При создании формы используются следующие атрибуты элемента FORM:
• action – обязательный для каждой формы параметр, URI программы-обработчика данных формы;
• method – задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;
• enctype – задает тип данных формы, если используется метод отправки post; по умолчанию имеет значение application/x-www-form-urlencoded; при необходимости передачи файлов используется значение multipart/form-data;
• accept-charset – используется при передаче файлов, позволяет указать, какие кодировки используются для каждого из файлов (список строковых значений – названий кодировок), по умолчанию используется значение UNKNOWN (приложение на сервере должно само определять кодировки);
• accept – описывает типы файлов (MIME-типы), передаваемые серверу; если этот параметр не использовать, то серверное приложение должно уметь само определять типы передаваемых ему файлов.
Пример описания формы:
<FORM action = «somesite.com/cgi-bin/proc.exe» method = «post»>
<!– Описания элементов управления и текста формы –>
...
</FORM>
Перед тем как приступить к рассмотрению элементов управления, которые можно поместить на форму, приведу несколько слов о методах отправки данных форм: для чего они нужны и чем отличаются. Итак, метод get часто используется для отправки небольших объемов данных, для которых достаточно набора символов кодировки ASCII. При этом данные формы присоединяются к строке URI, заданной в action формы. Для отделения данных от URI используется символ ?. Точно таким же образом вы передавали данные почтовой программе при рассмотрении гиперссылок в гл. 5.