HTML5'te <output> öğesi nedir?

<output> öğesi, genellikle istemci tarafında gerçekleştirilen hesaplama sonuçlarını göstermek için kullanılır.

Kullanım örnekleri:

1. Form öğeleriyle bağlantı:

   <!-- Bir sayı girişi için input tanımlıyoruz -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Başka bir sayı girişi için input tanımlıyoruz -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Sonucu göstermek için output tanımlıyoruz, id ile inputlara bağlıyoruz -->
   <output name="result" for="a b"></output>
   
   <script>
     // Input öğelerini al
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output öğesini al
     const result = document.querySelector('output[name="result"]');
   
     // Sonucu güncelleyen fonksiyon
     function updateResult() {
       // Hesaplama yap ve output değerini güncelle
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Input değişikliklerinde sonucu güncellemek için olay dinleyicileri ekle
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Sayfa yüklenirken başlangıç sonucu güncelle
     updateResult();
   </script>
   

2. JavaScript ile sonuç gösterimi:

   <!-- Sonucu göstermek için output öğesi -->
   <output id="message"></output>
   
   <script>
     // Output öğesini al
     const messageOutput = document.getElementById('message');
   
     // Output değerini ayarla
     messageOutput.value = "Merhaba, dünya!";
     // veya innerText kullan
     messageOutput.innerText = "Merhaba, dünya!";
   </script>
   

Özellikler:

• for: Hesaplamada yer alan öğelerin kimlikleri listesi, sonucu <output>'ta gösterilir. Boşlukla ayrılır.
• name: <output> öğesinin adı. Form gönderilirken tanımlama için kullanılır.

Önemli özellikler:

• Varsayılan olarak, <output> görünür içerik içermez, ona value veya JavaScript aracılığıyla değer atanmadıkça.
• <output>, form öğeleriyle ilişkilendirilebilir, ancak form gönderildiğinde gönderilen verilerin bir parçası değildir, eğer ona value ile değer atanmadıysa. Bunun yerine, değeri genellikle JavaScript ile dinamik olarak güncellenir.
• Semantik olarak, sonuçların gösterimi için tasarlanmıştır, bu da erişilebilirlik ve arama motoru optimizasyonu için faydalıdır.