Kas ir <output> elements HTML5?

Element <output> tiek izmantots rezultātu attēlošanai, kas parasti tiek veikti klienta pusē.

Piemēri:

1. Saistīšana ar formas elementiem:

   <!-- Definē ievades elementu skaitļa ievadei -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Definē citu skaitļa ievades elementu -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Definē output, lai parādītu rezultātu, sasaistot to ar ievades elementiem pēc id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Iegūstam ievades elementus
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Iegūstam output elementu
     const result = document.querySelector('output[name="result"]');
   
     // Funkcija rezultāta atjaunošanai
     function updateResult() {
       // Veicam aprēķinu un atjaunojam output vērtību
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Pievienojam notikumu klausītājus, lai atjaunotu rezultātu, mainot ievades datus
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Pirmreizējs rezultāta atjaunošanas process, ielādējot lapu
     updateResult();
   </script>
   

2. Rezultātu attēlošana ar JavaScript:

   <!-- Output elements rezultāta attēlošanai -->
   <output id="message"></output>
   
   <script>
     // Iegūstam output elementu
     const messageOutput = document.getElementById('message');
   
     // Iestādam vērtību
     messageOutput.value = "Sveiki, pasaule!";
     // Vai innerText
     messageOutput.innerText = "Sveiki, pasaule!";
   </script>
   

Atribūti:

• for: Saraksts ar elementu identifikatoriem, kas iesaistīti aprēķinā, kuru rezultāts tiek rādīts <output> elementā. Atdalīti ar tukšumu.
• name: <output> elementa nosaukums. Izmanto, lai identificētu to formu sūtīšanas laikā.

Svarīgas īpašības:

• Pēc noklusējuma <output> nav redzama satura, kamēr tam netiek piešķirta vērtība ar value atribūtu vai JavaScript.
• <output> var būt saistīts ar formu elementiem, bet tas pats nav daļa no sūtītajiem datiem, ja vien tam netiek piešķirta vērtība ar value. Tā vērtība parasti tiek atjaunināta dinamiski ar JavaScript.
• Semantiski tas ir paredzēts rezultātu attēlošanai, kas ir noderīgi pieejamībai un meklētāju optimizācijai.