Qulay va accessible HTML forma: yo'riqnoma, xato xabari va fokus tartibi

Qisqacha: Qulay forma — kam maydonli, bitta ustunli, har maydonida ko'rinadigan label va kerak bo'lsa qisqa yo'riqnomasi bor forma. Yo'riqnoma va xato xabari maydonga aria-describedby bilan bog'lanadi, xatoli maydon aria-invalid="true" oladi. Xato xabari nima noto'g'ri ekanini va qanday tuzatishni aniq aytadi, Tab tartibi esa kod tartibiga mos keladi.

Bu darsda

• Formadagi ortiqcha maydonlarni topib, olib tashlay olasiz.
• Majburiy va ixtiyoriy maydonlarni tushunarli belgilaysiz.
• Yo'riqnoma va xato xabarini aria-describedby bilan maydonga bog'laysiz.
• Yaxshi xato xabari yozasiz va uni to'g'ri joyga qo'yasiz.
• «Bahor» choyxonasining stol band qilish formasini to'liq, accessible holatga keltirasiz.

Oldin bilishingiz kerak: label: har maydonning nomi, Guruhlash va natija elementlari, Brauzer validatsiyasi, autocomplete: avtoto'ldirish bilan do'stlashish.

1. Nega bu kerak?

O'tgan darsda autocomplete bilan formani bir bosishda to'ldirishni o'rgandik. Endi formaning o'zini ko'z oldingizga keltiring. Siz telefonda taksi chaqiryapsiz. Forma 12 ta maydon so'raydi, biri qizil bo'lib qoldi, lekin nega — yozilmagan. Nima qilasiz? Ko'pchilik shunchaki yopib chiqib ketadi.

Choyxona uchun bu — yo'qolgan mijoz. Ekran o'quvchidan foydalanadigan ko'zi ojiz mehmon uchun esa bundan ham yomon. U qizil rangni ko'rmaydi. Xato xabari maydonga bog'lanmagan bo'lsa, u umuman eshitmaydi.

Accessible forma (accessible — "foydalanish mumkin bo'lgan") — hamma, jumladan ekran o'quvchi, faqat klaviatura yoki kattalashtirilgan ekran bilan ishlaydigan odam ham to'ldira oladigan forma. Qiziq tomoni shundaki, bunday forma hamma uchun qulayroq bo'ladi. Xuddi bino kirishidagi pandus kabi: u nogironlik aravachasi uchun qurilgan, lekin chamadonli yo'lovchi va bolalar aravachasi bilan kelgan ona ham undan foydalanadi.

Formalar moduli yakuniga yaqinlashdi. Bu darsda oldingi 12 darsda o'rgangan hamma narsani yig'ib, «Bahor» choyxonasining stol band qilish formasini tugatamiz. Keyingi ikki darsda uni himoyalaymiz va zamonaviy imkoniyatlar bilan boyitamiz.

2. Kam maydon — kam xato

2.1 Har maydon — mijozdan so'ralgan "to'lov"

Har bir qo'shimcha maydon odamdan vaqt va diqqat oladi. Maydon qancha ko'p bo'lsa, formani oxirigacha to'ldirganlar shuncha kam. Shuning uchun birinchi savol "qanday belgilaymiz?" emas, balki "bu maydon umuman kerakmi?".

Choyxona egasi Jasur aka birinchi rejani shunday yozgan edi:

Yetti qatordan uchtasi qoldi. Yig'ilmagan ma'lumot — o'g'irlanmaydigan ma'lumot ham. Bu haqda keyingi darsda gaplashamiz.

2.2 Bitta ustun va mantiqiy tartib

Odam formani yuqoridan pastga, bitta chiziq bo'ylab o'qiydi. Maydonlar ikki ustunda tursa, ko'z zigzag bo'lib yuradi va bitta maydon tushib qoladi. Shuning uchun har qatorda bitta maydon bo'ladi.

