<output>

Элемент для вывода результатов вычислений или действий пользователя.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Тег <output> позволяет выводить результаты вычислений или действий пользователя. Относится к элементам семантической вёрстки.

Пример

Секция статьи "Пример"
        
          
          <form>  <p>Для скольких людей надо приготовить яичницу:</p>  <input type="number" name="peoples" oninput="eggs.value = (parseInt(peoples.value) * 2)">  <p>Необходимое количество яиц:</p>  <output name="eggs"></output></form>
          <form>
  <p>Для скольких людей надо приготовить яичницу:</p>
  <input type="number" name="peoples" oninput="eggs.value = (parseInt(peoples.value) * 2)">
  <p>Необходимое количество яиц:</p>
  <output name="eggs"></output>
</form>

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

  • информация, которую пользователь вводит или изменяет в форме;
  • вывод расчётов по данным, которые указал пользователь (калькулятор, гороскоп и тому подобное).

Как пишется

Секция статьи "Как пишется"

for — значением может быть один или несколько ID, разделённых пробелом. Указывает на связь перечисленных элементов ввода (например, <input>) с элементом <output>.
form — указывается ID формы в этом же документе, с которой связывается поле вывода.
name — имя поля вывода. Используется для подписи результата при отправке формы.

Тег <output> парный. Допустимо вставлять пустой тег в разметку и класть выводимое значение внутрь него при помощи JavaScript.

К тегу <output> также применяются все глобальные атрибуты.

Открыть демо в новой вкладке