HTML5'те <output> элементи эмне?

Элемент <output> колдонулат эсептөөлөрдүн натыйжаларын көрсөтүү үчүн, адатта, кардар тарапта жүргүзүлөт.

Колдонуу мисалдары:

1. Форманын элементтери менен байланыштыруу:

   <!-- Сан киргизүү үчүн input объявлениесы -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Башка сан киргизүү үчүн input объявлениесы -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Натыйжаны көрсөтүү үчүн output объявлениесы, аны id аркылуу input-тар менен байланыштыруу -->
   <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');
   
     // Output маанисин коюу
     messageOutput.value = "Салам, дүйнө!";
     // же innerText
     messageOutput.innerText = "Салам, дүйнө!";
   </script>
   

Атрибуттар:

• for: Натыйжасын көрсөтүү үчүн катышкан элементтердин идентификаторлорунун тизмеси. Ар бири боштук менен бөлүнөт.
• name: <output> элементинин аты. Форманы жөнөтүүдө аны аныктоо үчүн колдонулат.

Маанилүү өзгөчөлүктөр:

• Деги эле <output> көрүнбөгөн мазмунга ээ, эгер ага value атрибуту же JavaScript аркылуу мааниси берилбесе.
• <output> форманын элементтери менен байланышса да, ал өзү форма жөнөтүлгөн маалыматтардын бөлүгү эмес, эгер ага value аркылуу мааниси берилбесе. Анын мааниси көбүнчө JavaScript аркылуу динамикалык түрдө жаңыртылат.
• Семантикалык жактан алганда, ал натыйжалардын чыгышы үчүн арналган, бул жеткиликтүүлүк жана издөө оптимизациясы үчүн пайдалуу.