Šta je element <output> u HTML5?

Елемент <output> се користи за приказ показивања резултата израчунa, који се обично извршава на страни клијента.

Примери коришћења:

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-а.
• Семантички, намењен је за приказ резултата, што је корисно за приступачност и оптимизацију за претраживаче.