Атрибут label тега <option>

Описание

Атрибут label для элемента <option> позволяет задать альтернативный текст, который будет отображаться вместо содержимого элемента в выпадающем списке. Это особенно полезно для сокращения длинных значений при сохранении полного текста в значении опции.

Пример использования:
<select> <option value="full-technical-name-1" label="Короткое имя 1">Полное техническое название опции 1</option> <option value="full-technical-name-2" label="Короткое имя 2">Полное техническое название опции 2</option> </select>

Основные характеристики:

Характеристика Описание
Отображение Заменяет текст option в выпадающем списке
Значение Не влияет на value, отправляемое с формой
Доступность Читается скринридерами вместо основного текста

Рекомендации по использованию:

  • Используйте для сокращения длинных технических названий
  • Сохраняйте смысл при сокращении текста
  • Не используйте для скрытия важной информации
  • Проверяйте отображение в разных браузерах

Пример с группировкой:

<select> <optgroup label="Страны"> <option value="US" label="США">United States of America</option> <option value="UK" label="Великобритания">United Kingdom</option> </optgroup> </select>

Особенности браузеров:

  • Chrome/Firefox: Полная поддержка
  • Safari: Может игнорировать атрибут
  • Edge: Полная поддержка
  • Mobile: Поддержка зависит от устройства

Ограничения:

  • Не поддерживает HTML-разметку
  • Не заменяет элемент <optgroup> для группировки
  • В некоторых случаях может не работать с CSS-стилизацией

Примечание: Атрибут label особенно полезен при работе с техническими данными, где важно сохранить полное значение для обработки, но показать пользователю сокращенный вариант. Для лучшей доступности убедитесь, что сокращенный текст сохраняет основной смысл опции.