HTML label: har bir forma maydoniga nom berish

Qisqacha: label — forma maydonining nomi. U maydonga for va id orqali yoki maydonni o'z ichiga olib bog'lanadi. Bog'langan label'ni bossangiz, maydon faollashadi, ekran o'quvchi esa maydonni shu nom bilan aytadi. placeholder label'ning o'rnini bosmaydi: u yozishni boshlashingiz bilan yo'qoladi.

Bu darsda

• label ni maydonga ikki usulda bog'lay olasiz: for/id va o'rab olish.
• Label nima uchun kerakligini uch sababda tushuntira olasiz.
• Placeholder nega label'ning o'rnini bosmasligini bilasiz.
• Ko'rinmas, lekin ekran o'quvchi o'qiydigan label yasaysiz.
• Label bog'langanini DevTools'da tekshira olasiz.

Oldin bilishingiz kerak: Forma qanday ishlaydi, Sahifa landmarklari (aria-label).

1. Nega bu kerak?

O'tgan darsda «Bahor» uchun joy band qilish formasini yozdik va maydonlarni label ichiga oldik. U yerda "hozircha shunchaki yozuv deb qabul qiling" degan edik. Aslida label — oddiy yozuv emas.

Tasavvur qiling, bu formani uch kishi ochdi:

• Jasur telefonda. "Bolalar stulchasi kerak" degan kichkina katakchani bosmoqchi, lekin barmog'i doim yoniga tegadi.
• Malika ko'zi ojiz (alt matn darsidan tanishsiz). Uning telefoni ekrandagi matnni ovoz chiqarib o'qiydi. Maydonga kelganda telefon faqat "Tahrirlash maydoni, bo'sh" deydi. Qaysi maydon? Ism? Telefon?
• Dilnoza brauzeridagi avtoto'ldirishdan foydalanadi. Brauzer qaysi maydonga ismni, qaysisiga telefonni qo'yishni taxmin qilishi kerak.

Uchala muammoni bitta to'g'ri yozilgan label hal qiladi. Bu darsda uni qanday yozishni ko'ramiz.

2. Label nima?

Label (yorliq) — forma maydoniga biriktirilgan nom. U brauzerga "bu yozuv — aynan shu maydonning nomi" deb aytadi.

Hayotdan o'xshatish: yig'ilishdagi stol ustidagi ism kartochkasi. Kartochka stolning yonida emas, ustida turadi — hamma qaysi o'rin kimniki ekanini aniq biladi. Kartochka yo'q bo'lsa, o'rindiqlar bir xil ko'rinadi.

Label'siz maydon ham xuddi shunday: ekranda uning yonida matn turgan bo'lishi mumkin, lekin brauzer bu matn qaysi maydonga tegishli ekanini bilmaydi. Ko'zi bilan ko'radigan odam taxmin qiladi. Brauzer, ekran o'quvchi va avtoto'ldirish esa taxmin qilmaydi — ularga aniq bog'lanish kerak.

3. Bog'lashning ikki usuli

3.1 for va id

Birinchi usul: maydonga id beriladi, label'ning for atributiga esa aynan shu id yoziladi.

<label for="ism">Ismingiz</label>
<input type="text" id="ism" name="ism">

• id="ism" — maydonning sahifadagi noyob "pasporti".
• for="ism" — "men ism pasportli maydonning nomiman".

Label va maydon sahifaning istalgan joyida turishi mumkin — bog'lanish baribir ishlaydi. Shuning uchun keyinroq CSS bilan ularni xohlagan joyga qo'yish oson.

Bu yerda id va name bir xil — ism. Bu tasodif emas, qulaylik: ikkalasi turli ish qiladi. id — label va sahifa ichidagi bog'lanish uchun, name — serverga yuborish uchun (o'tgan dars). Qiymatlari farq qilsa ham bo'ladi, lekin bir xil yozish chalkashlikni kamaytiradi.

3.2 O'rab olish

Ikkinchi usul: maydon label'ning ichiga joylanadi. for va id kerak emas.

<label>
  Ismingiz
  <input type="text" name="ism">
</label>

Label ichidagi yagona maydon — uning maydoni. O'tgan darsda aynan shu usulni ishlatgan edik.

3.3 Qaysi birini tanlash?