Tartib esa suhbatdagidek bo'lsin: avval "siz kimsiz?", keyin "qachon kelasiz?", oxirida "qo'shimcha istak bormi?". Bir-biriga bog'liq maydonlar fieldset ichida birga turadi. Buni Guruhlash darsida ko'rgan edik.

HTML'da maydonlar o'z-o'zidan ketma-ket joylashadi, shuning uchun bitta ustunga hech narsa qo'shish kerak emas. Chiroyli joylashuvni keyinroq CSS bilan qilamiz — Forma komponentlari darsida.

Tekshirib ko'ring: Choyxonaning "Fikringizni yozing" formasida 6 ta maydon bor: ism, telefon, email, shahar, baho, izoh. Qaysilarini olib tashlash mumkin?

3. Majburiy va ixtiyoriy maydonlar

3.1 required — majburiylikning asosiy belgisi

Brauzer validatsiyasi darsida required atributini o'rgandik. U ikki ish qiladi. Birinchisi — bo'sh formani yuborishga yo'l qo'ymaydi. Ikkinchisi — ekran o'quvchiga "bu maydon majburiy" deb aytadi. Ekran o'quvchi maydon nomidan keyin "required" (majburiy) so'zini qo'shib o'qiydi.

Lekin ko'radigan odam uchun ham belgi kerak. Aks holda u yuborish tugmasini bosgandagina bilib qoladi.

3.2 Ikki usul

1-usul: ixtiyoriylarini belgilash. Formadagi maydonlarning ko'pi majburiy bo'lsa, ozchiligiga "(ixtiyoriy)" deb yozing:

<p>Hamma maydonlar majburiy, ixtiyoriylari belgilangan.</p>

<label for="izoh">Qo'shimcha istaklar (ixtiyoriy)</label>
<textarea id="izoh" name="izoh" rows="3"></textarea>

Bu usul qisqa matnli, shovqinsiz va tushunarli. Katta davlat saytlari (masalan, Britaniyaning GOV.UK tizimi) aynan shunday qiladi.

2-usul: majburiylarini yulduzcha bilan belgilash. Ko'p saytlarda * belgisi uchraydi:

<p>Yulduzcha (*) bilan belgilangan maydonlar majburiy.</p>

<label for="ism">Ismingiz <span aria-hidden="true">*</span></label>
<input id="ism" name="ism" type="text" required>

Yulduzcha nimani anglatishi forma boshida albatta yoziladi — hamma ham buni bilmaydi. Ba'zi ekran o'quvchilar * ni "star" (yulduz) deb o'qiydi. Shuning uchun u aria-hidden="true" bilan yashirilgan: bu atributni SVG darsida ko'rgan edik. Majburiylik haqida ekran o'quvchiga required o'zi aytadi.

Maslahat: Bitta formada ikki usulni aralashtirmang. Choyxona formamizda deyarli hamma maydon majburiy — shuning uchun 1-usulni tanlaymiz.

Diqqat: Ba'zi darsliklarda required bilan birga aria-required="true" ham yoziladi. Oddiy input, select va textarea uchun bu ortiqcha — required yetarli. aria-required faqat o'zingiz yasagan maxsus elementlarda kerak bo'ladi, buni ARIA asoslari darsida ko'ramiz.

4. Yo'riqnoma va aria-describedby

4.1 Label yetmaydigan holat

Telefon maydoni. label "Telefon raqamingiz" deydi. Lekin mehmon savol beradi: "+998 bilan yozaymi? Bo'sh joy qo'yaymi? Nega raqamimni so'rashyapti?". Bu savollarga javob — yo'riqnoma (hint): label ostidagi qisqa tushuntirish matni.

label darsida ko'rgandik: placeholder yo'riqnoma o'rnini bosmaydi. U yozish boshlanishi bilan yo'qoladi va rangi xira. Yo'riqnoma doim ko'rinib turadigan oddiy matn bo'lishi kerak.

4.2 Matnni maydonga bog'lash

