Директивно-диалоговая форма взаимодействия с программной системой Интерфейс командной строки (Command Line Interface - CLI)

Кнопка Submit (Отправить) используется для передачи всех вводимых данных из полей формы.

<INPUT TYPE = "SUBMIT" VALUE = "SUBMIT" NAME = "SUBMIT">

Кнопка RESET (Сброс) используется для очистки  полей формы.

<INPUT TYPE = "RESET" VALUE = "RESET" NAME = "RESET">

Здесь VALUE - надпись на кнопках , NAME - имя, которое  передается сценарию.

Вид кнопок в  броузере

Однострочное  текстовое поле.

Пример.

<INPUT TYPE = "TEXT" NAME = "NAME" VALUE = "TEXT"

SIZE = "20" MAXLENGTH = "30" >

Вид в броузере

Здесь атрибут TYPE = "TEXT" - указывает броузеру, что это однострочное текстовое  поле; VALUE - может содержать некоторый  текст в поле ввода ; NAME - имя, которое передается сценарию в качестве уникального идентификатора; MAXLENGTH - указывает максимальное число символов, которое можно вводить в текстовое поле; SIZE - устанавливает значение ширины поля в символах. Если TYPE = "PASSWORD" все вводимые данные отображаются в виде звездочек.

Вид в броузере

Если TYPE = "HIDDEN", поле данного типа не отображается броузером и не дает пользователю возможность изменять присвоенные данному полю значение. Это поле используется для передачи в CGI-программу статической информации, например пароля или другой информации.

Текстовые блоки. Прокручиваемое текстовое поле.

<TEXTAREA NAME = "INFORMATION" ROWS = "4" COLS = "30" WRAP = "virtual">текст в поле ввода</ TEXTAREA >  

Вид в броузере

Здесь NAME - имя, которое передается сценарию в качестве уникального идентификатора; ROWS - определяет значение высоты поля в  виде количества строк, которые будут  отображаться на экране одновременно (до приведения в действие механизма  строк). COLS - определяет ширину поля в символах. WRAP = " virtual ", в этом случае текст будет заполнятся построчно. По достижении предельного значения длины строки, указанной атрибутом COLS, текст будет переходить на новую строку автоматически. Переход на новую строку возможен также с помощью клавиши "ENTER". Наличие символов между тегами <TEXTAREA ></ TEXTAREA > указывает, что в прокручиваемом поле имеется заранее введенный текст.

Меню. Данный вид поля формы отображается в виде однострочного поля с небольшой стрелкой в правой части. Если щелкнуть по стрелке, развернется все меню (пример 1).

Пример 1.

<SELECT NAME = "NAME" SIZE = "1">

<OPTION SELECTED VALUE = "Pentium3">Компьютеры</OPTION>

<OPTION VALUE = "Pentium2"> Pentium2</OPTION>

<OPTION VALUE = "Pentium3"> Pentium3</OPTION>

<OPTION VALUE = "Pentium4"> Pentium4</OPTION>

<OPTION VALUE = "Atlon"> Atlon</OPTION>

</ SELECT >

Вид в броузере

Пример 2 (применение атрибута MULTIPLE).

<SELECT NAME = "NAME" SIZE = "5" MULTIPLE>

<OPTION SELECTED VALUE = "Pentium3">Компьютеры</OPTION>

<OPTION VALUE = "Pentium2"> Pentium2</OPTION>

<OPTION VALUE = "Pentium3"> Pentium3</OPTION>

<OPTION VALUE = "Pentium4"> Pentium4</OPTION>

<OPTION VALUE = "Atlon"> Atlon</OPTION>

</ SELECT >

Вид в броузере

Здесь атрибут SELECT указывает броузеру, что следует создать окно меню, атрибут NAME используется в качестве идентификатора данного поля ввода данных, атрибут SIZE указывает сколько будет отображаться строк сначала. Тег OPTION используется для объявления каждой опции, которую необходимо поместить в меню. Атрибуту VALUE присваивается идентификатор для конкретного варианта опции. Атрибут MULTIPLE разрешает выбрать более одной опции меню.

Флажки. Данный тип элементов формы позволяет  пользователю выделить несколько опций в наборе флажков.

Пример.

<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX_1" VALUE = "ON">обычный флажок <BR>

<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX_2" VALUE = "ON" CHECKED>выделенный флажок <BR>

<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX_3" VALUE = "ON" DISABLED>выключенный флажок

Вид в броузере

Здесь TYPE = "CHECKBOX" определяет тип элемента формы. Атрибут NAME используется в качестве уникального идентификатора при передаче данной информации сценарию. Если указан атрибут CHECKED для поля INPUT, то он будет иметь статус выбранного. Если указан атрибут DISABLED для поля INPUT, то пользователь не может установить этот флажок. VALUE = "ON" назначается переменной определенной в NAME и затем передается сценарию.

Переключатели. Этот тип элементов формы позволяет пользователю выбрать только одну опцию из предлагаемого набора.

Пример.

<INPUT TYPE = "RADIO" VALUE = "FALSE" NAME = "CHECK" CHECKED>выбран<BR>

<INPUT TYPE = "RADIO" VALUE = "TRUE" NAME = "CHECK">невыбран <BR>

<INPUT TYPE = "RADIO" VALUE = "TRUE" NAME = "CHECK" DISABLED>недоступен

  

Вид в броузере

