Создание элементов формы с возможностью выбора одного значения

Задача
Форма должна содержать поле, которое предлагает пользователю много вариантов, но разрешает выбрать только один из них.

Решение
Используйте элементы с возможностью выбора единственного значения из списка (single-pick list element). К ним относятся наборы переключателей, всплывающие меню или прокручиваемые списки.

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

• Список цветов из таблицы cow_color. Их можно получить при помощи такого запроса:

mysql> SELECT color FROM cow_color ORDER BY color;

+---------------+
| color |
+---------------+
| Black |
| Black & White |
| Brown |
| Cream |
| Red |
| Red & White |
| See-Through |
+---------------+

Обратите внимание на то, что некоторые названия цветов содержат символ &, обладающий специальным значением в HTML.


То есть при использовании для элементов списка такие значения необходимо будет кодировать по стандарту HTML. (На самом деле мы будем выполнять кодирование для всех списковых элементов формы, но эти значения наглядно демонстрируют, что кодирование – хорошая привычка.)

• Список допустимых размеров фигурок из столбца size таблицы cow_order.

Столбец относится к типу ENUM, поэтому возможные значения и значения по умолчанию можно получить при помощи предложения SHOW COLUMNS:

mysql> SHOW COLUMNS FROM cow_order LIKE 'size'\G
*************************** 1. row ***************************
Field: size
Type: enum('small','medium','large')
Null: YES
Key:
Default: medium
Extra:

• Список названий и аббревиатур штатов, которые хранятся в таблице states:

mysql> SELECT abbrev, name FROM states ORDER BY name;

+--------+---------------+
| abbrev | name |
+--------+---------------+
| AL | Alabama |
| AK | Alaska |
| AZ | Arizona |
| AR | Arkansas |
| CA | California |
| CO | Colorado |
| CT | Connecticut |
...

Количество значений для выбора во всех этих списках разное: 3 размера, 7 цветов и 50 штатов.


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

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

Переключатели. Группа переключателей состоит из элементов типа radio с одинаковыми атрибутами name. У каждого элемента также есть атрибут value. Отображаемый текст можно указать после тега .

Для того чтобы пометить значение как исходный вариант выбора по умолчанию, добавьте атрибут checked. Следующая группа переключателей выводит возможные размеры фигурок коров, при этом среднее значение (medium) помечено как выбираемое по умолчанию:

small
medium
large

Всплывающие меню.


Всплывающее меню – это список, заключенный между тегами , в котором каждый пункт меню заключен в теги . У каждого элемента