Oddiy matn ko'radigan odam uchun yetarli. Ekran o'quvchi esa Tab bilan maydonga o'tganda faqat label'ni o'qiydi. Label va maydon orasidagi matnni u o'tkazib yuboradi. Shuning uchun yo'riqnomani maydonga "ulash" kerak.

aria-describedby — maydonga qo'shimcha tavsif beradigan atribut. Qiymati — tavsif matni turgan elementning id si. Ekran o'quvchi avval nomni, keyin turini, keyin tavsifni o'qiydi.

<label for="telefon">Telefon raqamingiz</label>
<span id="telefon-yordam">
  Masalan: +998 90 000 00 00. Bronni tasdiqlash uchun
  qo'ng'iroq qilamiz.
</span>
<input id="telefon" name="telefon" type="tel"
       autocomplete="tel" required
       aria-describedby="telefon-yordam">

Qatorma-qator:

• span id="telefon-yordam" — yo'riqnoma matni. Unga noyob id berdik.
• aria-describedby="telefon-yordam" — "mening tavsifim o'sha id li elementda" degani. Qiymatda # yo'q, faqat id ning o'zi.
• Yo'riqnoma label bilan maydon orasida turibdi. Telefonda klaviatura ochilganda maydon ostidagi matn yopilib qolishi mumkin. Ustidagi esa doim ko'rinadi.

Ekran o'quvchi taxminan shunday o'qiydi:

Telefon raqamingiz, tahrirlash maydoni, majburiy.
Masalan: +998 90 000 00 00. Bronni tasdiqlash uchun
qo'ng'iroq qilamiz.

Aniq so'zlar va ularning tartibi ekran o'quvchiga qarab farq qiladi. Lekin ma'nosi bir xil: nom, holat va tavsif.

4.3 label va aria-describedby farqi

Nom — "bu nima?", tavsif — "qanday to'ldiraman?". Yo'riqnomani label ichiga tiqmang: "Telefon raqamingiz, masalan +998..., qo'ng'iroq qilamiz" — bu nom emas, butun paragraf.

4.4 Bir nechta tavsif

aria-describedby ga bir nechta id ni bo'sh joy bilan yozish mumkin. Ular yozilgan tartibda o'qiladi:

<input id="telefon" name="telefon" type="tel"
       aria-describedby="telefon-yordam telefon-xato">

Bu bizga xato xabarini qo'shishda kerak bo'ladi. Bo'sh joyni to'ldiring: tavsif matni qaysi elementda ekanini aria-describedby shu elementning qaysi atributi orqali topadi?

Tekshirib ko'ring: Nega yo'riqnomani placeholder ga yozish yomon, hatto aria-describedby ishlatilmasa ham?

5. Xato xabarlari

5.1 Yaxshi xato xabari qanday bo'ladi

Xato xabari — forma va odam orasidagi eng nozik lahza. Odam allaqachon vaqt sarfladi, endi esa "sen xato qilding" deb eshityapti. Xabar yordam bersin, ayblamasin.

Yaxshi xabarning uchta belgisi:

1. Qaysi maydon — nomi aytiladi.
2. Nima noto'g'ri — aniq, texnik so'zlarsiz.
3. Qanday tuzatish — kerak bo'lsa, misol bilan.

5.2 Xabar qayerda turadi

Brauzerning o'z validatsiyasi xabarni kichik "pufakcha" (bubble) ko'rinishida chiqaradi. Brauzer validatsiyasi darsida ko'rgandik: u bir necha soniyada yo'qoladi va brauzer tilida yoziladi. Shuning uchun jiddiy formalarda server xatolarni tekshirib, sahifani xato matnlari bilan qaytaradi.

Server qaytargan sahifada xato matni maydonning o'zi yonida bo'ladi — label va yo'riqnomadan keyin, maydondan oldin:

<div>
  <label for="telefon">Telefon raqamingiz</label>
  <span id="telefon-yordam">
    Masalan: +998 90 000 00 00.
  </span>
  <span id="telefon-xato">
    Xato: telefon raqamini to'liq kiriting.
  </span>
  <input id="telefon" name="telefon" type="tel"
         autocomplete="tel" required value="+998 90 12"
         aria-invalid="true"
         aria-describedby="telefon-yordam telefon-xato">
