Поле со списком

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

Поле со списком создается следующим образом.

<SELECT>

<OPTION>Пункт 1</OPTION>

<OPTION>Пункт 2</OPTION>

<OPTION>Пункт 3</OPTION>

</select>

Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра SIZE тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.

Атрибуты тега <SELECT>

Рассмотрим атрибуты тега <SELECT>, с помощью которых можно изменять вид и представление списка:

· MULTIPLE. Наличие данного атрибута сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от использования атрибута SIZE. Если он отсутствует, то высота списка равна количеству пунктов, если значение SIZE меньше числа пунктов, то появляется вертикальная полоса прокрутки.

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

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

· ID определяет уникальный идентификатор элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

· SIZE устанавливает высоту списка. Если значение атрибута SIZE равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.

Атрибуты тега <OPTION>

Тег <OPTION> также имеет атрибуты, влияющие на вид списка, они представлены далее.

· SELECTED делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен атрибут MULTIPLE, то можно выделять более одного пункта.

· VALUE определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается атрибутом ID тега <SELECT>, а значение — атрибутом VALUE выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.

Создание списка показано на рис. 2.30.

Рис. 2.30. Использование списка

В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.