HTML5 da <output> element nima?

<output> elementi odatda mijoz tomonida bajarilgan hisoblash natijalarini ko'rsatish uchun ishlatiladi.

Foydalanish misollari:

1. Forma elementlari bilan bog'lash:

   <!-- Son kiritish uchun input e'lon qilamiz -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Boshqa son kiritish uchun input e'lon qilamiz -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Natijani ko'rsatish uchun output e'lon qilamiz, uni id bilan inputlarga bog'laymiz -->
   <output name="result" for="a b"></output>
   
   <script>
     // Elementlarni olamiz
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output elementini olamiz
     const result = document.querySelector('output[name="result"]');
   
     // Natijani yangilash funksiyasi
     function updateResult() {
       // Hisoblashni amalga oshiring va output qiymatini yangilang
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Input o'zgarishlarida natijani yangilash uchun voqea tinglovchilarini qo'shing
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Sahifa yuklanganda boshlang'ich natijani yangilash
     updateResult();
   </script>
   

2. JavaScript yordamida natijalarni ko'rsatish:

   <!-- Natijani ko'rsatish uchun output element -->
   <output id="message"></output>
   
   <script>
     // Output elementini olamiz
     const messageOutput = document.getElementById('message');
   
     // Output qiymatini o'rnatamiz
     messageOutput.value = "Salom, dunyo!";
     // yoki innerText
     messageOutput.innerText = "Salom, dunyo!";
   </script>
   

Atributlar:

• for: Hisoblashda ishtirok etadigan elementlarning identifikatorlar ro'yxati, uning natijasi <output>da ko'rsatiladi. Bo'sh joy bilan ajratilgan.
• name: <output> elementining nomi. Form yuborilganda aniqlash uchun ishlatiladi.

Muhim xususiyatlar:

• <output> odatda ko'rinadigan mazmunga ega emas, unga value atributi yoki JavaScript orqali qiymat berilmaguncha.
• <output> forma elementlariga bog'lanishi mumkin, ammo u forma yuborilgan ma'lumotlar qismiga kirmaydi, agar unga value atributi orqali qiymat berilmasa. O'rniga, uning qiymati odatda JavaScript yordamida dinamik ravishda yangilanadi.
• Semantik jihatdan, u natijalarni chiqarish uchun mo'ljallangan, bu esa kirish va qidiruv tizimlari uchun foydalidir.