</div>

Bu yerda uchta yangi narsa bor:

• aria-invalid="true" — "bu maydonning qiymati xato" degan holat. Ekran o'quvchi maydonga kelganda "invalid entry" (noto'g'ri kiritilgan) deb qo'shimcha qiladi. Xato tuzatilgach, atribut olib tashlanadi.
• aria-describedby endi ikkita id ni ko'rsatadi: avval yo'riqnoma, keyin xato. Ekran o'quvchi ikkalasini o'qiydi.
• value="+998 90 12" — mehmon kiritgan qiymat saqlangan. Xato bo'lsa, formani bo'shatib qaytarmang. Odam hammasini qaytadan yozishga majbur bo'lmasin.

Diqqat: aria-invalid="true" ni sahifa ochilganda, hali hech narsa yozilmagan maydonga qo'ymang. Ekran o'quvchi mehmon hali boshlamasdanoq "noto'g'ri" deb e'lon qiladi. Bu atribut faqat haqiqiy xatodan keyin paydo bo'ladi.

5.3 Faqat rangga tayanmang

Ko'p saytlarda xatoli maydon shunchaki qizil bo'ladi. Lekin har 12 erkakdan taxminan bittasi rangni farqlashda qiynaladi. Oq-qora ekranda yoki quyosh ostida qizil ham ko'rinmaydi.

Shuning uchun xato doim matn bilan aytiladi. Yuqoridagi misolda "Xato:" so'zi bor — rang bo'lmasa ham ma'no qoladi. Qizil rang va ikonka keyinroq CSS bilan qo'shimcha sifatida qo'shiladi.

Tekshirib ko'ring: Mehmonlar soniga 35 yozildi, ruxsat — 1 dan 20 gacha. Xato xabarini yozing.

6. Xatolar xulosasi va sahifa sarlavhasi

6.1 Forma tepasidagi ro'yxat

Uzun formada 3 ta xato bo'lsa, mehmon ularni qidirib pastga-tepaga yurmasin. Server qaytargan sahifada forma boshiga xatolar xulosasi qo'yiladi:

<div>
  <h2>Formada 2 ta xato bor</h2>
  <ul>
    <li><a href="#telefon">Telefon raqamini to'liq kiriting</a></li>
    <li><a href="#sana">Sana bugundan oldin bo'lmasin</a></li>
  </ul>
</div>

Har bir xato — o'sha maydonga havola. Sahifa ichidagi havolalar darsidagi #id ni eslang. Havola bosilganda brauzer maydonga o'tadi va maydon fokus oladi — mehmon darhol yozishni boshlaydi. Xulosadagi matn maydon yonidagi xabar bilan bir xil bo'lsin.

6.2 title da ham xato borligini ayting

Sahifa qayta yuklanganda ekran o'quvchi birinchi bo'lib title ni o'qiydi. Shuning uchun xatoli sahifada sarlavha boshiga "Xato:" qo'shiladi:

<title>Xato: Stol band qilish — Choyxona «Bahor»</title>

Ko'zi ojiz mehmon sahifa ochilishi bilan "nimadir to'g'ri bo'lmadi" ekanini biladi. Brauzer tabida ham shu yozuv ko'rinadi.

Maslahat: Sahifa ochilganda fokusni avtomatik ravishda xatolar xulosasiga ko'chirish mumkin. Lekin buning uchun JavaScript kerak — Constraint Validation API darsida ko'ramiz.

7. Qachon tekshirish kerak: yuborishda yoki yozish paytida?

Xatoni uch xil paytda ko'rsatish mumkin:

Faqat HTML bilan bizda oxirgi usul bor. Yuborish bosilganda brauzer birinchi xatoli maydonga fokusni o'zi ko'chiradi va xabar ko'rsatadi. Keyin server hammasini qayta tekshiradi.

