Mi az az <output> elem az HTML5-ben?

Az <output> elem a számítási eredmények megjelenítésére szolgál, amelyeket általában a kliens oldalon végeznek.

Használati példák:

1. Form elemekhez való kötés:

   <!-- Egy bemenet deklarálása szám beírásához -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Egy másik bemenet deklarálása másik szám beírásához -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Egy output deklarálása az eredmény megjelenítéséhez, összekötve a bemenetekkel az id segítségével -->
   <output name="result" for="a b"></output>
   
   <script>
     // Elemek lekérése
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output elem lekérése
     const result = document.querySelector('output[name="result"]');
   
     // Függvény az eredmény frissítésére
     function updateResult() {
       // Számítás végrehajtása és az output értékének frissítése
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Eseményfigyelők hozzáadása az eredmény frissítéséhez bemenetek változásakor
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Kezdeti frissítés az oldal betöltésekor
     updateResult();
   </script>
   

2. Eredmények megjelenítése JavaScript segítségével:

   <!-- Output elem az eredmény megjelenítéséhez -->
   <output id="message"></output>
   
   <script>
     // Output elem lekérése
     const messageOutput = document.getElementById('message');
   
     // Az output értékének beállítása
     messageOutput.value = "Helló, világ!";
     // Vagy innerText
     messageOutput.innerText = "Helló, világ!";
   </script>
   

Attribútumok:

• for: A számításban részt vevő elemek azonosítói listája, melynek eredménye a <output>-ban jelenik meg. Szóközzel elválasztva.
• name: Az <output> elem neve. A űrlap küldésekor történő azonosításhoz használják.

Fontos jellemzők:

• Alapértelmezés szerint a <output> nem rendelkezik látható tartalommal, amíg nem kap értéket a value attribúton vagy JavaScript segítségével.
• A <output> összekapcsolható űrlapelemekkel, de nem része az űrlap elküldött adatainak, kivéve, ha értéket rendelnek hozzá a value attribútummal. Általában dinamikusan frissül JavaScript segítségével.
• Szemantikai szempontból eredmények megjelenítésére tervezték, ami hasznos az akadálymentesség és a keresőoptimalizálás szempontjából.