Поля ввода информации имеют множество типов Поле ввода многострочного текста Описание меню Описание элемента меню

Назначение

Элементы реализации интерфейсов в HTML

ЖЫ

Рис. 7.4. Пример использования элемента img

Для встраивания в документ графических образов использу­ются элементы img и fig.

img — элемент встраивания в текст графического образа, на­пример:

<IMG SRC="http://polyn.net.kiae.su/gif/sarclast. gif"

ALT="Sarcofagus.Winter, 1997">.

В данном примере атрибут src определяет адрес графическо­го объекта, который надо встроить в документ, а атрибут alt предназначен для отображения в интерфейсах, которые не под­держивают встраиваемую графику (типа Lynx). В последнем слу­чае вместо картинки будет отображено содержание атрибута ALT.

img можно использовать внутри гипертекстовой ссылки:

<А HREF="doc.html"XIMGSRC="icon.gif" ALIGN=RIGHT></A>

Help
Netscape - [A Review of the HTML* Document Format}

В этом случае весь рисунок целиком используется как иден­тификатор гипертекстовой ссылки. Кроме того, в данном приме­
ре используется атрибут элемента img — align, который может принимать значения top, middle, bottom, left, right и опре­деляет, где относительно других символов текста в строке будет располагаться рисунок.

Элемент fig (развитие IMG) введен в стандарт языка для улучшения отображения графической информации и использо­вания ее для разработки гипертекстовых баз данных.

is index — элемент заголовка документа — определяет ис­пользование HTML-документа для ввода запроса на поиск по ключевым словам:

<ISINDEX HREF="http://polyn.net.kiae.su/egi-bin/search"

PROMPT^"Enter Keywords:">

В приведенном примере атрибут href определяет адрес про­граммы обработки запроса, а атрибут prompt — содержание приглашения.

form — средства встраивания элементов интерфейса в тело документа (механизм форм заполнения — fill-out forms) — впервые были подробно описаны в инструкциях по использова­нию сервера NCSA. Посредством форм осуществляется передача параметров внешним программам, которые вызываются серве­ром, что сделало WWW универсальным интерфейсом ко всем ре­сурсам сети.

Некоторые вложенные в form элементы HTML даны в табл. 7.1.

Таблица7. /. Назначение элементов FORM

Элемент INPUT TEXTAREA SELECT OPTION

input — наиболее универсальный из всех элементов формы. Способ его отображения определяется атрибутом type, который может принимать значения: text, password, checkbox, radio, range, scribble, file, hidden, submit, reset, image.

Атрибут name определяет идентификатор поля. Данный ат­рибут не отображается, но его значение передается обрабаты­вающей программе.

Атрибут value определяет значение поля. Данное значение передается вслед за именем поля. Если разработчик указал этот атрибут в тексте документа, то это будет значение по умолчанию.

Атрибут disable защищает значение поля формы от изме­нения пользователем. Часто это бывает полезным при много­кратных обращениях к внешним базам данных и при коррекции запросов.

Атрибут error определяет текст сообщения об ошибке при неправильном вводе.

Атрибут checked используется в полях типа checkbox и radiobutton. Он определяет состояние данного поля (выбрано/не выбрано).

Атрибут size определяет размер видимой части поля ввода. Для непропорциональных шрифтов он равен числу символов, для пропорциональных шрифтов — числу типографских интер­валов.

Атрибут maxlength определяет максимальное число симво­лов, которое можно ввести в текстовое поле.

Атрибуты min и мах определяют диапазон разрешенных чи­словых значений для поля ввода.

Атрибут src используется для задания адреса графического объекта, который можно использовать в поле ввода.

Атрибут MD задает контрольную сумму для графики.

Атрибут align определяет выравнивание текста.

Приведем фрагмент HTML-документа с элементами груп­пы form и их интерпретацию Web-обозревателем Konqueror (рис. 7.5, /):

<FORM>

<Н2>Ниже приведен список примеров полей ввода:</Н2>

<BR> Простое текстовое поле: CINPUT NAME="testl"

VALUE="ABCDE" TYPE="text"><BR>

Поле типа checkbox: CINPUT NAME="test2" TYPE="checkbox"

CHECKEDXBR>

Поле типа radiobutton: CINPUT NAME="test3"

TYP-E=" radio " ><BR>

Поле типа password: CINPUT NAME-"test4"

TYPE="password"><BR>

В form2.htm -Konqueror
I Адрес Оравка Вид Прейти Закладки Сдшис Настройка Окно Справка 1
|: Е> Адрес: [F5/media<GOGAJGB/__________ SNIMKI/htm/1orm2htm j-jfJjj||G] F'ct €t q. o о о ** « а я a % №
  Ниже приведен список примеров полей ввода: I
Простое текстовое поле: [ABODE —^ Поле типа checkbox: И / Поле типа radiobutton: ® /' Поле типа password: (**"* I / Невидимое поле: у/ Кнопка Submit: j Subm* ] /' Кнопка Reset | Raset j / ^ 2 3  
  т Графическая кнопка: ■ЯШЗЁЯ " /  
  ' 1 .................................................................................................................................... S ........................................................ гг Введем сюда текст ^ (Элемент TEXTAREA) jT [input / р  
    INPUT  
    TEXTAREA - SELECT  
| ||в|-Страница загружена    

 

Рис. 7.5. Интерпретация элементов интерфейса: 1 — группа form; 2 — элемент textarea; 3 — элемент select

Невидимое поле: CINPUT NAME="test5" TYPE="hidden" VALUE="de fau11">CBR>

Кнопка Submit: CINPUT NAME="submit" VALUE="Submit" TYPE="submit">cBR>

Кнопка Reset: CINPUT NAME="reset" VALUE="Reset" TYPE="reset">CBR>

Графическая кнопка: CINPUT NAME="graph" VALUE="default"

SRC="office.bmp" TYPE="image"><BR>

C/FORM>

В первой строке приведено простое текстовое поле с введен­ным в него значением по умолчанию. Это значение может быть изменено пользователем. В следующей строке отображено поле типа checkbox. Крестик в поле показывает, что оно выбрано (значение по умолчанию установлено атрибутом checked). Ниже приведено поле radiobutton в виде кружка (так как в нем нет черной точки, это поле не выбрано); в поле password введен па­роль, который не отображается, а заменяется звездочками; неви­димое поле не отображается, а предназначено для реализации диалога с удаленными программами. Кнопка Submit активирует передачу параметров серверу, в то время как Reset восстанавли­вает значения полей формы по умолчанию. Графическая кнопка аналогична кнопке Submit, только она передает также значения координат графического образа.

textarea предназначен для ввода больших многострочных текстовых данных; это связано с ограничениями на длину сим­вольной строки. Элемент имеет два атрибута: rows — число ви­димых строк и cols — число видимых символов в строке (рис. 7.5, 2):

<TEXTAREA NAME="multi" ROWS=2 CQLS=4 0> Введем сюда текст Элемент TEXTAREA) </TEXTAREA>

Элементы selectи option предназначены для организации меню, которое может быть падающим, множественным и графи­ческим: в падающем меню можно выбрать только один элемент; в множественном — несколько; графическое меню предназначе­но для выбора по графическому образу. Приведем пример орга­низации меню (рис. 7.5, 3):

<SELECT NAME="Choice"> <OPTION> INPUT <OPTION> TEXTAREA <OPTION> SELECT </SELECT>

В данном случае при отображении HTML-документа будет создано падающее меню с тремя элементами. Пользователь мо­жет выбрать один из этих элементов в качестве значения поля.