Атрибут id тега <optgroup>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <optgroup>, который может использоваться для:
- Стилизации через CSS
- Обращения к группе в JavaScript
- Связывания с другими элементами через
<label>
<select>
<optgroup id="fruits-group" label="Фрукты">
<option>Яблоко</option>
<option>Банан</option>
</optgroup>
</select>
Основные правила:
| Правило | Пример | Некорректный пример |
|---|---|---|
| Уникальность на странице | id="category-group" |
Повторение id |
| Без пробелов | id="productGroup" |
id="product group" |
| Чувствительность к регистру | id="Group1" ≠ id="group1" |
- |
Использование в JavaScript:
<select>
<optgroup id="colors-group" label="Цвета">
<option>Красный</option>
</optgroup>
</select>
<script>
const colorsGroup = document.getElementById('colors-group');
colorsGroup.style.fontWeight = 'bold';
</script>
Связь с элементом <label>:
<label for="cars-group">Выберите автомобиль:</label>
<select>
<optgroup id="cars-group" label="Марки">
<option>Toyota</option>
</optgroup>
</select>
Рекомендации по использованию:
- Используйте осмысленные имена, отражающие назначение группы
- Избегайте общих имен типа "group1", "group2"
- Придерживайтесь единого стиля именования (camelCase или kebab-case)
- Для стилизации нескольких групп используйте классы
Ограничения:
- Не поддерживает пробелы и спецсимволы (кроме дефиса и подчёркивания)
- Не должен начинаться с цифры
- В некоторых браузерах может стать глобальной переменной
Примечание: Хотя атрибут id полезен для работы с отдельными группами опций, для стилизации лучше использовать классы. Идентификаторы следует применять, когда требуется точное обращение к конкретному элементу в JavaScript или для связывания с другими элементами формы.