Список <select>

Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько. Ограничивается тегами <select>…</select>.

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

autofocus

Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:

<select autofocus>...</select>
<select autofocus="">...</select>
<select autofocus="autofocus">...</select>

disabled

Блокирует выбор из списка. Значение можно задать тремя способами:

<select disabled>...</select>
<select disabled="">...</select>
<select disabled="disabled">...</select>

multiple

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

name

Имя списка. Обязательный атрибут.

required

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

size

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

Для тега <select> также доступны общие атрибуты и атрибуты обработки событий.

Пункт списка <option>

Каждый пункт списка ограничивается тегами <option>...</option>. Закрывающий тег необязателен.

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

disabled

Блокирует выбор пункта списка.

label

Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега <option> (в Firefox не работает).

selected

Пункт списка, выбранный по умолчанию.

value

Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега <option>.

Любые теги,помещенные внутри тега option, будут проигнорированы.

Для тега <option> также доступны общие атрибуты и атрибуты обработки событий.

Пример выпадающего списка

<form>
    <select name="s1">
        <option value="tea">Чай</option>
        <option value="coffee">Кофе</option>
        <option value="milk">Молоко</option>
        <option value="ham">Ветчина</option>
        <option value="cheese">Сыр</option>
    </select>
</form>

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

<form>
    <select name="s2" size="5" multiple>
        <option value ="tea">Чай</option>
        <option value ="coffee" selected>Кофе</option>
        <option value ="milk">Молоко</option>
        <option value ="ham">Ветчина</option>
        <option value ="cheese">Сыр</option>
    </select>
</form>

Группа пунктов списка <optgroup>

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

Для тега <optgroup> доступны общие атрибуты и атрибуты обработки событий.

Пример группировки пунктов списка

<form>
    <select name="s3" size="10">
        <optgroup label="HTML">
            <option value="h3">HTML3.2</option>
            <option value="h4">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

Более того, для дополнительной наглядности каждую группу с помощью CSS можно раскрасить в свой цвет.

Пример выделения цветом групп пунктов списка

<form>
    <select name="s4" size="10">
        <optgroup label="HTML" style="background-color: rgba(0, 132, 0, 0.5)">
            <option value="h3">HTML3.2</option>
            <option value="h4">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS" style="background-color: rgba(255, 132, 0, 0.5)">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>