Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023