Тег HTML `<output>`

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

Вычисления с помощью тега `<output>`

Для использования тега <output> требуются базовые знания JavaScript. Укажите тип <input> как number, чтобы сообщить форме, что пользователь вводит целые числа. Если пользователь введет нечисловые данные, скрипт может присвоить выводу значение NaN (не число) в зависимости от логики вычислений. Тег <output> широко поддерживается во всех современных браузерах.

Синтаксис

Тег <output> является парным. Содержимое записывается между открывающим (<output>) и закрывающим (</output>) тегами.

Пример использования тега HTML `<output>` с двумя элементами `<form>`:

Пример тега HTML <output>:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="50" />100 +
      <input type="number" id="b" value="25" /> =
      <output name="x" for="a b"></output>
    </form>
    <p>Multiplication:</p>
    <form oninput="d.value = e.valueAsNumber * f.valueAsNumber">
      <input type="number" id="e" /> *
      <input type="number" id="f" /> =
      <output name="d" for="e f"> </output>
    </form>
  </body>
</html>

Try it Yourself »

Результат

пример тега output

Пример использования тега HTML `<output>` с одним элементом `<form>`:

Еще один пример тега HTML <output>:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
      <div>
        <input type="number" name="a" value="30" /> +
        <input type="range" name="b" value="0" /> +
        <input type="number" name="c" value="25" />
      </div>
      The result is:
      <output name="result"></output>
    </form>
  </body>
</html>

Try it Yourself »

Атрибуты

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

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

Практика

Какова основная цель тега HTML <output>?

Тег HTML <output> используется для валидации форм.Тег HTML <output> используется для отображения результата вычисления.Тег HTML <output> работает только в браузере Firefox.Тег HTML <output> используется для вывода данных из скрипта.Тег HTML <output> используется для встраивания одного веб-сайта в другой

Тег HTML <output> ​

Вычисления с помощью тега <output> ​

Синтаксис ​

Пример использования тега HTML <output> с двумя элементами <form>: ​

Результат ​

Пример использования тега HTML <output> с одним элементом <form>: ​

Атрибуты ​

Практика ​