HTML тег `<output>`

Значение и применение

Тег <output> определяет область, в которую выводится результат вычислений или действий пользователя (обычно рассчитывается с помощью скриптов). Он может принадлежать определенной форме (элемент <form>), располагаясь внутри нее в качестве дочернего элемента, или ссылаться на неё (атрибут form).

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах не позднее 2018 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.output
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`output`	✓10	✓≤18	✓4	✓11	✓7	✓18	✓4	✓11	✓7	✓1.0	✓4.4	✓7
`for`	✓10	✓≤18	✓4	✓11	✓7	✓18	✓4	✓11	✓7	✓1.0	✓4.4	✓7
`form`	✓10	✓≤18	✓4	✓11	✓7	✓18	✓4	✓11	✓7	✓1.0	✓4.4	✓7
`name`	✓10	✓≤18	✓4	✓11	✓7	✓18	✓4	✓11	✓7	✓1.0	✓4.4	✓7
Ещё 3 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

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

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

Вычисления с output

Нажмите ▶. Измените разметку во вкладке HTML и сравните результат.

index.html

HTML

<p>Сложение :</p>
<form>
  <input type="number" id="a" /> + <input type="number" id="b" /> =
  <mark><output name="c" for="a b"></output></mark>
</form>
<p>Умножение:</p>
<form>
  <input type="number" id="e" /> * <input type="number" id="f" /> =
  <mark><output name="d" for="e f"></output></mark>
</form>
<p>Деление:</p>
<form>
  <input type="number" id="g" step="10" /> / <input type="number" id="h" step="5" /> =
  <mark><output name="z" for="g h"></output></mark>
</form>

main.js

JavaScript

document.querySelectorAll('form')[0].addEventListener('input', function () {
    this.elements.namedItem('c').value =
        this.elements.namedItem('a').valueAsNumber + this.elements.namedItem('b').valueAsNumber
})
document.querySelectorAll('form')[1].addEventListener('input', function () {
    this.elements.namedItem('d').value =
        this.elements.namedItem('e').valueAsNumber * this.elements.namedItem('f').valueAsNumber
})
document.querySelectorAll('form')[2].addEventListener('input', function () {
    this.elements.namedItem('z').value =
        this.elements.namedItem('g').valueAsNumber / this.elements.namedItem('h').valueAsNumber
})

Значение CSS по умолчанию

CSS

output {
display: inline;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <output>