23. Работа с формами, фреймами и таблицами

Формы

Формы используются для ввода информации. Их можно сравнить с бланками или анкетами: они содержат поля для заполнения, списки для выбора одного из элементов и т.д. Важным является определение структуры формы.

Формы реализуются в виде наборов интерфейсных элементов, созданных средствами HTML, которые предоставляют пользователям возможность вводить информацию и отсылать ее на сервер. С точки зрения HTML, форма - это упорядоченный набор элементов, описывающих ее структуру. В составе формы могут использоваться строки ввода, кнопки с зависимой и независимой фиксацией, списки и т. п. Обычно форма имеет специальную кнопку SUBMIT, нажатие которой приводит к отсылке содержимого формы на сервер для последующей обработки. Обработкой форм занимаются сценарии CGI и ASP.

Типы элементов формы

Спецификацией HTML определены следующие типы элементов форм:

Кнопки. Авторы могут создавать три типа кнопок:

Кнопки отправки. При активизации такой кнопки производится отправка данных формы. В форме может быть несколько кнопок отправки.

Кнопки сброса. При активизации этой кнопки для всех элементов формы устанавливаются исходные значения.

Прочие кнопки. Для этих кнопок действие по умолчанию не определено. С атрибутами событий каждой такой кнопки могут быть связаны клиентские скрипты. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт. Авторы определяют язык скрипта для кнопок в объявлении скрипта по умолчанию (в элементе META).

При создании кнопок используются управляющие элементы HTML (BUTTON или INPUT).

Флажки. Флажки (и кнопки с зависимой фиксацией) - это переключатели вкл./выкл., которые могут переключаться пользователем. Переключатель "включен", если для управляющего элемента HTML установлен атрибут selected.

При отправке формы успешными могут стать только включенные переключатели. Несколько флажков в форме могут создаваться с помощью одного и того же управляющего элемента HTML (INPUT).

Кнопки с зависимой фиксацией. Кнопки с зависимой фиксацией похожи на флажки и, как правило, являются взаимоисключающими. Если одна кнопка включена, другие обязательно выключены. Для создания кнопок с зависимой фиксацией используется управляющий элемент HTML INPUT.

Меню. С его помощью осуществляется выбор одного из предложенных вариантов. Меню создается с помощью управляющего элемента HTML SELECT, а также элементов OPTGROUP и OPTION.

Текстовой ввод. Этот элемент формы используется для ввода буквенно-цифровых данных. Текстовой ввод поддерживается двумя управляющими элементами HTML: INPUT и TEXTAREA. Элемент INPUT создает элемент формы для ввода текста из одной строки, а элемент TEXTAREA обеспечивает ввод текста из нескольких строк. Введенный текст становится текущим значением управляющего элемента HTML.

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

Скрытые элементы формы. Авторы могут создавать элементы формы, не представляемые пользователям, но имеющие значения, которые передаются с формой. Для создания скрытого элемента формы используется управляющий элемент HTML INPUT.

Объекты. Авторы могут размещать в формах объекты для использования связанных с ними определенных данных. Для создания таких элементов формы используется управляющий элемент HTML OBJECT.

Таблицы

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

Авторам предоставляется возможность работать над структурой и компоновкой таблицы (например, использование группы столбцов или колонок текста). Возможность дизайнеров рекомендовать ширину столбцов позволяет агентам пользователей отображать данные таблицы постепенно (по мере их получения) и не ждать всю таблицу до создания изображения в окне браузера.

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Заголовок (элемент CAPTION) предоставляет краткое описание таблицы. Можно также указать и более длинное описание (с помощью атрибута summary) для удобства людей, использующих агентов на базе азбуки Бройля или речи.

Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. В HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.

Строки таблицы могут группироваться в разделы заголовков, нижних заголовков и тела с помощью элементов THEAD, TFOOT и TBODY соответственно. Группы строк convey несут дополнительную структурную информацию и могут генерироваться агентами пользователей различными способами, отображающими эту структуру. Агенты пользователей могут использовать подразделение на заголовки/тело/нижние заголовки для поддержки прокрутки тела независимо от заголовков. При печати длинных таблиц информация из заголовков может повторяться на каждой странице таблицы.

Более того, авторы могут объявлять свойства столбцов в начале определения таблицы (с помощью элементов COLGROUP и COL) таким образом, чтобы агенты пользователей могли генерировать таблицу последовательно, а не ждать считывания всех данных таблицы перед тем, как начать генерацию.

