: Элемент вывода

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

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

for

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

form

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

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

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 = parseInt(a.value);
  const bValue = parseInt(b.value);
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();