Плавающие фреймы, контейнер
Элементы интерфейса. Тег
Пользовательский интерфейс обеспечивает взаимодействие пользователя с программным обеспечением. Он состоит из элементов, реагирующих на действия пользователя, и программ, обрабатывающих эти действия. К элементам пользовательского интерфейса относятся кнопки, поля ввода данных, раскрывающиеся списки, текстовые области, переключатели и т.д. Пользователь с помощью мыши и/или клавиатуры может изменить их состояние. Подобные воздействия обычно обрабатываются сценариями, написанными на JavaScript (см. далее), VBScript или на других сценарных языках.
Возможности HTML позволяют только передать на сервер для обработки данные, введенные пользователем. Именно эти возможности рассматриваются в данном разделе. Вопросы создания сценариев мы рассмотрим позднее.
Тег предназначен для создания различных элементов интерфейса, тип которых определяется атрибутом type. В зависимости от типа используются различные дополнительные атрибуты.
Атрибуты:
type может принимать следующие значения:
- text - текстовое поле для ввода данных (дополнительные атрибуты здесь: maxlengh - максимальное количество вводимых символов
(по умолчанию не ограничено); size - ширина поля, выраженная в количестве видимых символов; value - значение поля (содержание));
- checkbox - переключатель типа флажок, дополнительные атрибуты: value - значение, ассоциированное с флажком; checked - если указан, то флажок является установленным;
- radio - радиокнопка; с их помощью может быть организован селекторный
переключатель, который представляет собой группу радиокнопок, объединеных общим именем (значение атрибута
name); в этом случае выбрана может быть только одна из них - при выборе
другой ранее выбранная сбросится; дополнительные атрибуты: value -
значение, ассоциированное с селекторным переключателем (радиокнопкой);
checked - если указан, то радиокнопка является установленной;
- file - текстовое поле ввода данных с кнопкой Обзор, открывающей окно Выбор файла, дополнительные атрибуты такие же, как и у поля text;
- password - текстовое поле для ввода пароля - все вводимые данные отображаются звездочками, но при передаче на сервер эти данные не шифруются. Допонительные атрибуты как у поля text;
- button - кнопка; дополнительный атрибут value принимает в качестве значения строку, отображаемую на кнопке;
- submit - кнопка, щелчок на которой приводит к отправке данных, содержащихся в форме, на сервер; дополнительный атрибут value принимает в качестве значения строку, отображаемую на кнопке (по умолчанию - SUBMIT); передача данных происходит при определенных условиях (см. далее);
- image - графическое изображение, работающее так же, как кнопка submit; адрес графического файла указывается через атрибут src;
- reset - кнопка, отменяющая все изменения в форме (возврат к первоначальному виду); дополнительный атрибут value принимает в качестве значения строку, отображаемую на кнопке (по умолчанию - RESET);
- hidden - невидимый элемент; данные, сохраненные там, как атрибут value, не могут быть изменены пользователем; если этот элемент находится в форме, то его данные могут быть переданы на сервер.
name - идентификатор элемента, его использование обязательно, если данные элемента, использованного в составе формы, будут передаваться на сервер;
disabled - делает элемент недоступным пользователю;
accesskey - определяет клавишу быстрого доступа к элементу; значение - буква или цифра, нажатие которой совместно с Alt перенесет фокус на элемент;
tabindex - целое число, определяющее порядок перехода к элементу при нажатии клавиши Tab; обычно указывается там, где важен порядок ввода данных в элементы формы.
Пример, демонстрирующий некоторые элементы, заданные тегом здесь.
Кнопка, раскрывающийся список, текстовая область, блоки элементов
Для создания кнопки можно использовать контейнер . В этот контейнер можно поместить текст, изображение или какой-либо другой элемент, и они будут размещены на кнопке.
Размер кнопки будет выбран автоматически в зависимости от размера помещенных в нее элементов. Если хочется задать конкретный размер кнопки, можно осуществить это через CSS.
Атрибуты:
accesskey - определяет клавишу быстрого доступа к элементу; значение - буква или цифра, нажатие которой совместно с Alt перенесет фокус на элемент;
disabled - делает элемент недоступным пользователю;
datafld - имя столбца внешнего источника данных;
datasrc - идентификатор источника данных (синтаксис - "#id_ist");
dataformatas - строка, определяющая формат данных из внешнего источника.
Для доступа к кнопке с помощью сценариев используется атрибут id - идентификатор элемента, которым обладают все теги.
Кнопка, заданная контейнером может быть использована в форме, но поскольку у этого тега нет атрибутов value и name, его содержимое не может быть отправлено на сервер с помощью кнопки типа submit.
Для создания списка, из которого можно выбрать элемент, используется контейнер