Ikkalasi ham standart va to'g'ri. Ko'p jamoalar for/id ni afzal ko'radi: ba'zi eski yordamchi dasturlar (masalan, ovoz bilan boshqarish dasturlari) o'rab olishni har doim ham tushunmaydi.

Ikkala usulni birga yozish ham standartga zid emas: maydon label ichida turadi va label'da for ham bo'ladi. Lekin html-validate buni Redundant "for" attribute ("ortiqcha for atributi") deb belgilaydi. Bitta usulni tanlang.

Bu kursda asosan for/id usulini ishlatamiz.

Tekshirib ko'ring: Bu label qaysi maydonga bog'langan?

html

<label for="odam">Necha kishi</label>
<input type="text" id="odamlar" name="odam">

4. Label nima beradi?

4.1 Katta bosiladigan hudud

Label'ni bosing — maydon faollashadi (kursor maydonga tushadi). Kichik elementlarda bu juda muhim. Masalan, belgilash katakchasi (checkbox) — "ha/yo'q" tanlash uchun kvadratcha (Tanlash maydonlari darsida to'liq o'rganamiz):

<input type="checkbox" id="stulcha" name="stulcha">
<label for="stulcha">Bolalar stulchasi kerak</label>

Kvadratcha taxminan 13×13 piksel — telefonda barmoq uchun juda kichik. Label bilan esa "Bolalar stulchasi kerak" matnining hammasi bosiladigan bo'ladi. Jasurning muammosi hal bo'ldi.

Sinab ko'ring: label'ni olib tashlab, faqat matn qoldiring. Endi matnni bosish hech narsa qilmaydi.

4.2 Ekran o'quvchi uchun nom

Ekran o'quvchi (screen reader) — ko'zi ojiz odamlar uchun ekrandagi narsani ovoz chiqarib o'qiydigan dastur (HTML nima darsida tanishgansiz). U maydonga kelganda label matnini o'qiydi:

• Label bilan: "Ismingiz, tahrirlash maydoni".
• Label'siz: "Tahrirlash maydoni" — va Malika nima yozishni bilmaydi.

Brauzer har bir element uchun accessible name (foydalanish uchun nom) hisoblaydi — ekran o'quvchi aynan shuni o'qiydi. Maydon uchun bu nomning asosiy manbai — label. Nom qanday hisoblanishini Accessibility daraxti darsida chuqur ko'ramiz.

4.3 Ovoz bilan boshqarish va avtoto'ldirish

Qo'li bilan telefon yoki sichqoncha ishlata olmaydigan odamlar ovoz bilan boshqaradi: "Telefonni bos" deyishadi. Dastur "Telefon" nomli maydonni label orqali topadi.

Brauzerning avtoto'ldirishi ham label matniga qaraydi: "Telefon" deb yozilgan maydonga telefon raqamini taklif qiladi. Avtoto'ldirishni aniq boshqarish usulini autocomplete darsida ko'ramiz.

Tekshirib ko'ring: Label'ning uchta foydasini ayting. Qaysi biri ko'zi ko'radigan, sichqoncha ishlatadigan odamga ham kerak?

5. Placeholder tuzog'i

5.1 Placeholder nima?

placeholder — maydon bo'sh turganda uning ichida ko'rinadigan och kulrang maslahat matni:

<label for="ism">Ismingiz</label>
<input type="text" id="ism" name="ism" placeholder="masalan, Ali">

Foydalanuvchi birinchi harfni yozishi bilan placeholder yo'qoladi. U yuborilmaydi ham — faqat ko'rinadigan maslahat.

5.2 Nega u label emas?

Chiroyli ko'rinadi deb ko'p saytlar label'ni olib tashlab, faqat placeholder qoldiradi:

<!-- ❌ Label yo'q, faqat placeholder -->
<input type="text" name="ism" placeholder="Ismingiz">
<input type="text" name="telefon" placeholder="Telefon">

Muammolar:

• Yozishni boshlaganda nom yo'qoladi. Uchinchi maydonga kelganda foydalanuvchi "birinchisi nima edi?" deb, yozganini o'chirib ko'radi.
• Tekshirib bo'lmaydi. Yuborishdan oldin qarasangiz — faqat qiymatlar. Qaysi raqam telefon, qaysi biri odam soni?
• Och rang yomon ko'rinadi. Quyosh ostida telefonda yoki ko'zi zaif odamga placeholder deyarli ko'rinmaydi.
• "To'ldirilgan" deb o'ylashadi. Kulrang matnni ba'zilar oldindan yozilgan qiymat deb o'ylab, maydonni o'tkazib yuboradi.
• Ekran o'quvchiga ishonchsiz. Brauzerlar label bo'lmasa placeholder'ni zaxira nom sifatida olishi mumkin, lekin bunga tayanib bo'lmaydi.

