<output> - HTML-елемент для виводу результату

HTML-елемент <output> представляє собою результат обчислення або дії користувача. Зазвичай він використовується у формах для відображення динамічних результатів.

Елемент <output> дозволяє відображати результати обчислень, виконаних на стороні клієнта за допомогою JavaScript, безпосередньо у формі. Це робить інтерфейс більш інтерактивним та зручним для користувача.

Тег <output> приклад використання в HTML

HTML
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="a" value="50"> +
  <input type="number" name="b" value="50"> =
  <output name="result" for="a b">100</output>
</form>

Атрибути

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

for: Список ID елементів, розділених пробілами, які брали участь у обчисленні. Це допомагає встановити явний зв’язок між полями вводу та результатом, що є важливим для доступності.
form: Атрибут id форми, до якої належить цей елемент <output>. Дозволяє розміщувати елемент поза тегом <form>.
name: Ім’я елемента. Значення елемента <output> надсилається разом з формою.

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, відчутний контент.
Дозволений вміст	Фразовий контент.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий контент.
Роль ARIA	`status`
DOM інтерфейс	`HTMLOutputElement`

Приклади використання

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="10"> +
  <input type="number" id="b" name="b" value="10"> =
  <output name="result" for="a b">20</output>
</form>

<form oninput="result.value = price.value * quantity.value">
  <label for="price">Ціна:</label>
  <input type="range" id="price" name="price" value="50" min="1" max="100">
  <span>50</span>
  <br>
  <label for="quantity">Кількість:</label>
  <input type="number" id="quantity" name="quantity" value="2" min="1">
  <br>
  <p>Загальна вартість: <output name="result" for="price quantity">100</output></p>
</form>

const priceInput = document.querySelector("#price");
const priceValue = document.querySelector("span");

priceInput.addEventListener("input", (event) => {
  priceValue.textContent = event.target.value;
});

Стилі за замовчуванням

CSS
output {
  display: inline;
}

Підтримка браузерів



`<output>`
`for`
`form`
`name`