Этот урок посвящен созданию выпадающих списков в 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 обеспечивают широкие возможности настройки.