<output>
- 25 января 2023
Тег <output>
используется для отображения результатов вычислений или действий пользователя на веб-странице. Обычно он используется в сочетании с формой и JavaScript для выполнения вычислений и отображения результатов на странице.
Синтаксис тега <output>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0">> +
<input type="number" id="b" value="0">> =
<output name="result" for="a b"></output>
</form>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <output>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Простой расчет:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0">> +
<input type="number" id="b" value="0">> =
<output name="result" for="a b"></output>
</form>
Отображение пользовательского ввода:
<form oninput="output.value = input.value">
<label for="input">Enter some text:</label>
<input type="text" id="input">>
<output name="output"></output>
</form>
Для чего использовать тег <output>
- чтобы отобразить результат вычисления на веб-странице;
- чтобы показать пользователю результат поискового запроса или операции фильтрации;
- для отображения результата игры или викторины;
- чтобы показать пользователю результат онлайн-викторины;
- для отображения результата ввода или выбора пользователя.
Атрибуты тега <output>
for
— идентификаторы одного или нескольких элементов, с которыми связан элемент <output>
.
form
— идентификатор формы, к которой принадлежит элемент <output>
.
name
— имя элемента <output>
.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Тег
<output>
не следует использовать для представления результата вычисления, критически важного для функционирования веб-страницы, поскольку результат может быть отредактирован пользователем. - Тег
<output>
не поддерживается в Internet Explorer.
Нюансы
- Если используется атрибут
for
, атрибутid
связанного элемента (элементов) должен быть уникальным на странице. - Если атрибут
for
не используется, элемент<output>
должен содержать атрибутvalue
или дочерний текстовый узел для предоставления выходного значения.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
<div>
или<span>
можно использовать для отображения результатов вычислений или действий пользователя, но они не имеют семантического значения тега<output>
.<progress>
можно использовать для отображения хода выполнения задачи или операции, но он не подходит для отображения результатов вычислений.
Чем заменить тег
- использовать элемент
<div>
или<span>
с соответствующим стилем и содержимым для отображения вывода; - используйте JavaScript для динамического обновления вывода на странице.
Актуальность
Тег <output>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023