7-dars

Interactive HTML

🎯 Asosiy

HTML — bu faqat markup emas. HTML — brauzer bilan tuzilgan kontrakt.

Brauzer:

• accessibility'ni
• klaviatura navigatsiyani
• focus'ni
• default interaction'ni
• form validation'ni

bepul beradi.

Yaxshi developer:

• brauzerga qarshi chiqmaydi
• balki undan maksimal foydalanadi

1️⃣ button vs a — eng katta xato

❌ Xato

<a onclick="submitForm()">Submit</a>

Yoki:

<button onclick="goToPage()">Link</button>

Bu semantik jinoyat.

✅ Qoida

Agar foydalanuvchi…	To'g'ri element
Sahifani almashtirsa	<a>
Amal bajarsa	<button>
Form yuborsa	<button type="submit">

🔹 Nega bu muhim?

<a>

• URL bor
• Right click → "Open in new tab"
• SEO uchun signal
• Screen reader: "link"

<button>

• State bor (disabled)
• Form bilan ishlaydi
• Enter / Space ishlaydi
• Screen reader: "button"

⚠️ Real muammo

Agar sen <div> yoki noto'g'ri <button> ishlatsang:

• klaviatura ishlamaydi
• accessibility buziladi
• SEO signal yo'q
• mobilda kutilmagan behavior

O'ziga berish kerak bo'lgan savol: "Men brauzerga qarshi ishlayapmanmi yoki u bilan birga?"

2️⃣ details / summary — bepul accordion

❌ Qiyin yo'li

Accordion uchun:

• JS
• state
• aria
• event listener

✅ Oson yo'li

<details>
  <summary>Ko'proq ma'lumot</summary>
  <p>Bu yerda yashirin kontent</p>
</details>

🔹 Brauzer nima qiladi?

• Toggle
• Keyboard support
• Focus management
• Accessibility
• SEO readable content

JS: 0 qator.

⚠️ Qachon ishlatmaslik kerak?

• Murakkab animatsiya
• Custom state sync
• Nested interaction logic

Qoida: Oddiy narsa uchun murakkab stack ishlatma.

3️⃣ Native form behaviors

❌ Qiyinroq yondashuv

onSubmit
preventDefault()
custom validation
error state

✅ Osonroq HTML

<form>
  <input type="email" required />
  <button type="submit">Yuborish</button>
</form>

🔹 Brauzer nima qiladi?

• Email formatni tekshiradi
• Empty bo'lsa yubormaydi
• Error message chiqaradi
• Fokusni xato joyga olib boradi

JS kerak emas.

🔹 HTML attribute'lar — kuchli qurol

• required
• pattern
• min, max
• maxlength
• autocomplete

⚠️ Muhim eslatma (unutmang!)

⚠️ HTML form validation (required, pattern, type) — xavfsizlik emas.

Foydalanuvchi DevTools (Inspect) orqali bu atributlarni o'zgartirishi yoki formni butunlay chetlab yuborishi mumkin.

Shuning uchun backend har doim barcha ma'lumotlarni qayta tekshirishi shart.

HTML validation faqat foydalanuvchi tajribasini (UX) yaxshilash uchun ishlatiladi.

4️⃣ dialog — JS'siz modal

❌ Qiyin yo'li

• Overlay
• ESC handling
• Focus trap
• Scroll lock

✅ Oson yo'li

<dialog open>
  <p>Salom! Bu modal.</p>
  <form method="dialog">
    <button>Yopish</button>
  </form>
</dialog>

🔹 Brauzer avtomatik:

• Fokusni ichiga oladi
• ESC bilan yopadi
• Background'ni bloklaydi
• Screen reader bilan to'g'ri ishlaydi

⚠️ Eslatma

dialog:

• Progressive enhancement talab qiladi
• Eski brauzerlar uchun fallback kerak bo'lishi mumkin

Modal — bu accessibility muammosi, UI emas.

5️⃣ Default browser behaviors — xunuk, lekin kerak

Ha, rostini aytaylik: brauzerning default fokus outline'i ko'pincha chiroyli emas. Ko'p dizaynlarda u begonadek ko'rinadi va "xunuk" tuyuladi.

Lekin uni butunlay o'chirib tashlash — xato.

Nega outline: none qilish noto'g'ri?

Agar fokusni o'chirib qo'ysang:

• klaviatura (Tab) bilan yuradigan foydalanuvchi qayerda turganini bilmaydi
• accessibility buziladi
• WCAG talablariga zid bo'ladi
• real foydalanuvchi zarar ko'radi

Shu sabab global outline: none — to'g'ri deb qabul qilinmaydi.

✅ To'g'ri yechim

Default fokusni o'chirma, uni dizaynga mos qilib almashtir.

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

Bu yondashuv:

• mouse bilan bosilganda fokusni ko'rsatmaydi
• klaviatura bilan kelganda fokusni aniq ko'rsatadi
• dizaynni buzmaydi
• accessibility'ni saqlaydi

Chiroyliroq qilish mumkinmi? Ha.

button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
}

Yoki rangni dizayn rangiga moslash:

button:focus-visible {
  outline: 2px solid var(--accent-color);
}

Qoida (eslab qol)

Fokus xunuk bo'lishi mumkin, lekin u yo'q bo'lishi mumkin emas.

Qachon default behavior'ga tegmaslik kerak?

• Tab navigatsiya
• Enter bilan submit
• Space bilan button bosish

Bular:

• foydalanuvchi kutadigan
• brauzer mukammal qilgan
• o'chirilmasligi kerak bo'lgan xatti-harakatlar

Yakuniy xulosa

Interactive HTML bilan ishlash — bu brauzer sizning ittifoqingiz, dushmaningiz emasligini tushunish demakdir.

Brauzerning native xatti-harakatlaridan foydalangan holda, siz accessibility, performance va maintainability'ni bepul olasiz. Har safar brauzerga qarshi chiqganingizda, texnik qarz va accessibility muammolarini yaratasiz. Har safar u bilan ishlaganingizda, yaxshiroq va tezroq narsa qurasiz.

Eng yaxshi HTML kodi nafaqat ishlaydi — u brauzerning ichki imkoniyatlari bilan chiroyli ishlaydi.