"Maydondan chiqqanda" usulini CSS'dagi :user-invalid va JavaScript beradi. Ularni Zamonaviy forma imkoniyatlari darsida qisqa ko'ramiz, to'liq esa CSS va JS qismlarida o'rganamiz. Qoida esa hozirdan: xato faqat odam maydon bilan ishlab bo'lgandan keyin ko'rinsin.

Diqqat: "Forma to'liq bo'lmaguncha yuborish tugmasi disabled bo'lsin" — mashhur, lekin yomon usul. Maydon holatlari darsida ko'rgandek, disabled element fokus olmaydi. Mehmon kulrang tugmaga qaraydi va nega bosilmayotganini tushunmaydi. Tugmani doim faol qoldiring, bosilganda esa xatolarni ko'rsating.

8. Fokus tartibi

8.1 Tab tartibi = kod tartibi

Faqat klaviatura bilan ishlaydigan odam formada Tab tugmasi bilan yuradi. Tab keyingi maydonga, Shift + Tab oldingisiga o'tkazadi. Tartib esa HTML koddagi tartib bilan bir xil.

Demak, kodni mantiqiy tartibda yozsangiz, fokus tartibi ham to'g'ri bo'ladi. O'zingiz sinab ko'ring: formani oching, sichqonchani chetga qo'ying va faqat Tab bilan oxirigacha boring.

• Radio guruhida Tab guruhga bir marta kiradi. Tanlov strelka tugmalari bilan almashadi.
• Space checkbox'ni belgilaydi, Enter esa ko'pincha formani yuboradi.
• Fokusdagi element atrofida ramka (outline) ko'rinadi. Uni hech qachon olib tashlamang — bu klaviaturadagi odamning "sichqoncha kursori".

8.2 Tartibni buzadigan narsalar

• Tab tartibini qo'lda o'zgartirish. Buning uchun maxsus atribut bor, lekin musbat qiymat bilan uni ishlatmang — Fokus va tahrir atributlari darsida sababini ko'rasiz.
• Ko'rinish va kod tartibi farq qilsa. Keyinroq CSS bilan elementlarni joyidan siljitish mumkin. Unda ko'z bir tartibda o'qiydi, Tab boshqasida yuradi.
• Keraksiz autofocus. Maydon holatlari darsida ko'rdik: u sahifa ochilishi bilan fokusni maydonga olib boradi. Ekran o'quvchi sarlavha va tushuntirishni o'tkazib yuboradi. Faqat sahifaning yagona vazifasi forma bo'lsa ishlating (masalan, qidiruv sahifasi).

Tekshirib ko'ring: Formada "Stolni band qilish" tugmasi kodda eng tepada, maydonlardan oldin yozilgan. Klaviaturadagi odam uchun nima bo'ladi?

8.3 Yuborish tugmasi — oxirida va aniq matnli

<button type="submit"> (Tugmalar va yuborish) formaning eng oxirida, oxirgi maydondan keyin turadi. Uning matni nima bo'lishini aytsin: "Yuborish" — umumiy so'z, "Stolni band qilish" esa aniq. Ekran o'quvchida odam tugmalar ro'yxatini ochganda aynan shu matnni eshitadi.

9. «Bahor» bron formasi: to'liq versiya

