რა არის <output> ელემენტი HTML5-ში?

ელემენტი <output> გამოიყენება გამოთვლების შედეგების ჩვენებისთვის, რომლებიც ჩვეულებრივ ხორციელდება მომხმარებლის მხარეზე.

გამოყენების მაგალითები:

1. ფორმის ელემენტებთან დაკავშირება:

   <!-- ციფრის შესატანი input-ის გამოცხადება -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- სხვა ციფრის შესატანი input-ის გამოცხადება -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- შედეგის გამოსაყენებლად output-ის გამოცხადება, დაკავშირება id-ის მიხედვით -->
   <output name="result" for="a b"></output>
   
   <script>
     // Input ელემენტების მიღება
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Output ელემენტის მიღება
     const result = document.querySelector('output[name="result"]');
   
     // შედეგის განახლების ფუნქცია
     function updateResult() {
       // გამოთვლა და output-ის მნიშვნელობის განახლება
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // მოვუსმინოთ მოვლენებს, რათა განახლდეს შედეგი input-ების ცვლილებაზე
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // პირველადი განახლება გვერდის ჩატვირთვისას
     updateResult();
   </script>
   

2. JavaScript-ის გამოყენებით შედეგების ჩვენება:

   <!-- output ელემენტი შედეგის გამოსაყენებლად -->
   <output id="message"></output>
   
   <script>
     // Output ელემენტის მიღება
     const messageOutput = document.getElementById('message');
   
     // მნიშვნელობის დაყენება
     messageOutput.value = "გამარჯობა, მსოფლიო!";
     // ან innerText
     messageOutput.innerText = "გამარჯობა, მსოფლიო!";
   </script>
   

ატრიბუტები:

• for: ელემენტების იდენტიფიკატორების სია, რომლებიც მონაწილეობენ გამოთვლაში, რომლის შედეგიც გამოჩნდება <output>-ში. განლაგებულია სივრცით separation.
• name: <output>-ის სახელი. გამოიყენება ფორმის გაგზავნისას იდენტიფიკაციისთვის.

მნიშვნელოვანი მახასიათებლები:

• <output>-ს თავდაპირველად არ აქვს ხილული შინაარსი, სანამ მას არ მიენიჭება მნიშვნელობა value-ით ან JavaScript-ით.
• <output> შეიძლება იყოს დაკავშირებული ფორმის ელემენტებთან, მაგრამ თავად არ არის ფორმის გაგზავნილი მონაცემების ნაწილი, თუ მას არ მიენიჭება მნიშვნელობა value-ით. მისი მნიშვნელობა ჩვეულებრივ განახლდება დინამიურად JavaScript-ის საშუალებით.
• სემანტიკურად, ის განკუთვნილია შედეგების გამოსათვლელად, რაც სასარგებლოა ხელმისაწვდომობის და საძიებო ოპტიმიზაციისთვის.