Что такое элемент <output> в HTML5?

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

Примеры использования:

1. Связывание с элементами формы:

   <!-- Объявляем input для ввода числа -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Объявляем input для ввода другого числа -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Объявляем output для вывода результата, связывая его с input-ами по id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Получаем элементы input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Получаем элемент output
     const result = document.querySelector('output[name="result"]');
   
     // Функция для обновления результата
     function updateResult() {
       // Выполняем вычисление и обновляем значение output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Добавляем слушателей событий для обновления результата при изменении input-ов
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Первичное обновление результата при загрузке страницы
     updateResult();
   </script>
   

2. Отображение результатов JavaScript:

   <!-- Элемент output для отображения результата -->
   <output id="message"></output>
   
   <script>
     // Получаем элемент output
     const messageOutput = document.getElementById('message');
   
     // Устанавливаем значение output
     messageOutput.value = "Привет, мир!";
     // Или innerText
     messageOutput.innerText = "Привет, мир!";
   </script>
   

Атрибуты:

• for: Список идентификаторов элементов, участвующих в вычислении, результат которого отображается в <output>. Разделяются пробелами.
• name: Имя элемента <output>. Используется для идентификации при отправке формы.

Важные особенности:

• По умолчанию <output> не имеет видимого содержимого до тех пор, пока ему не будет присвоено значение через атрибут value или JavaScript.
• <output> может быть связан с элементами формы, но он сам не является частью отправляемых данных формы, если только ему не присвоено значение через атрибут value. Вместо этого его значение обычно обновляется динамически с помощью JavaScript.
• Семантически он предназначен для вывода результатов, что полезно для доступности и поисковой оптимизации.