<output> элемент output в HTML

Элемент <output> HTML — это контейнер, в который сайт или приложение может поместить результаты вычисления или действие, выполненное пользователем.

Атрибуты

Этот элемент включает глобальные атрибуты.

for

Разделённый пробелами список id других элементов, указывающий, что эти элементы предоставили входные значения для вычисления (или иным образом повлияли на него).

form

Элемент <form>, с которым следует связать вывод (его владелец формы). Значением этого атрибута должен быть id элемента <form> в том же документе. (Если этот атрибут не задан, элемент <output> связывается со своим родительским элементом <form>, если он есть.)

Этот атрибут позволяет связывать элементы <output> с элементами <form> в любом месте документа, а не только внутри элемента <form>. Он также может переопределить родительский элемент <form>. Имя и содержимое элемента <output> не отправляются при отправке формы.

name

Имя элемента. Используется в API form.elements.

Значение, имя и содержимое элемента <output> НЕ отправляются при отправке формы.

Специальные возможности

Многие браузеры реализуют этот элемент как область aria-live. Благодаря этому вспомогательные технологии объявляют результаты взаимодействия с пользовательским интерфейсом, отображаемые внутри неё, не перемещая фокус с элементов управления, которые приводят к этим результатам.

Примеры

В следующем примере форма содержит ползунок со значением от 0 до 100 и элемент <input>, в который можно ввести второе число. Эти два числа складываются, а результат отображается в элементе <output> каждый раз, когда меняется значение любого из элементов управления.

<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];

function updateResult() {
  const aValue = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();

Результат

Техническая сводка

Спецификации

Совместимость с браузерами