Какво е елементът <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.
• Семантически е предназначен за изход на резултати, което е полезно за достъпност и оптимизация за търсачки.