HTML5-də <output> elementi nədir?

<output> elementi, adətən, müştəri tərəfində yerinə yetirilmiş hesablamaların nəticələrini göstərmək üçün istifadə olunur.

İstifadə nümunələri:

1. Form elementləri ilə əlaqələndirmə:

   <!-- Rəqəm daxil etmək üçün input elan edirik -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Başqa bir rəqəm daxil etmək üçün input elan edirik -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Nəticəni göstərmək üçün output elan edirik, id ilə inputlara bağlanır -->
   <output name="result" for="a b"></output>
   
   <script>
     // Elementləri əldə edirik
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output elementini əldə edirik
     const result = document.querySelector('output[name="result"]');
   
     // Nəticəni yeniləyən funksiya
     function updateResult() {
       // Hesablama aparırıq və output dəyərini yeniləyirik
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Input dəyişikliklərində nəticəni yeniləmək üçün hadisə dinləyiciləri əlavə edirik
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Səhifə yükləndikdə ilkin yeniləmə
     updateResult();
   </script>
   

2. JavaScript ilə nəticələrin göstərilməsi:

   <!-- Nəticəni göstərmək üçün output elementi -->
   <output id="message"></output>
   
   <script>
     // Output elementini əldə edirik
     const messageOutput = document.getElementById('message');
   
     // Output dəyərini təyin edirik
     messageOutput.value = "Salam, dünya!";
     // və ya innerText
     messageOutput.innerText = "Salam, dünya!";
   </script>
   

Atributlar:

• for: Hesablama ilə iştirak edən elementlərin identifikatorlarının siyahısı, nəticəsi <output>-da göstərilir. Boşluqlarla ayrılır.
• name: <output>-in adı. Form göndərilərkən tanınması üçün istifadə olunur.

Əhəmiyyətli xüsusiyyətlər:

• <output> əvvəlcə görünən məzmunu yoxdur, ona value atributu və ya JavaScript vasitəsilə dəyər təyin olunmayınca.
• <output> form elementləri ilə əlaqələndirilə bilər, lakin formanın göndərilməsi zamanı göndərilən məlumatların bir hissəsi deyil, əgər ona value atributu ilə dəyər təyin olunmayıbsa. Bunun əvəzinə, onun dəyəri adətən JavaScript ilə dinamik olaraq yenilənir.
• Semantik olaraq, nəticələrin göstərilməsi üçün nəzərdə tutulmuşdur, bu da əlçatanlıq və axtarış motorlarının optimizasiyası üçün faydalıdır.