HTML5 <select>: Выпадающие списки с примерами

Этот урок посвящен созданию выпадающих списков в HTML5, позволяющих пользователю выбирать один или несколько вариантов.

Создание выпадающего списка

Для создания выпадающего списка используется парный тег <select>. Закрывающий тег — </select>. Начальный код создаёт пустой, нефункциональный список.

<select>
</select>

Добавление вариантов

Для добавления вариантов используется тег <option>, вложенный в <select>.

<select>
  <option>BMW</option>
  <option>Audi</option>
  <option>Mercedes</option>
</select>

Результат: выпадающий список с вариантами BMW, Audi и Mercedes. По умолчанию выбран первый вариант.

Установка значения по умолчанию

Атрибут selected внутри тега <option> устанавливает значение по умолчанию.

<select>
  <option>BMW</option>
  <option>Audi</option>
  <option selected>Mercedes</option>
</select>

Теперь по умолчанию будет выбран вариант «Mercedes».

Отключение вариантов

Атрибут disabled отключает вариант, делая его невыбираемым:

<select>
  <option selected disabled>Первый вариант</option>
  <option>BMW</option>
  <option>Audi</option>
  <option>Mercedes</option>
</select>

Первый вариант неактивен и не может быть выбран, даже несмотря на атрибут selected.

Выбор множества вариантов

Атрибут multiple в теге <select> позволяет выбирать несколько вариантов.

<select multiple>
  <option>BMW</option>
  <option>Audi</option>
  <option>Mercedes</option>
</select>

Выбор осуществляется с помощью клавиш Ctrl или Shift.

Ограничение видимости и предварительный выбор

Атрибут size определяет количество видимых вариантов. Атрибут selected может использоваться для предварительного выбора нескольких вариантов в списке multiple.

<select multiple size="2" >
  <option>BMW</option>
  <option selected>Audi</option>
  <option selected>Mercedes</option>
  <option>Opel</option>
</select>

Здесь видны два варианта, Audi и Mercedes выбраны по умолчанию.

Теги <select> и <option> позволяют создавать гибкие выпадающие списки. Атрибуты selected, disabled, multiple и size обеспечивают широкие возможности настройки.

Что будем искать? Например,программа