Атрибут hidden тега <output>
Описание
Атрибут hidden скрывает элемент <output> из видимой области страницы. Это булевый атрибут - его наличие (без значения) делает элемент невидимым.
<form oninput="hiddenOutput.value = visibleInput.value">
<input type="text" id="visibleInput" value="Скрытый текст">
<output id="hiddenOutput" hidden></output>
</form>
Особенности работы:
| Состояние | Описание | Как задать |
|---|---|---|
| Скрыт | Элемент не отображается | <output hidden> или <output hidden="hidden"> |
| Видим | Обычное отображение (по умолчанию) | Отсутствие атрибута |
Рекомендации по использованию:
- Используйте для временного скрытия промежуточных результатов
- Не применяйте для важных данных - они остаются в DOM
- Для постоянного скрытия предпочтительнее удаление элемента
- Сочетайте с JavaScript для динамического управления
Пример динамического управления:
<output id="dynamicOutput">Контролируемый вывод</output>
<button onclick="toggleVisibility()">Переключить видимость</button>
<script>
function toggleVisibility() {
const output = document.getElementById('dynamicOutput');
output.hidden = !output.hidden;
}
</script>
Разница с CSS display: none:
| Метод | Семантика | Доступность |
|---|---|---|
hidden атрибут |
Явно указывает на скрытое состояние | Не доступен для скринридеров |
display: none |
Только визуальное скрытие | Не доступен для скринридеров |
visibility: hidden |
Скрывает элемент, сохраняя место | Не доступен для скринридеров |
Особенности доступности:
- Скрытые элементы не доступны для скринридеров
- Не влияют на порядок табуляции
- Значение остается доступным для JavaScript
Примечание: Для важных данных, которые должны быть скрыты от пользователей, но доступны для скриптов, атрибут hidden является предпочтительным решением. Однако для конфиденциальной информации следует использовать серверное управление видимостью.