Endi hamma bilimni yig'amiz. Bu — formalar modulidagi loyihamizning yakuniy holati:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Stol band qilish — Choyxona «Bahor»</title>
</head>
<body>
  <main>
    <h1>Stol band qilish</h1>
    <p>Hamma maydonlar majburiy, ixtiyoriylari belgilangan.</p>

    <form action="https://example.com/bron"
          method="post">
      <fieldset>
        <legend>Siz haqingizda</legend>

        <div>
          <label for="ism">Ismingiz</label>
          <input id="ism" name="ism" type="text"
                 autocomplete="name"
                 required maxlength="50">
        </div>

        <div>
          <label for="telefon">Telefon raqamingiz</label>
          <span id="telefon-yordam">
            Masalan: +998 90 000 00 00. Bronni tasdiqlash
            uchun qo'ng'iroq qilamiz.
          </span>
          <input id="telefon" name="telefon" type="tel"
                 autocomplete="tel" required
                 pattern="[0-9 +\-]{9,17}"
                 aria-describedby="telefon-yordam">
        </div>
      </fieldset>

      <fieldset>
        <legend>Tashrif</legend>

        <div>
          <label for="sana">Sana</label>
          <span id="sana-yordam">
            Bron 30 kun oldindan ochiq.
          </span>
          <input id="sana" name="sana" type="date"
                 min="2026-10-01" max="2026-10-31" required
                 aria-describedby="sana-yordam">
        </div>

        <div>
          <label for="vaqt">Vaqt</label>
          <select id="vaqt" name="vaqt" required>
            <option value="">Vaqtni tanlang</option>
            <option value="12:00">12:00</option>
            <option value="15:00">15:00</option>
            <option value="18:00">18:00</option>
            <option value="20:00">20:00</option>
          </select>
        </div>

        <div>
          <label for="odam">Mehmonlar soni</label>
          <span id="odam-yordam">
            20 kishidan ko'p bo'lsa, qo'ng'iroq qiling.
          </span>
          <input id="odam" name="odam"
                 type="number" min="1" max="20" value="2"
                 required aria-describedby="odam-yordam">
        </div>
      </fieldset>

      <fieldset>
        <legend>Qayerda o'tirasiz?</legend>

        <div>
          <input id="joy-zal" name="joy" type="radio"
                 value="zal" checked>
          <label for="joy-zal">Umumiy zal</label>
        </div>
        <div>
          <input id="joy-ayvon" name="joy" type="radio"
                 value="ayvon">
          <label for="joy-ayvon">Ayvon (ochiq havoda)</label>
        </div>
        <div>
          <input id="joy-xona" name="joy" type="radio"
                 value="xona" aria-describedby="xona-yordam">
          <label for="joy-xona">Alohida xona</label>
          <span id="xona-yordam">8 kishidan boshlab.</span>
        </div>
      </fieldset>

      <div>
        <label for="izoh">Qo'shimcha istaklar (ixtiyoriy)</label>
        <span id="izoh-yordam">
          Masalan: tug'ilgan kun, bolalar stuli.
        </span>
        <textarea id="izoh" name="izoh" rows="3"
                  maxlength="200"
                  aria-describedby="izoh-yordam"></textarea>
      </div>

      <button type="submit">Stolni band qilish</button>
    </form>
  </main>
</body>
</html>

Kod html-validate dan xatosiz o'tadi. Nima qaysi darsdan kelganini ko'rib chiqamiz:

Bir nechta nozik qaror:

• Telefonda pattern yumshoq. U raqam, bo'sh joy, + va tireni qabul qiladi — autocomplete darsidagi yumshatilgan shablon. Raqamni to'liq tekshirish — server ishi. Brauzerdagi qattiq qoida ba'zan to'g'ri raqamni ham rad etadi.
• Sana chegaralari. min va max ni har kuni server yangilab yozadi — HTML'ning o'zi "bugun" nimaligini bilmaydi.
• Vaqt — select. Son, sana, vaqt darsida type="time" ni min, max va step bilan yozgan edik. Endi choyxona faqat to'rtta aniq vaqtda bron qabul qiladi — to'rt variant uchun select telefonda tezroq.
• Radio'da checked. Ko'pchilik zalni tanlaydi — standart tanlov mehmonning bitta harakatini tejaydi.

Maslahat: Muvaffaqiyatli yuborishdan keyin server tasdiqlash sahifasini qaytaradi. Masalan: "Rahmat, Malika! 12-oktabr, 18:00 ga 4 kishilik stol band qilindi. Tasdiqlash uchun qo'ng'iroq qilamiz." Mehmon nima bo'lganini aniq bilsin.

10. Ko'p uchraydigan xatolar

10.1 aria-describedby yo'q id ni ko'rsatadi

