<output> – елемент виведення

Елемент HTML <output> (виведення) – це елемент-контейнер, у який сайт або застосунок може вставити результати обчислення або наслідок дії користувача.

Атрибути

Цей елемент приймає глобальні атрибути.

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 = parseInt(a.value);
  const bValue = parseInt(b.value);
  result.value = aValue + bValue;
}
form.addEventListener("input", updateResult);
updateResult();

Результат

Технічний підсумок

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

Сумісність із браузерами