Čo je prvok <output> v HTML5?

Prvok <output> se uporablja za prikaz rezultatov izračunov, ki se običajno izvajajo na strani odjemalca.

Primeri uporabe:

1. Povezava z elementi obrazca:

   <!-- Določitev vnosnega polja za vnos števila -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Določitev vnosnega polja za vnos drugega števila -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Določitev output za prikaz rezultata, povezovanje z vnosnimi polji po id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Pridobivanje elementov input
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Pridobivanje elementa output
     const result = document.querySelector('output[name="result"]');
   
     // Funkcija za posodobitev rezultata
     function updateResult() {
       // Izvedba izračuna in posodobitev vrednosti output
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Dodajanje poslušalcev dogodkov za posodobitev rezultata ob spremembi vnosnih polj
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Začetno posodobitev rezultata ob nalaganju strani
     updateResult();
   </script>
   

2. Prikaz rezultatov z JavaScript:

   <!-- Element output za prikaz rezultata -->
   <output id="message"></output>
   
   <script>
     // Pridobivanje elementa output
     const messageOutput = document.getElementById('message');
   
     // Nastavitev vrednosti output
     messageOutput.value = "Pozdravljen, svet!";
     // Ali innerText
     messageOutput.innerText = "Pozdravljen, svet!";
   </script>
   

Atributi:

• for: Seznam identifikatorjev elementov, ki sodelujejo v izračunu, katerih rezultat se prikazuje v <output>. Ločeni s presledkom.
• name: Ime elementa <output>. Uporablja se za identifikacijo ob pošiljanju obrazca.

Pomembne lastnosti:

• Privzeto <output> nima vidne vsebine, dokler mu ne bo dodeljena vrednost prek atributa value ali JavaScript.
• <output> je mogoče povezati z elementi obrazca, vendar sam ni del podatkov, ki se pošiljajo s obrazcem, razen če mu ni dodeljena vrednost prek value. Običajno se njegova vrednost dinamično posodablja z JavaScript.
• Semantično je namenjen za prikaz rezultatov, kar je koristno za dostopnost in optimizacijo za iskalnike.