Тег <output> используется для отображения результатов вычислений или действий пользователя на веб-странице. Обычно он используется в сочетании с формой и JavaScript для выполнения вычислений и отображения результатов на странице.

<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>

Атрибуты тега <output>:

  • for — идентификаторы одного или нескольких элементов, с которыми связан элемент <output>.
  • form — идентификатор формы, к которой принадлежит элемент <output>.
  • name — имя элемента <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>

  • чтобы отобразить результат вычисления на веб-странице;
  • чтобы показать пользователю результат поискового запроса или операции фильтрации;
  • для отображения результата игры или викторины;
  • чтобы показать пользователю результат онлайн-викторины;
  • для отображения результата ввода или выбора пользователя.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

  • Тег <output> не следует использовать для представления результата вычисления, критически важного для функционирования веб-страницы, поскольку результат может быть отредактирован пользователем.
  • Тег <output> не поддерживается в Internet Explorer.

Нюансы

  • Если используется атрибут for, атрибут id связанного элемента (элементов) должен быть уникальным на странице.
  • Если атрибут for не используется, элемент <output> должен содержать атрибут value или дочерний текстовый узел для предоставления выходного значения.

Чем заменить тег

  • использовать элемент <div> или <span> с соответствующим стилем и содержимым для отображения вывода;
  • используйте JavaScript для динамического обновления вывода на странице.