Теория урока

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

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

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

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

Пример (html)

<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.

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

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Альтернативный текст и группировка элементов тегом figure в HTMLИзображения в HTML

Структура документа: сестринские элементы в CSSСелекторы в CSS

Группировка элементов в HTML-формах (FIELDSET, LEGEND)Формы в HTML

Обработка исключений (try/except) в PythonЗнакомство с Python

Итоги раздела «Циклы и модуль random в Python»Знакомство с Python

Методы словарей и функция len() в PythonЗнакомство с Python

Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python

Словари в PythonЗнакомство с Python

Селекторы классов и идентификаторовСелекторы в CSS

Предыдущий урок «66. Группировка элементов в HTML-формах (FIELDSET, LEGEND)» Следующий урок «68. Тест по разделу «Формы в HTML»»

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например: сохранение прогресса прохождения уроков, участие в рейтинге среди пользователей, прохождение тестов, просмотр внешних ссылок и скриншотов в некоторых курсах), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

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

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.