<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 для динамического обновления вывода на странице.