<output>

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

У тега есть встроенная роль status. Благодаря ей скринридеры и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется. Это делает часть страницы интерактивной или «живой» областью.

        
          
          <form>  <label for="people-num">    Для скольких людей приготовить яичницу:  </label>  <input    type="number"    id="people-num"    name="people"    oninput="eggs.value = (parseInt(people.value) * 2)"  >  <p>Необходимое количество яиц:</p>  <output role="status" name="eggs" for="people-num"></output></form>
          <form>
  <label for="people-num">
    Для скольких людей приготовить яичницу:
  </label>
  <input
    type="number"
    id="people-num"
    name="people"
    oninput="eggs.value = (parseInt(people.value) * 2)"
  >
  <p>Необходимое количество яиц:</p>
  <output role="status" name="eggs" for="people-num"></output>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

Чтобы тег работал во всех браузерах и со всеми скринридерами корректно, рекомендуют явно задавать ему role="status".

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

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

<output> можно связать с рейтингом, чтобы увидеть числовой результат.

Также тег можно использовать для вывода всплывающих уведомлений.