Атрибут hidden тега <select>
Описание
Атрибут hidden скрывает элемент <select> на странице. Элемент не отображается, но остается в DOM-дереве. В отличие от display: none, это семантический способ указать, что элемент в данный момент не должен быть виден пользователю.
Пример использования:
<select hidden>
<option>Скрытый список</option>
</select>
<button onclick="toggleSelect()">Показать/скрыть</button>
<script>
function toggleSelect() {
const select = document.querySelector('select');
select.hidden = !select.hidden;
}
</script>
Основные особенности:
- Доступность: Скрытые элементы игнорируются скринридерами
- Семантика: Явно указывает на временно неактивный элемент
- DOM-присутствие: Элемент остается в документе
- Стилизация: Эквивалентен
display: none
Сравнение методов скрытия:
| Метод | Видимость | DOM | Доступность |
|---|---|---|---|
hidden |
Не виден | Присутствует | Игнорируется |
display: none |
Не виден | Присутствует | Игнорируется |
visibility: hidden |
Не виден, но место сохраняется | Присутствует | Может обнаруживаться |
disabled |
Виден, но неактивен | Присутствует | Обнаруживается |
Рекомендации по использованию:
- Используйте для элементов, которые могут понадобиться позже
- Для условного отображения в зависимости от выбора пользователя
- В сочетании с JavaScript для динамического управления
- Когда нужно сохранить состояние элемента при скрытии
Ограничения:
- Не отправляется с формой (в отличие от
disabled) - Не поддерживает CSS-анимации
- В старых браузерах может потребоваться полифил
Совместимость с CSS:
<style>
select[hidden] {
/* Можно добавить дополнительные стили */
position: absolute;
left: -9999px;
}
</style>
<select hidden>
<option>Стилизованное скрытие</option>
</select>