HTML atributlari nima va ular qanday bo'ladi?

Savol

HTML atributlari nima, global atributlar muayyan tegga xos atributlardan nimasi bilan farq qiladi va bulean atributlar qanday ishlaydi?

Qisqa javob

Atributlar — bu ochuvchi teg ichida element uchun qo'shimcha xususiyatlarni belgilaydigan nom="qiymat" juftliklari. Global atributlar (id, class, data-*, tabindex, style, title) har qanday tegga qo'llanadi; tegga xos atributlar faqat muayyan elementlar uchun to'g'ri (href faqat <a>/<link>da, src faqat media-teglarda). Bulean atributlar (disabled, checked, required) qiymati bilan emas, belgilashda mavjudligi faktining o'zi bilan yoqiladi.

Batafsil javob

Global atributlar har qanday HTML elementida mavjud:

• id — hujjat doirasidagi noyob identifikator, langar (anchor), label[for], CSS/JS-selektorlari uchun ishlatiladi.
• class — CSS va JS uchun klasslar ro'yxati, ko'plab elementlarda takrorlanishi mumkin.
• data-* — maxsus ma'lumotlarni saqlash uchun ixtiyoriy data-atributlar, JS'da element.dataset.someName orqali ochiladi (data-some-namedan camelCase). Renderingga ta'sir qilmaydi va HTML5 standartida to'g'ri hisoblanadi.
• tabindex — klaviatura orqali fokuslash tartibi va imkoniyatini boshqaradi: 0 — element tabiiy tab tartibiga qo'shiladi, -1 — dasturiy tarzda (el.focus()) fokuslanadi, lekin Tab bilan aylanishdan chiqib qoladi, musbat son — aniq (va odatda tabiiy tartibni buzuvchi, keraksiz) ustuvorlikni belgilaydi.
• title, style, hidden, contenteditable, draggable, lang, aria-* — bular ham global.

Tegga xos atributlar faqat o'z teglari uchun to'g'ri: <a>da href/target/rel, <img>da src/alt/srcset, <input>da type/value/placeholder. Ularni kontekstdan tashqarida ishlatish noto'g'ri va hech qanday effekt bermaydi.

Bulean atributlar — alohida kategoriya: ularning mavjudligining o'zi trueni bildiradi, va qiymat (agar ko'rsatilgan bo'lsa) spetsifikatsiya bo'yicha ahamiyatga ega emas.

• <input disabled> — maydon o'chirilgan.
• <input disabled="disabled">, <input disabled="">, <input disabled="false"> — uchala variant ham "o'chirilgan"ni bildiradi, chunki HTML-parser atributning satrli qiymatiga emas, uning mavjudligiga qaraydi.
• Bunday atributni JS orqali to'g'ri yoqish/o'chirish uchun setAttribute('disabled', 'false') emas, el.disabled = true/false yoki el.toggleAttribute('disabled') ishlatiladi.

Misol

<button
  id="submit-btn"
  class="btn btn-primary"
  data-testid="submit"
  data-user-id="42"
  tabindex="0"
  disabled
>
  Yuborish
</button>

<script>
  const btn = document.getElementById('submit-btn');
  console.log(btn.dataset.userId); // "42"
  btn.disabled = false; // bulean atributni to'g'ri olib tashlash usuli
</script>

Qo'shimcha savollar

• dataset element obyektining ixtiyoriy JS-xususiyatlaridan nimasi bilan farq qiladi?
• Nega setAttribute('disabled', 'false') maydonni qayta yoqmaydi?
• tabindex="-1" SPA'da fokusni boshqarish bilan qanday bog'liq holda ishlatiladi?