Тег optgroup в HTML: что это такое?

Синтаксис тега optgroup

Базовый синтаксис тега optgroup выглядит следующим образом:

<select>
  <optgroup label="Группа 1">
    <option value="1">Опция 1</option>
    <option value="2">Опция 2</option>
  </optgroup>
  <optgroup label="Группа 2">
    <option value="3">Опция 3</option>
    <option value="4">Опция 4</option>
  </optgroup>
</select>

Атрибуты тега optgroup

Тег optgroup поддерживает только один атрибут:

• label - задает текст, который будет отображаться в заголовке группы.

Примеры использования тега optgroup

<select>
  <optgroup label="Фрукты">
    <option value="apple">Яблоко</option>
    <option value="banana">Банан</option>
  </optgroup>
  <optgroup label="Овощи">
    <option value="carrot">Морковь</option>
    <option value="broccoli">Брокколи</option>
  </optgroup>
</select>

Советы по использованию тега optgroup

• Используйте тег optgroup для улучшения навигации в длинных списках.
• Старайтесь группировать элементы логически, чтобы пользователи могли быстро находить нужные опции.

Часто задаваемые вопросы (FAQ)

1 Для чего используется тег optgroup?

Тег optgroup используется для группировки связанных элементов <option> в выпадающем списке <select>.

2 Можно ли использовать несколько тегов optgroup в одном списке?

Да, вы можете использовать несколько тегов optgroup для организации элементов списка.

Заключение

Тег optgroup является полезным инструментом для организации элементов в выпадающем списке, что улучшает пользовательский опыт. Правильное использование этого тега помогает сделать интерфейс более интуитивно понятным.

Для получения дополнительной информации о теге optgroup, рекомендуем ознакомиться с официальной документацией на MDN.