<!-- ❌ id="telefon-yordam" emas, "telefon_yordam" -->
<span id="telefon_yordam">Masalan: +998 90 000 00 00</span>
<input id="telefon" name="telefon" type="tel"
       aria-describedby="telefon-yordam">

Brauzer xato bermaydi — tavsif shunchaki o'qilmaydi. html-validate esa ushlaydi:

Element references missing id "telefon-yordam"

Tarjimasi: "Element mavjud bo'lmagan telefon-yordam id siga havola qilyapti." Tuzatish: ikki joydagi nomni bir xil qiling. Chiziqcha va pastki chiziq — har xil belgilar.

10.2 aria-describedby qiymatida # yoki vergul

aria-describedby="#telefon-yordam" yoki "telefon-yordam, telefon-xato" — ikkalasi ham ishlamaydi. Qiymat — faqat id lar, bo'sh joy bilan ajratilgan. # havolada (href) kerak, bu yerda emas.

10.3 Xato xabari maydonga bog'lanmagan

Xato matni ekranda bor, lekin aria-describedby da yo'q. Ko'radigan odam uchun hammasi joyida, ekran o'quvchi esa jim. Tuzatish: xabarga id bering va uni aria-describedby ga qo'shing, maydonga aria-invalid="true" qo'ying.

10.4 Label o'rniga placeholder

<!-- ❌ label yo'q -->
<input name="ism" type="text" placeholder="Ismingiz">

html-validate:

<input> element does not have a <label>

Tarjimasi: "input elementining label i yo'q." Tuzatish: ko'rinadigan label for qo'shing, placeholder ni olib tashlang yoki faqat misol uchun qoldiring.

10.5 Umumiy xabarlar

"Xato!", "Formada xato bor", "Invalid input" — odamga hech narsa demaydi. Har xato uchun maydon nomi, sabab va yechim yozing.

11. Mashqlar

1-mashq (oson): Yo'riqnomani ulang

Obuna formasida email maydoni bor. Uning ostiga "Haftada bir marta yangi taomlar haqida yozamiz" degan yo'riqnoma qo'shing va uni maydonga ulang.

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

Eslatma: yo'riqnoma label bilan maydon orasiga yoziladi. Unga id beriladi, maydon esa uni aria-describedby bilan ko'rsatadi.

<label for="email">Email manzilingiz</label>
<span id="email-yordam">
  Haftada bir marta yangi taomlar haqida yozamiz.
</span>
<input id="email" name="email" type="email"
       autocomplete="email" required
       aria-describedby="email-yordam">

