Series: HTML Basics Lesson 8

Forms — Production daraja

Production darajadagi HTML form amaliyotlarini o'rganing: accessibility uchun label, backend muloqoti uchun name atributlari va SEO va UX uchun autocomplete. Form — bu faqat UI emas, bu API ga kirish eshigi.

8-dars

MODUL 5: Forms — Production daraja

🎯 Maqsad: HTML form = backend contract + UX + accessibility (A11y). Form — bu UI emas, bu API ga kirish eshigi.

1️⃣ label — UX emas, Accessibility contract

Ko'pchilik xato o'ylaydi:

"Label — dizayn uchun"

❌ Yo'q. label — screen reader, keyboard, voice input uchun majburiy bog'lovchi.

✅ To'g'ri bog'lash

<label for="email">Email</label>
<input id="email" name="email" type="email">

Bu bilan:

  • Screen reader: "Email, edit text"
  • Label bosilganda input fokuslanadi
  • Voice input: "Click Email"

❌ Noto'g'ri (professional xato)

<input placeholder="Email">

❌ Placeholder:

  • Screen reader'da yo'qoladi
  • Fokus bo'lganda yo'q
  • WCAG violation

📌 Xulosa

👉 label yo'q = A11y buzilgan

2️⃣ name — frontend uchun emas, backend uchun

Ko'pchilik faqat id bilan ishlaydi — bu katta xato.

<input id="email" name="email">

Nima uchun name MUHIM?

Backend faqat name ni o'qiydi

<form> submit paytida:

email=user@mail.com

Agar name bo'lmasa:

<input id="email">

➡️ Backendga HECH NIMA BORMAYDI

👉 JS bilan olish mumkin, lekin:

  • Native submit buziladi
  • Progressive enhancement yo'qoladi

📌 Xulosa

👉 name — backend muloqoti uchun majburiy

3️⃣ autocomplete — haqiqiy foyda (SEO + UX)

Ko'pchilik autocomplete="off" qilib tashlaydi 😬

✅ To'g'ri foydalanish

<input name="email" autocomplete="email">
<input name="name" autocomplete="name">
<input name="street" autocomplete="street-address">

Natija:

  • Mobil'da autofill
  • Password manager ishlaydi
  • Conversion ↑

📌 Xulosa

👉 autocomplete — luxury emas, standard

Umumiy xulosa

HTML form — bu faqat UI element emas, bu foydalanuvchi va backend API o'rtasidagi muhim ko'prik. Har bir atribut muhim: label accessibility'ni ta'minlaydi, name backend muloqotini yo'lga qo'yadi, autocomplete esa UX va conversion'ni yaxshilaydi.

Professional form — bu ko'p maqsadga xizmat qilishini tushunish bilan quriladi: ular accessible, funksional va foydalanuvchi uchun qulay bo'lishi kerak. Bu asoslarni o'tkazib yuborish texnik qarz va accessibility buzilishlarini yaratadi, bu esa real foydalanuvchilarga zarar yetkazadi.

Eng yaxshi form — bu brauzerlar, assistive texnologiyalar va backend tizimlar bilan uyg'un ishlaydi, ularga qarshi emas.