HTML тег <output>

Тег <output> является одним из элементов HTML5. Он определяет место для отображения результата вычислений, выполненных скриптом, или результата взаимодействия пользователя с формой. Как правило, он используется совместно с элементами управления <input> внутри <form> и хорошо подходит для отображения результатов в реальном времени — например, промежуточной суммы, цены после скидки или конвертации валют.

Зачем использовать `<output>` вместо `<span>`?

Вычисленное значение можно вывести в обычном <span>, но <output> добавляет семантику и доступность, которых у <span> нет:

Это неявная живая область. По умолчанию <output> имеет роль ARIA status, что делает его вежливой живой областью. При изменении текстового содержимого вспомогательные технологии, такие как программы чтения с экрана, автоматически объявляют новое значение — без необходимости добавлять атрибуты role или aria-live.
Он семантически связан с формой. Браузеры и инструменты рассматривают <output> как настоящий ассоциированный с формой элемент, поэтому связь значения с полями ввода является частью смысла документа, а не только его разметки.
Атрибут for документирует связь. Он перечисляет идентификаторы элементов управления, повлиявших на результат, выражая намерение в разметке.

Благодаря поведению живой области зрячий пользователь видит обновление числа, а пользователь программы чтения с экрана слышит его. <span> даёт только визуальное изменение.

Атрибут `for` и привязка `oninput`

Атрибут for принимает разделённый пробелами список идентификаторов элементов — тех элементов управления, значения которых участвуют в вычислении. Он является сугубо декларативным: он сообщает читателям и инструментам, от каких полей ввода зависит результат. Сам по себе он не выполняет никаких пересчётов.

Пересчёт выполняется средствами JavaScript. Размещение oninput на <form> является распространённым приёмом: событие input всплывает, поэтому единственный обработчик на форме срабатывает при изменении любого элемента управления внутри неё. Внутри этого обработчика вы считываете значения полей и присваиваете результат output.value.

Базовый пример

В примере ниже обработчик oninput на форме синхронизирует <output> при изменении любого из элементов управления. Атрибут for="a b" фиксирует, что результат зависит от полей ввода с идентификаторами a и b.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
      <input type="range" id="a" value="50" /> +
      <input type="number" id="b" value="25" /> =
      <output name="x" for="a b">75</output>
    </form>
  </body>
</html>

Попробуйте сами »

Число 75, написанное между тегами, является значением по умолчанию элемента — значением, отображаемым до любых изменений ввода, а также тем значением, к которому <output> возвращается при сбросе формы.

Привязка с помощью `addEventListener`

Встроенный oninput лаконичен, но смешивает поведение с разметкой. В реальных проектах рекомендуется держать скрипт отдельно и прикреплять обработчик с помощью addEventListener. В этой версии перемножаются два числа, и один обработчик используется повторно для события input формы:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="calc">
      <input type="number" id="e" value="6" /> &times;
      <input type="number" id="f" value="7" /> =
      <output id="result" for="e f">42</output>
    </form>

    <script>
      const form = document.getElementById("calc");
      const result = document.getElementById("result");

      form.addEventListener("input", () => {
        const e = document.getElementById("e").valueAsNumber;
        const f = document.getElementById("f").valueAsNumber;
        result.value = e * f;
      });
    </script>
  </body>
</html>

Попробуйте сами »

Обратите внимание на valueAsNumber: для полей ввода типа number и range он возвращает настоящее число (или NaN при пустом или недопустимом вводе), что позволяет избежать преобразования через parseInt. Если пользователь очищает поле, результат становится NaN; в production-коде следует защититься от этого, если пустое поле должно отображать 0 или пустую строку.

Атрибут `form` (несвязанные элементы output)

По умолчанию <output> принадлежит форме, внутри которой он вложен. Атрибут form позволяет связать output с формой, даже если он находится вне разметки этой формы — это удобно, когда компоновка вынуждает разместить результат в другом месте страницы. Укажите в form значение id целевой формы:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="sum-form" oninput="total.value = Number(a.value) + Number(b.value)">
      <input type="number" id="a" value="10" /> +
      <input type="number" id="b" value="5" />
    </form>

    <p>
      The total is:
      <!-- This output lives outside the form but belongs to it -->
      <output name="total" form="sum-form" for="a b">15</output>
    </p>
  </body>
</html>

Отправляется ли значение вместе с формой?

Нет. Несмотря на то что <output> принимает атрибут name, его значение не передаётся при отправке формы. Атрибут name существует для того, чтобы скрипты могли ссылаться на элемент и для работы с API форм, но не для передачи данных на сервер. Если вам нужен вычисленный результат на сервере, скопируйте его в скрытое поле ввода (<input type="hidden">) или пересчитайте на стороне сервера.

При сбросе формы <output> возвращается к своему значению по умолчанию — текстовому содержимому, присутствующему в HTML, — а не к последнему значению, присвоенному скриптом.

Атрибуты

Атрибут	Значение	Описание
for	element_id	Определяет один или несколько разделённых пробелами идентификаторов элементов, задавая связь между результатом вычисления и элементами, использованными в вычислении.
form	form_id	Определяет одну или несколько форм, которым принадлежит элемент output.
name	name	Определяет имя элемента.

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

Связанные страницы

HTML тег <input> — элементы управления, передающие значения в <output>.
HTML тег <form> — контейнер, с которым ассоциируется <output>.

Практика

Какова основная цель HTML-элемента output?

Он проверяет поля формы перед отправкой.Он отображает результат вычисления и является живой областью, поэтому программы чтения с экрана объявляют об обновлениях.Он работает только в браузере Firefox.Его значение автоматически отправляется на сервер вместе с формой.Он встраивает один сайт внутрь другого.

Зачем использовать <output> вместо <span>?

Атрибут for и привязка oninput