2-mashq (o'rta): Server qaytargan xato holati

Mehmon mehmonlar soniga 35 yozdi. Server sahifani qaytaryapti. odam maydonining xato holatini yozing: yo'riqnoma, xato matni, saqlangan qiymat va ikkita ARIA atributi bilan. Bo'sh joylarni to'ldiring:

<label for="odam">Mehmonlar soni</label>
<span id="odam-yordam">
  20 kishidan ko'p bo'lsa, qo'ng'iroq qiling.
</span>
<span id="odam-xato">
  Xato: mehmonlar soni 1 dan 20 gacha bo'lsin.
</span>
<input id="odam" name="odam" type="number"
       min="1" max="20" required value="35"
       aria-invalid="...."
       aria-describedby="...">

aria-invalid qiymati: [:true]. aria-describedby qiymati: [:odam-yordam odam-xato]

Qo'shimcha: shu xato uchun forma tepasidagi xulosa ro'yxatining bitta qatorini yozing.

<input id="odam" name="odam" type="number"
       min="1" max="20" required value="35"
       aria-invalid="true"
       aria-describedby="odam-yordam odam-xato">

<li>
  <a href="#odam">Mehmonlar soni 1 dan 20 gacha bo'lsin</a>
</li>

3-mashq (qiyin): Taksi chaqirish formasini tuzating

Quyidagi forma 6 ta qoidani buzadi. Hammasini toping va to'g'ri versiyasini yozing.

<form action="https://example.com/taksi" method="post">
  <button type="submit" disabled>Yuborish</button>
  <input name="qayerdan" type="text"
         placeholder="Qayerdan">
  <input name="qayerga" type="text" placeholder="Qayerga">
  <input name="familiya" type="text"
         placeholder="Familiya">
  <input name="telefon" type="tel" placeholder="Telefon"
         aria-invalid="true">
</form>

Eslatma: tekshirish uchun html-validate ni ishlating va faylni brauzerda faqat Tab bilan aylanib chiqing.

<form action="https://example.com/taksi" method="post">
  <div>
    <label for="qayerdan">Qayerdan</label>
    <input id="qayerdan" name="qayerdan" type="text"
           required>
  </div>
  <div>
    <label for="qayerga">Qayerga</label>
    <input id="qayerga" name="qayerga" type="text"
           required>
  </div>
  <div>
    <label for="telefon">Telefon raqamingiz</label>
    <span id="telefon-yordam">
      Haydovchi shu raqamga qo'ng'iroq qiladi.
    </span>
    <input id="telefon" name="telefon" type="tel"
           autocomplete="tel" required
           aria-describedby="telefon-yordam">
  </div>
  <button type="submit">Taksi chaqirish</button>
</form>

12. Real ishda

• Davlat va bank saytlari. Britaniyaning GOV.UK Design System'i — formalar bo'yicha eng mashhur namuna. "(ixtiyoriy)" belgisi, xatolar xulosasi va title dagi "Error:" aynan o'sha yerdan. my.gov.uz yoki bank ilovasidagi formani shu ko'z bilan ko'rib chiqing.
• Qonun. Yevropa Ittifoqida 2025-yil iyunidan kuchga kirgan European Accessibility Act onlayn do'kon va bank xizmatlaridan accessible bo'lishni talab qiladi. Xorijiy buyurtmachi bilan ishlasangiz, bu shartnomada yoziladi.
• WCAG 2.2 — accessibility xalqaro standarti. Formaga tegishli mezonlar: 3.3.1 (xatoni aniqlash), 3.3.2 (label va yo'riqnoma), 3.3.3 (tuzatish taklifi), 2.4.3 (fokus tartibi). Ularni Accessibility nima darsida batafsil ko'ramiz.
• Kompaniyalarda forma odatda tayyor komponent bo'ladi (React'da — kursda alohida o'rganamiz). Lekin uning ichida aynan shu label, aria-describedby va aria-invalid turadi.
• Intervyuda so'raladi: "Xato xabarini ekran o'quvchi uchun qanday accessible qilasiz?" Javob: xabarni aria-describedby bilan bog'lash, aria-invalid, faqat rangga tayanmaslik.

Xulosa

• Eng yaxshi maydon — yo'q maydon: har maydon uchun "bu bilan nima qilamiz?" deb so'rang.
• Bitta ustun va suhbatdagidek tartib; bog'liq maydonlar fieldset da.
• Majburiylikni required bildiradi; ko'rinadigan belgi — "(ixtiyoriy)" yoki izohlangan *.
• Yo'riqnoma va xato xabari maydonga aria-describedby bilan bog'lanadi, xatoli maydon aria-invalid="true" oladi.
• Xato xabari: qaysi maydon, nima noto'g'ri, qanday tuzatish; rang faqat qo'shimcha.
• Tab tartibi — kod tartibi; tugma oxirida, matni aniq va hech qachon disabled emas.

Keyingi dars: Forma xavfsizligi va spamdan himoya — «Bahor» formasiga botlar va hujumchilar qanday hujum qilishini va undan qanday himoyalanishni ko'ramiz.

Manbalar

• MDN: "aria-describedby", "aria-invalid", "Web forms" — developer.mozilla.org
• W3C WAI: "Forms Tutorial" va WCAG 2.2 — w3.org/WAI
• GOV.UK Design System: "Error message", "Error summary", "Question pages" — design-system.service.gov.uk