Клавиша / esc

<output>

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

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

Кратко

Скопировано

Тег <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> можно связать с рейтингом, чтобы увидеть числовой результат.

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

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

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