Здесь TYPE = "RADIO" определяет тип элемента формы. Атрибут NAME используется в качестве уникального идентификатора при  передаче данной информации сценарию. Переключатель автоматически устанавливается, если указан атрибут CHECKED. Если указан атрибут DISABLED для поля INPUT, то пользователь не может установить этот переключатель. Значение в VALUE назначается переменной определенной в NAME и затем передается сценарию.

Задание

1. Составить код HTML-страницы с включением тегов FORM со всеми компонентами, которые формируют интерактивный интерфейс пользователя с программным приложением.

2. Составить  код HTML-страницы с определенной  смысловой нагрузкой, выбрать  компоненты форм, определяющие вводимую информацию.

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

 

Лабораторная  работа № 4 

Тема: «Состав  интерфейса программ, разработанных в

среде визуального программирования»  

Цель  работы:  Изучение элементов интерфейса.   

Краткие теоретические сведения  

Элементы  управления  

Начать  разговор об элементах управления удобно с самого простого, а именно с  кнопок.

Кнопки

Кнопкой называется элемент управления, всё  взаимодействие пользователя с которым  ограничивается одним действием – нажатием. Эта формулировка, кажущаяся бесполезной и примитивной, на самом деле очень важна, поскольку переводит в гордое звание кнопок многие элементы управления, которые как кнопки по большей части не воспринимаются.

Нажатие на  кнопку запускает какое-либо явное действие, поэтому правильнее называть такие кнопки «кнопками прямого действия». С другой стороны, из-за тяжеловесности этого словосочетания им всегда пренебрегают.   

Рис. 1. Всё  это командные кнопки, они же кнопки прямого действия (включая гипертекстовую ссылку справа).  

Чекбоксы  и радиокнопки

Первое, что необходимо сказать про чекбоксы и радиокнопки, это то, что они  являются кнопками отложенного действия, т. е. их нажатие не должно инициировать какое-либо немедленное действие. С их помощью пользователи вводят параметры, которые скажутся после, когда действие будет запущено иными элементами управления. Нарушать это правило опасно, поскольку это серьезно нарушит сложившуюся ментальную модель пользователей. В этом заключается общность чекбоксов и радиокнопок. Теперь поговорим о различиях. Главное различие заключается в том, что группа чекбоксов даёт возможность пользователям выбрать любую комбинацию параметров, радиокнопки же позволяют выбрать только один параметр. Это сближает эти элементы со списками множественного и единственного выбора соответственно.  

Рис. 2. Пример радиокнопок и чекбоксов.  

Из этого  различия проистекают все остальные. Например, в группе не может быть меньше двух радиокнопок (как можно  выбрать что-либо одно из чего-либо одного?). Еще одно следствие заключается в том, что у чекбокса есть три состояния (выбранное, не выбранное, смешанное), а у радиокнопки только два, поскольку смешанного состояния у неё быть просто не может (нельзя совместить взаимоисключающие параметры). Но это было знание вообще. Теперь перейдем к алгоритму его использования. В группе радиокнопок как минимум одна радиокнопка должна быть проставлена по умолчанию. Всякий раз, когда пользователю нужно предоставить выбор между несколькими параметрами, можно использовать либо чекбоксы, либо радиокнопки (или списки, но о них позже). Если параметров больше двух, выбор прост: если параметры можно комбинировать, нужно использовать чекбоксы (например, текст может быть одновременно и жирным и курсивным); если же параметры комбинировать нельзя, нужно использовать радиокнопки (например, текст может быть выровнен или по левому, или по правому краю). Если же параметров всего два и при этом параметры невозможно комбинировать (т. е. либо ДА, либо НЕТ), решение более сложно. Дело в том, что группу из двух радиокнопок часто можно заменить одним чекбоксом.  

Пиктограммы

Уже довольно давно в ПО нет технических  проблем с выводом в списках  пиктограмм отдельных элементов. Однако практически никто этого не делает. Это плохо, ведь пиктограммы обеспечивают существенное повышение субъективной привлекательности интерфейса и сканируются быстрее «голого» текста.  

Раскрывающиеся  списки

Самым простым вариантом списка является раскрывающийся список. Одно существенное достоинство раскрывающихся списков  заключается в том, что малая высота списка позволяет с большой легкостью визуально отображать команды, собираемые из составляющих.   

Списки  единственного выбора

Список  единственного выбора является промежуточным  вариантом между группой радиокнопок и раскрывающимся списком. Он меньше группы радиокнопок с аналогичным числом элементов, но больше раскрывающегося списка. Соответственно, использовать его стоит только в условиях «ленивой экономии» пространства экрана.   

Рис. 3. Список единственного выбора. Обратите внимание, что в ситуациях, когда все

элементы  помещаются в список без пролистывания, список работает в точности как

группа  радиокнопок.  

Списки  множественного выбора

С точки  зрения дизайна интерфейсов, списки множественного выбора интересны, прежде всего, тем, что их фактически нет в Интернете. Технически создать список множественного выбора непроблематично, для этого в HTML есть даже специальный тег.

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

Рис. 4. Список множественного выбора с чекбоксами.   

Комбобоксы

Комбобоксами (combo box), называются гибриды списка с полем ввода: пользователь может выбрать существующий элемент, либо ввести свой.

Комбобоксы  бывают двух видов: раскрывающиеся и  расширенные. Оба типа имеют проблемы.   

Рис. 5. Раскрывающийся комбобокс с установленным фокусом  ввода (слева)