HTML / 9. Формы

Элементы множественного выбора

Выключатели и переключатели предоставляют мощное средство для создания вопросов и ответов с множественным выбором, но их использование ведет к построению длинных форм, которые скучно писать и трудно размещать на уже и так загроможденном экране. Тег <select> предлагает две компактные альтернативы – разворачивающееся меню и прокручиваемые списки.

Тег <select>
Помещая список отмеченных тегами <option> элементов в тег формы <select>, вы волшебным образом создаете разворачивающееся меню.

Здесь, как и в других тегах формы, атрибут name обязателен и используется броузером при отправке серверу списка выбора в теге <select>. Если ни один из элементов списка не выбран пользователем, при отправке формы никакие значения серверу не посылаются. В противном случае броузер, передавая серверу данные тега формы <select>, посылает выбранный элемент, включая в него значение атрибута name.

Атрибут multiple
Чтобы допустить выбор нескольких вариантов одновременно, вставьте в тег <select> атрибут multiple. В результате элемент в <select> будетвести себя, как в <input type=checkbox>. Когда форма представлена, броузер собирает все выделенные варианты в один параметрический список, разделив их запятыми, например так:

pets=dog,cat,mouse

Если атрибута multiple нет, возможность выбора ограничивается одним элементом, как в случае переключателя.

Атрибут size
Атрибут size определяет число одновременно отображаемых для пользователя вариантов выбора. Его значением должно быть положительное целое число. Если size не определен, принимается значение 1. При size=1, если атрибута multiple нет, броузер обычно представляет список <select> в виде разворачивающегося меню. Значение атрибута size, превосходящее единицу, или включение в тег атрибута multiple приводят к выводу элемента <select> в виде прокручиваемого списка.

В следующем XHTML-примере мы преобразовали наш вышеприведенный пример выключателя в прокручиваемый список с множественным выбором.

Отметьте также, что атрибут size предписывает броузеру показывать три варианта выбора одновременно.

What pets do you have?
<select name="pets" size="3" multiple="multiple">
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
<option>Fish</option>
</select>

Тег <option>
Используйте тег <option> для определения каждого варианта в элементе формы <select>.
Броузер отображает содержимое тега <option> в качестве элемента разворачивающегося меню или прокручиваемого списка тега <select>, поэтому его содержимое может быть только текстовым, без разметки какого-либо рода.

Атрибут value
Используйте атрибут value для установки значения, которое ассоциируется с вариантом выбора. Если пользователь выбирает вариант, броузер передает ассоциированное с ним значение серверу. Если атрибут value не указан, значением варианта выбора будет содержимое тега <option>. В качестве примера рассмотрим варианты выбора в HTML-исполнении:

<option value=Dog>Dog
<option>Dog

У обоих – одно и то же значение. Первое указано в теге <option> явным образом, второе принято по умолчанию равным содержимому тега: «Dog».

Атрибут selected
По умолчанию ни один из вариантов в теге множественного выбора <select> не является выбранным и поэтому не включается в список параметров, когда пользователь передает форму серверу. Включайте атрибут selected в тег <option>, чтобы изначально принять один или несколько вариантов, от которых пользователь может впоследствии отказаться.
У HTML-версии атрибута selected значений нет, а XHTML-версия имеет значение selected="selected". В теге <select> типа «один из многих», если ни один из элементов не выбран явно, по умолчанию показывается1 первый элемент.

Атрибут label
Обычно при отображении варианта выбора он помечается содержимым тега <option>. Если в теге присутствует атрибут label, его значение используется в качестве метки варианта выбора.

Тег <optgroup>
Меню в формах могут быть весьма большими, оттого их порой трудно отображать и использовать. В этих случаях имеет смысл группировать родственные варианты выбора, представляя их затем пользователю в виде каскада вложенных меню. Введенный в стандарте HTML 4.0 тег <optgroup> предоставляет, хотя и в ограниченной степени, эту возможность для HTML- и XHTML-форм.Применяйте тег <optgroup> только внутри тега <select>, в нем самом могут содержаться только теги <option>. Для каждого тега <optgroup> броузер создает в главном меню тега <select> свое субменю. К примеру, в HTML можно использовать <optgroup> для представления в форме меню штатов, сгруппированных по регионам.

Другие популярные броузеры с графическим пользовательским интерфейсом делают отступы перед пунктами <optgroup> в прокручивающемся меню. Другие броузеры выделяют заголовки групп курсивом и полужирным шрифтом. У тега <optgroup> есть существенный недостаток – он не допускает вложений, что заставляет обходиться только одним уровнем субменю. Это ограничение, предположительно, будет снято в будущей версии XHTML.

Атрибут label
Употребляйте атрибут label для определения названия субменю, представляемого пользователю. Вам следует придерживаться коротких названий и стремиться обеспечить возможность отображения меню на самых разных дисплеях.

Статьи по HTML на эту тему:

Атрибуты формы общего назначения
Группировка элементов формы и обеспечение их надписями
Программирование форм
Эффективные формы

Вернуться в раздел: HTML / 9. Формы