5.3 To'g'ri usul: label + (kerak bo'lsa) placeholder

<!-- ✅ Label — nom, placeholder — qo'shimcha maslahat -->
<label for="telefon">Telefon</label>
<input type="text" id="telefon" name="telefon"
       placeholder="+998 90 000 00 00">

Label doim ko'rinib turadi. Placeholder esa faqat namuna ko'rsatadi. Maslahat muhim bo'lsa (masalan, "faqat raqamlar"), uni placeholder'ga emas, maydon yonidagi doimiy matnga yozgan ma'qul — buni Qulay va accessible forma darsida ko'ramiz.

Diqqat: Uzun atributli teglarni bir necha qatorga bo'lish mumkin — yuqoridagi input kabi. Brauzer uchun bu bitta teg. Telefonda o'qiladigan kodda shunday qilamiz.

6. Ko'rinmas label

6.1 Qachon kerak?

Ba'zan dizaynda ko'rinadigan label uchun joy yo'q. Eng ko'p uchraydigan misol — qidiruv satri: ichida lupa belgisi, yonida "Qidirish" tugmasi. Ko'zi ko'radigan odamga hammasi tushunarli. Ekran o'quvchiga esa nom baribir kerak.

6.2 Uch usul

1. aria-label — Sahifa landmarklari darsida nav ga nom berishda ishlatgansiz. Maydonga ham xuddi shunday:

<input type="search" name="q" aria-label="Menyudan qidirish">

Nom faqat ekran o'quvchi va ovozli boshqaruv uchun. Ekranda ko'rinmaydi.

2. aria-labelledby — nomni sahifadagi boshqa elementning matnidan oladi. Qiymati — o'sha elementning id si:

<h2 id="qidiruv-sarlavha">Menyudan qidirish</h2>
<input type="search" name="q" aria-labelledby="qidiruv-sarlavha">

Sarlavha ekranda bor — uning matni maydonning nomi bo'ladi. ARIA atributlarini ARIA asoslari darsida batafsil o'rganamiz.

3. Ko'rinmas klass bilan label — oddiy label yoziladi, keyin CSS bilan ekrandan yashiriladi, lekin ekran o'quvchi uni o'qiydi:

<label for="qidiruv" class="korinmas">Menyudan qidirish</label>
<input type="search" id="qidiruv" name="q">

korinmas klassining CSS kodi mashhur tayyor parcha bo'lib, uni CSS'da accessibility darsida yozamiz. Hozircha bilish kifoya: bu usulda label ekranda yo'q, lekin brauzer uchun to'liq label.

Diqqat: Label'ni hidden atributi bilan yashirmang. hidden elementni hamma uchun yashiradi va ba'zi vositalar bunday label'ni umuman o'qimaydi. "Ko'rinmas, lekin o'qiladigan" — bu aria-label yoki korinmas klass.

6.3 Qaysi birini tanlash?

Birinchi tanlov har doim — ko'rinadigan label. U hammaga yordam beradi. Ko'rinmas usul faqat dizayn haqiqatan talab qilganda, va ma'no baribir ko'rinib turganda (lupa belgisi, "Qidirish" tugmasi) ishlatiladi.

7. Bir nechta label va boshqa qoidalar

7.1 Bitta maydonga ikki label

Bitta maydonga bir nechta label bog'lash mumkin:

<label for="odam">Necha kishi</label>
<input type="text" id="odam" name="odam">
<label for="odam">(20 kishidan ko'p bo'lsa, qo'ng'iroq qiling)</label>

Ikkala label ham bosiladi va maydonni faollashtiradi. Ekran o'quvchi ikkala matnni ketma-ket o'qiydi. Lekin bu kam ishlatiladi: qo'shimcha izoh uchun boshqa, maxsus usul bor (aria-describedby) — uni Qulay va accessible forma darsida ko'ramiz.

Teskarisi mumkin emas: bitta label — faqat bitta maydon.

7.2 Label qaysi elementlarga bo'ladi

Label faqat forma elementlariga bog'lanadi: input, textarea, select, button, shuningdek meter, output, progress. Ularning ko'pini keyingi darslarda o'rganamiz.

button ga label shart emas: tugmaning nomi — uning ichidagi matn ("Joy band qilish"). Sarlavha yoki paragrafga label bog'lab bo'lmaydi — for ularni e'tiborsiz qoldiradi.

7.3 «Bahor»: formani yangilaymiz

O'tgan darsdagi formani for/id bilan qayta yozamiz. Har bir juftlikni div ichiga olamiz (div va span) — shunda har biri alohida qatordan boshlanadi:

<form method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism">
  </div>
  <div>
    <label for="telefon">Telefon</label>
    <input type="text" id="telefon" name="telefon"
           placeholder="+998 90 000 00 00">
  </div>
  <div>
    <label for="odam">Necha kishi</label>
    <input type="text" id="odam" name="odam">
  </div>
  <button type="submit">Joy band qilish</button>
</form>

div — blok element, shuning uchun har bir "label + maydon" juftligi yangi qatordan boshlanadi. O'tgan darsdagi "hammasi bir qatorga tizilib qoldi" muammosi CSS'siz hal bo'ldi.

8. Label'ni DevTools'da tekshirish

Label bog'langanini ko'z bilan bilib bo'lmaydi: bog'langan va bog'lanmagan label ekranda bir xil ko'rinadi. Uch usul bor:

1. Bosib ko'ring. Label matnini bosing. Kursor maydonga tushdimi? Tushmagan bo'lsa — bog'lanish yo'q.
2. Accessibility paneli. F12 → Elements'da maydonni tanlang. O'ng tomondagi yorliqlar orasidan Accessibility ni oching. Computed Properties qismida Name: "Ismingiz" turishi kerak. Nom bo'sh bo'lsa — label bog'lanmagan.
3. Issues va Lighthouse. Chrome'ning Issues panelida No label associated with a form field ("Forma maydoniga bog'langan label yo'q") ogohlantirishi chiqadi. Lighthouse'ning Accessibility auditi ham xuddi shuni topadi: Form elements do not have associated labels.

Maslahat: Label'ni tekshirishning eng tez usuli — sichqonchasiz ishlash. Tab bilan maydondan maydonga o'ting. Har bir maydonda "Bu yerga nima yozishim kerak?" savoliga ekranning o'zi javob beryaptimi? Bu odat keyinroq Klaviatura va fokus darsida asqotadi.

9. Ko'p uchraydigan xatolar

9.1 for va id bir-biriga mos emas

<label for="Telefon">Telefon</label>
<input type="text" id="telefon" name="telefon">

Telefon va telefon — ikki xil qiymat: id da katta-kichik harf farqlanadi. Bog'lanish yo'q, lekin brauzer xato ham bermaydi. Tuzatish: for ga id ni harfma-harf ko'chiring. Yaxshisi — nusxalab qo'ying.

9.2 for ga name yozish

<label for="ism">Ismingiz</label>
<input type="text" name="ism">

Maydonda id yo'q, faqat name. for esa faqat id ni qidiradi. Tuzatish: maydonga id="ism" qo'shing.

9.3 Takrorlangan id

Sahifaning pastida obuna formasi ham bor deylik va unda ham id="ism" ishlatilgan. Endi ikkala label for="ism" ham birinchi maydonga bog'lanadi. Pastdagi label'ni bossangiz, kursor sahifaning yuqorisiga sakraydi. Tuzatish: id sahifada noyob bo'lsin: band-ism, obuna-ism. HTML validator takrorlangan id ni xato sifatida ko'rsatadi.

9.4 Faqat placeholder

5-bo'limda ko'rdik: placeholder label emas. Validator buni xato demaydi — shuning uchun bu xato juda keng tarqalgan. Tuzatish: har maydonga ko'rinadigan label, placeholder esa faqat namuna uchun.

9.5 Label ichida ikki maydon

<label>
  Ism va familiya
  <input type="text" name="ism">
  <input type="text" name="familiya">
</label>

Label faqat birinchi maydonning nomi bo'ladi. Ikkinchisi nomsiz qoladi. Tuzatish: har bir maydonga alohida label.

10. Mashqlar

1-mashq (oson): Bog'lang

Bo'sh joylarni to'ldiring — label va maydon bog'lansin:

<label for="mehmon-ismi">Ismingiz</label>
<input type="text" id="___" name="ism">

id qiymati:

<label for="mehmon-ismi">Ismingiz</label>
<input type="text" id="mehmon-ismi" name="ism">

2-mashq (o'rta): Placeholder'dan label'ga

«Bahor» saytining pastida (footer) Telegram kanal yangiliklariga obuna formasi bor. Uni tuzating: har maydonga ko'rinadigan label qo'shing, placeholder'ni namuna sifatida qoldiring. id lar sahifadagi boshqa formalar bilan to'qnashmasin.

<form method="post">
  <input type="text" name="ism" placeholder="Ismingiz">
  <input type="text" name="telefon" placeholder="Telefon">
  <button type="submit">Obuna bo'lish</button>
</form>

<form method="post">
  <div>
    <label for="obuna-ism">Ismingiz</label>
    <input type="text" id="obuna-ism" name="ism"
           placeholder="masalan, Malika">
  </div>
  <div>
    <label for="obuna-telefon">Telefon</label>
    <input type="text" id="obuna-telefon" name="telefon"
           placeholder="+998 90 000 00 00">
  </div>
  <button type="submit">Obuna bo'lish</button>
</form>

3-mashq (qiyin): Qidiruvga nom va tekshiruv

menyu/index.html dagi qidiruv formasini ikki usulda yozing:

1. Ko'rinadigan label bilan.
2. aria-label bilan (dizayner ko'rinadigan label'ni xohlamadi).

Keyin ikkala variantni DevTools'ning Accessibility panelida tekshiring: maydonning Name qiymati nima? Qaysi variantda label matnini bosib, maydonni faollashtirish mumkin?

<search>
  <form action="/menyu/">
    <label for="menyu-qidiruv">Menyudan qidirish</label>
    <input type="search" id="menyu-qidiruv" name="q">
    <button type="submit">Qidirish</button>
  </form>
</search>

<search>
  <form action="/menyu/">
    <input type="search" name="q" aria-label="Menyudan qidirish">
    <button type="submit">Qidirish</button>
  </form>
</search>

11. Real ishda

• Accessibility auditi. Kompaniyalar saytni tekshirganda eng ko'p topiladigan xatolar ro'yxatining boshida — "label'siz forma maydonlari". Lighthouse va axe kabi vositalar uni avtomatik topadi.
• Qonun talabi. Yevropa Ittifoqida 2025-yildan onlayn do'kon va bank xizmatlari accessible bo'lishi shart. Label'siz forma — birinchi tekshiriladigan narsalardan biri.
• Testlarda. Avtomatik test vositalari (Testing Library, Playwright — kursda o'rganamiz) maydonni aynan label matni bo'yicha topadi: "Telefon" nomli maydonni top va unga raqam yoz. Label'siz formani test qilish qiyinlashadi.
• Intervyuda so'rashadi: "Placeholder label'ni almashtira oladimi?" Javob: yo'q — va endi nega ekanini uch sababda ayta olasiz.

Xulosa

• label — maydon nomi; u for/id orqali yoki maydonni o'rab olib bog'lanadi.
• Bog'langan label bosiladigan hududni kattalashtiradi, ekran o'quvchiga nom beradi, avtoto'ldirishga yordam beradi.
• for faqat id ni qidiradi; id sahifada noyob va harfma-harf mos bo'lishi kerak.
• Placeholder — namuna, nom emas: u yo'qoladi, yomon ko'rinadi va ishonchsiz.
• Ko'rinadigan label — birinchi tanlov; ko'rinmas nom uchun aria-label, aria-labelledby yoki korinmas klass.
• Bog'lanishni label'ni bosib va DevTools'ning Accessibility panelida tekshiring.

Keyingi dars: Matnli maydonlar — type atributining email, telefon, parol, URL va qidiruv qiymatlari hamda ko'p qatorli textarea bilan tanishamiz.

Manbalar

• MDN: "<label>: The Label element" va "<input>" sahifasidagi placeholder bo'limi — developer.mozilla.org
• WHATWG HTML: "The label element" — html.spec.whatwg.org
• W3C WAI: "Labeling Controls" (Forms Tutorial) — w3.org/WAI