Элементы построения таблиц

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

Элемент <TABLE> ...</TABLE> определяет таблицу HTML и обрамляет всю табличную спецификацию. Все элементы таблицы должны находиться внутри этих двух элементов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER, т.е. если присутствует параметр BORDER, браузер визуализирует таблицу в рамке. Начальный и конечный теги обязательны.

Необязательный элемент <CAPTION> ... </CAPTION> специфицирует текст заголовка (имя) таблицы. Положение заголовка по умолчанию - сверху по центру таблицы. Для помещения заголовка в нижнюю часть таблицы используется параметр ALIGN=BOTTOM. В заголовке может использоваться дескриптор любого типа. Начальный и конечный теги обязательны.

Элемент <TR> ... </TR> определяет строку таблицы. Количество строк таблицы определяется количеством встречающихся пар <TR>..</TR>. Строки могут иметь атрибуты ALIGN (LEFT, CENTER, RIGHT) и VALIGN (TOP, MIDDLE, BOTTOM), которые описывают визуальное положение содержимого строк в таблице. Начальный тег обязателен. Конечный тег не обязателен.

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

Элемент <TD> ... </TD> определяет ячейку данных таблицы. Этот элемент используется и в том случае, если в ячейке размещены и заголовок и данные. По умолчанию текст в ячейке выравнивается по левому краю и центрируется по вертикали. Ячейки данных могут описываться дополнительными параметрами, определяющими характеристики ячейки и/или ее содержимого.

Начальный тег Th или TD обязателен, конечный тег не обязателен.

Группы строк: элементы THEAD, TFOOT и TBODY.

Элемент <THEAD></THEAD> - заголовок таблицы.

Элемент <TFOOT></TFOOT> - нижний заголовок таблицы.

Начальный тег обязателен, конечный тег не обязателен.

Элемент < TBODY></TBODY> - тело таблицы.

Каждая группа строк должна содержать по крайней мере одну строку, определяемую элементом TR. Разделы THEAD, TFOOT и TBODY должны содержать одинаковое число столбцов.

Начальный и конечный теги не обязательны.

Группы столбцов: элементы COLGROUP и COL. Элемент <COLGROUP></COLGROUP> - группа столбцов таблицы. Начальный тег обязателен, конечный тег не обязателен

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

Группы столбцов позволяют создавать структурные подразделения внутри таблицы. Авторы могут выделять такую структуру с помощью таблиц стилей или атрибутов HTML.

Фреймы

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

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

Но вставка в Web-страницу фреймов приводит к сокращению области визуализации остальных данных. Поэтому необходимо искать оптимальный вариант представления данных в Web-странице, в том числе и с использованием фреймов.

Фреймовая структура определяет способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL-адреса, описывающие местонахождение данных. Как правило, на Web-странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно описывает только кадровую структуру экрана.

HTML-документ, включающий фреймы, отличается от HTML-документа без фреймов. Стандартный HTML-документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.

В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих или не показывающих фреймы.

Управляющие элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET. Иначе элемент FRAMESET будет игнорироваться.

При создании HTML-документа с фреймами используются следующие управляющие элементы языка HTML и их атрибуты:

<FRAMESET></ FRAMESET> - документ с фреймами (вместо BODY).

<FRAMESET ROWS=,,,></ FRAMESET> - высота строк в пикселах или %.

<FRAMESET ROWS=*></ FRAMESET> - относительный размер высоты строк.

<FRAMESET COLS=,,,></ FRAMESET> - ширина колонок в пикселах или %.

<FRAMESET COLS=*></ FRAMESET> - относительный размер ширины колонок.

<FRAMESET BORDER=?> - ширина окантовки.

<FRAMESET FRAMEBORDER="yes|no"> - наличие окантовки.

<FRAME> - определить фрейм (содержание отдельного фрейма).

<FRAME SCR="URL"> - документ.

<FRAME NAME="***"|blank| _self|parent| top> - имя фрейма.

<FRAME MARGINWIDTH=?> - ширина границы (правая и левая).

<FRAME MARGINHEIGHT=?> - высота границы (верхняя и нижняя).

Элемент FRAMESET. Этот элемент создает документ с фреймами. Фактически он разделяет окно на прямоугольные области заданного автором размера.

Элемент FRAMESET определяет макет основного окна пользователя в виде совокупности прямоугольных пространств.

Строки и столбцы. Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Установка атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.

Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этих атрибутов, фрейм занимает всю страницу.

Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.