Атрибут id тега <select>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <select>. Этот идентификатор используется для:
- Связки с элементами
<label>через атрибутfor - Обращения к элементу в JavaScript и CSS
- Якорных ссылок внутри страницы
Пример использования:
<label for="country-select">Страна:</label>
<select id="country-select" name="country">
<option value="ru">Россия</option>
<option value="us">США</option>
</select>
Основные правила:
- Уникальность: ID должен быть единственным в пределах документа
- Синтаксис: должен начинаться с буквы, может содержать цифры, дефисы и подчёркивания
- Регистр: чувствителен к регистру (mySelect ≠ myselect)
- Доступность: улучшает взаимодействие с программами чтения экрана
Использование в CSS:
<style>
#special-select {
width: 250px;
padding: 8px;
border: 2px solid #4a90e2;
background-color: #f8f9fa;
}
</style>
<select id="special-select">
<option>Специальный стиль</option>
</select>
Использование в JavaScript:
<select id="price-range">
<option value="low">До 1000 руб.</option>
<option value="medium">1000-5000 руб.</option>
</select>
<script>
const priceSelect = document.getElementById('price-range');
priceSelect.addEventListener('change', function() {
console.log('Выбран диапазон:', this.value);
});
</script>
Рекомендации по именованию:
| Паттерн | Пример | Когда использовать |
|---|---|---|
| По функции | language-select |
Для основных элементов интерфейса |
| По содержимому | country-filter |
Для фильтров и сортировок |
| Префиксный | user-profile-role |
В сложных формах |
Лучшие практики:
- Всегда связывайте
<select>с<label> - Используйте осмысленные имена вместо абстрактных (id1, id2)
- Избегайте кириллицы и спецсимволов в именах
- Для стилизации предпочитайте классы, а не ID
- Проверяйте уникальность ID в документе
Особенности:
- Элемент с ID автоматически создаёт глобальную переменную в браузере
- Может использоваться как якорь:
#section-config - В отличие от класса, к элементу можно обратиться напрямую по ID через JavaScript
- Высокая специфичность в CSS (0100)