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

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

Кстати, для логической группировки вариантов внутри <select> можно использовать списки элементов <optgroup>.

autofocus:

Этот параметр заставляет элемент сразу «взять фокус» на себя при загрузке страницы, что очень удобно для быстрого старта взаимодействия. Допустимые значения логического атрибута autofocus:

select autofocus select autofocus="autofocus" select autofocus=""

Примечание: к сожалению, атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.

disabled:

Позволяет сделать элемент «неприкасаемым» для пользователя. В таком состоянии он становится неактивным, и никакие попытки взаимодействия с ним будут проигнорированы. Возможные значения логического атрибута disabled:

select disabled select disabled="disabled" select disabled=""

form:

Связывает элемент с конкретной формой. В качестве значения выступает идентификатор элемента <form>. Это гибкое решение! Оно дает свободу размещать <select> в любом месте HTML-документа, а не только внутри тега формы.

Примечание: атрибут form не поддерживается в Firefox.

multiple:

Разрешает выбор нескольких вариантов сразу - отличный функционал для сложных форм. Способ удержания клавиши зависит от вашей операционной системы:

• Windows: зажмите клавишу CTRL, чтобы выделять несколько пунктов.
• Mac: используйте клавишу CMD для многократного выбора.

Возможные значения логического атрибута multiple:

select multiple select multiple="multiple" select multiple=""

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

name:

Задайте имя вашему списку! Это критически важно для корректной отправки данных на сервер или для удобного обращения к элементу через JavaScript.

size:

Определяет, сколько вариантов будет видно «глазами» пользователя. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы вы не потерялись в большом списке.

Помимо специфичных параметров, тег <select> также поддерживает и глобальные атрибуты HTML.

select option value="volvo"Volvo/option option value="saab"Saab/option option value="opel"Opel/option option value="audi"Audi/option /select