Codebra
25 января 2026 в 16:16

Урок 50. Группировка элементов списка в HTML (OPTGROUP)

Как группировать элементы списка SELECT в HTML? Онлайн-курсы по HTML.
📝

Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.

📋 Задание
  • Допишите все остальные месяцы года. Писать нужно в правильном порядке. Используйте тег <optgroup>, чтобы разбить месяцы на сезоны. Значение у каждого месяца должно быть вида sномер_месяца, то есть у февраля значение (value = "s2")

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

Иногда требуется разбить список на отдельные группы, не связанные между собой. Для этих целей был придуман тег <optgroup>. Чтобы озаглавить группу, используется атрибут label.

Тег <optgroup> применяется очень просто, поэтому рассмотрим сразу пример:

<select>
    <optgroup label = "Лето">
        <option value = "s6">Июнь</option>
        <option value = "s7">Июль</option>
        <option value = "s8">Август</option>
    </optgroup>
    <optgroup label = "Зима">
        <option value = "s12">Декабрь</option>
        <option value = "s1">Январь</option>
        <option value = "s2">Февраль</option>
    </optgroup>
</select>

Теперь выполните практику и переходите к следующему уроку.

📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.