HTML <data>

<data> — ko’rinadigan matnga mashina o’qiy oladigan qiymatni bog’laydigan teg. Foydalanuvchi mahsulot nomini ko’radi, dastur esa uning yashirin identifikatorini (ID) oladi. <data> inson uchun matn va kompyuter uchun qiymatni bir joyda birlashtiradi.

<data> — ko’rinadigan kontentga value atributi orqali mashina o’qiy oladigan qiymatni bog’laydigan teg.

Oddiy foydalanish

<data> tegining value atributi yashirin, mashina uchun qiymatni saqlaydi:

<p>Mahsulot: <data value="1001">Telefon</data></p>
<p>Mahsulot: <data value="1002">Noutbuk</data></p>

Mahsulot: Telefon
Mahsulot: Noutbuk

Foydalanuvchi faqat “Telefon” va “Noutbuk” so’zlarini ko’radi. Ammo kod ichida value="1001" va value="1002" mahsulot identifikatorlari saqlangan. Bu ma’lumotni JavaScript orqali ishlatish mumkin.

Nega <data> kerak?

Ko’pincha ekrandagi matn (inson uchun) va dastur ishlatadigan qiymat (kompyuter uchun) har xil bo’ladi. <data> bu ikkovini bog’laydi:

Bu ayniqsa mahsulotlar, foydalanuvchilar yoki har qanday ID’ga ega ma’lumot bilan ishlashda foydali.

JavaScript bilan ishlatish

<data> ning value qiymatini JavaScript orqali olish mumkin:

<data value="1001" id="mahsulot">Telefon</data>
<script>
    const el = document.getElementById("mahsulot");
    console.log(el.value);       // yashirin qiymat
    console.log(el.textContent); // ko'rinadigan matn
</script>

1001
Telefon

el.value yashirin identifikatorni (1001), el.textContent esa ko’rinadigan matnni (Telefon) berdi. Bu ma’lumotni qayta ishlashda juda qulay.

data va time farqi

<data> sonli yoki matnli qiymatlar uchun umumiy; sana va vaqt uchun esa maxsus <time> tegi bor. <data> — mahsulot ID, versiya raqami kabi qiymatlar uchun; <time> — aniq sana va vaqtlar uchun. To’g’ri tegni tanlash ma’noni aniqroq qiladi.

Xulosa

Bu bo’limda <data> tegini, value atributi bilan mashina o’qiy oladigan qiymatni bog’lashni, uni JavaScript bilan ishlatishni va <time> dan farqini ko’rib chiqdik. <data> — matn va qiymatni bir joyda birlashtiradi. Keyingi darsda <datalist> tegiga o’tamiz.