Тег <output>
Описание
Тег <output> (HTML5) представляет результат вычислений или пользовательских действий. Это семантический элемент, специально созданный для вывода данных, обычно в сочетании с JavaScript.
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>
<form id="calcForm">
<input type="range" id="slider" min="0" max="100" value="50">
<output id="sliderValue" for="slider">50</output>
</form>
<script>
document.getElementById('slider').addEventListener('input', function() {
document.getElementById('sliderValue').value = this.value;
});
</script>
Ключевые особенности:
- Семантически обозначает область вывода данных
- Может использоваться как внутри, так и вне форм
- Поддерживает атрибуты для связи с другими элементами
- По умолчанию имеет inline-отображение
- Автоматически обновляется при изменении связанных элементов
<style>
output {
display: inline-block;
min-width: 50px;
padding: 5px 10px;
margin-left: 10px;
background: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
text-align: center;
}
output.highlight {
background: #ffeeba;
color: #856404;
font-weight: bold;
}
</style>
<form oninput="sum.value = parseInt(x.value) + parseInt(y.value)">
<input type="number" id="x" value="5"> +
<input type="number" id="y" value="7"> =
<output name="sum" for="x y" class="highlight">12</output>
</form>
Рекомендации по использованию:
- Используйте для вывода результатов вычислений
- Сочетайте с JavaScript для динамического обновления
- Указывайте атрибут for для явной связи с элементами ввода
- Для сложного форматирования контента используйте дополнительные элементы внутри
- Не используйте для статического контента - применяйте
<div>или<span>
Тег <output> предоставляет семантически правильный способ отображения результатов вычислений и взаимодействия пользователя с формой, улучшая доступность и структуру документа.
Атрибуты
| for | ID связанных элементов формы |
| form | ID связанной формы |
| name | Имя элемента |
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 10.0 | 10.0 | 9.6 | 4.0 | 5.1 |