Mundarija (33)
- Bu darsda
- 1. Nega bu kerak?
- 2. Telefonda qanday tekshiramiz?
- 3. inputmode: qaysi klaviatura chiqsin
- 3.1 type va inputmode farqi
- 3.2 Qiymatlar
- 3.3 Qachon type, qachon inputmode?
- 4. Nega type="number" telefon va karta uchun emas
- 5. enterkeyhint: Enter tugmasining yozuvi
- 6. Telefonning "yordamchilari"ni boshqarish
- 6.1 autocapitalize: bosh harflar
- 6.2 autocorrect: avtotuzatish
- 6.3 spellcheck: imlo tekshiruvi
- 7. pattern: o'zbek telefon raqamini tekshirish
- 7.1 Muammo
- 7.2 Namuna
- 7.3 Qanday ishlaydi
- 7.4 Tuzoq: yangi regex qoidalari
- 8. «Bahor»: telefonga tayyor forma
- 9. Hujumchi nigohi
- 10. Ko'p uchraydigan xatolar
- 10.1 Mavjud bo'lmagan qiymat
- 10.2 Telefon uchun type="number"
- 10.3 Yolg'onchi Enter
- 10.4 Ishlamayotgan pattern
- 10.5 Faqat kompyuterda sinash
- 11. Mashqlar
- 1-mashq (oson): Klaviaturani tanlang
- 2-mashq (o'rta): Pasport maydoni
- 3-mashq (qiyin): Telefonda to'liq tekshiruv
- 12. Real ishda
- Xulosa
- Manbalar
Mobil klaviatura va kiritish yordamchilari: inputmode, enterkeyhint va pattern
Qisqacha:
inputmodetelefonda qaysi klaviatura chiqishini aytadi (raqamli, email, URL),enterkeyhintesa Enter tugmasining yozuvini o'zgartiradi ("Qidirish", "Yuborish").autocapitalize,autocorrectvaspellchecktelefonning "yordam"ini kerak joyda o'chiradi. Telefon va karta raqami uchuntype="number"emas,telyokiinputmode="numeric"ishlatiladi. Formatni esapatterntekshiradi, masalan+998 90 000 00 00.
Bu darsda
typevainputmodefarqini tushuntira olasiz va to'g'ri klaviaturani tanlaysiz.- Nega telefon, karta va SMS kod uchun
type="number"yaramasligini bilasiz. enterkeyhint,autocapitalize,autocorrectvaspellcheckni kerakli joyda ishlatasiz.- O'zbek telefon raqami uchun
patternyoza olasiz va uning tuzoqlarini taniysiz. - Sahifani o'z telefoningizda ochib, klaviaturani tekshira olasiz.
Oldin bilishingiz kerak: Matnli maydonlar, label: har maydonning nomi.
1. Nega bu kerak?
O'zbekistonda saytlarga kiruvchilarning katta qismi telefondan kiradi. «Bahor» saytiga ham mehmonlar ko'pincha yo'lda, taksida yoki navbatda turib kiradi. Ular joy band qilish formasini bitta qo'l, bitta barmoq bilan to'ldiradi.
Endi tasavvur qiling:
- Karta raqamini yozasiz — harfli klaviatura chiqadi, har safar raqamlarga o'tasiz.
- Ismingizni
jasurdeb yozasiz — telefon uni "tuzatib",Jasperqilib qo'yadi. - SMS kodni yozib, Enter bosasiz — hech narsa bo'lmaydi, "Yuborish" tugmasini qidirasiz.
Har biri — bir necha soniya va bir oz asabiylashish. Uchta shunday holat — va mehmon formani yopib, choyxonaga qo'ng'iroq qiladi. Yoki boshqa choyxonaga ketadi.
O'tgan darsda type ning o'zi ko'p ishni hal qildi. Bu darsda telefon klaviaturasini yanada nozik boshqaradigan atributlarni o'rganamiz. Ularning hammasi kompyuterda deyarli ko'rinmaydi — lekin telefonda formani ikki barobar tezlashtiradi.
2. Telefonda qanday tekshiramiz?
DevTools'dagi mobil ko'rinish (device mode, DevTools I darsida ko'rgansiz) ekran o'lchamini o'zgartiradi, lekin ekran klaviaturasini ko'rsatmaydi. Bu darsdagi hamma narsani haqiqiy telefonda tekshirish kerak.
Eng oson yo'l — kompyuter va telefon bitta Wi-Fi tarmog'ida bo'lsin. Loyiha papkasida terminalni oching va npx bilan kichik server ishga tushiring:
npx serveTerminaldagi ramka ichida ikkita manzil chiqadi (taxminan):
- Local: http://localhost:3000
- Network: http://192.168.1.5:3000Network qatoridagi manzilni telefon brauzeriga yozing (sizda raqamlar boshqacha bo'ladi). Bu — kompyuteringizning uy tarmog'idagi IP manzili (IP manzil va port). Network qatori chiqmasa, IP'ni ipconfig (macOS va Linux'da ip a) bilan toping va oxiriga :3000 qo'shing.
- Windows birinchi marta "Windows Defender Firewall" oynasini ochib, ruxsat so'rashi mumkin. Private networks (xususiy tarmoqlar) uchun ruxsat bering.
- Ochilmasa: telefon va kompyuter bitta tarmoqdami? Mehmonlar uchun Wi-Fi tarmoqlari qurilmalarni ko'pincha bir-biridan ajratib qo'yadi.
- Ishingiz tugagach, terminalda
Ctrl + Cbilan serverni to'xtating.
Maslahat: Live Server ham telefonda ishlaydi. VS Code sozlamalarida
liveServer.settings.useLocalIpni yoqsangiz, u127.0.0.1o'rniga tarmoqdagi IP bilan ochiladi. Qaysi usul qulay bo'lsa, shuni tanlang.
3. inputmode: qaysi klaviatura chiqsin
3.1 type va inputmode farqi
O'tgan darsda type="tel" raqamli klaviatura chiqarishini ko'rdik. Lekin type uchta ishni birga qiladi: ma'lumot turini aytadi, tekshiruvni yoqadi va klaviaturani tanlaydi. Ba'zan bizga faqat klaviatura kerak.
Misol: bank kartasi raqami. U — tel emas (telefon raqami emas), email ham emas. Turi — oddiy matn. Lekin klaviatura raqamli bo'lishi kerak.
inputmode — faqat klaviaturani tanlaydigan atribut. U tekshiruvga ham, qiymatga ham tegmaydi:
<label for="karta">Karta raqami</label>
<input type="text" id="karta" name="karta"
inputmode="numeric">Maydon text bo'lib qoladi, lekin telefonda katta raqamli klaviatura chiqadi.
O'xshatish: type — do'kon bo'limi (poyabzal bo'limi o'zining sotuvchisi, o'lchovi va qoidalari bilan). inputmode — faqat peshtaxtaga qo'yilgan asbob. Asbobni almashtirish uchun butun bo'limni ko'chirish shart emas.
3.2 Qiymatlar
inputmode |
Klaviatura | Qachon |
|---|---|---|
text |
Oddiy harfli (standart) | Ism, izoh |
numeric |
Faqat 0–9 raqamlar | Karta, SMS kod, pasport raqami |
decimal |
Raqamlar + nuqta yoki vergul | Narx, og'irlik: 2,5 kg |
tel |
Telefon terish: 0–9, +, *, # |
Telefon raqami |
email |
Harflar + @ va . |
|
url |
Harflar + / va .com |
Veb-manzil |
search |
Harflar, Enter o'rnida "Qidirish" | Qidiruv |
none |
Klaviatura chiqmaydi | Sahifa o'z klaviaturasini chizganda |
none ni ehtiyot bilan ishlating: agar sahifada o'zingizning ekran klaviaturangiz bo'lmasa, foydalanuvchi umuman yoza olmay qoladi.
Kompyuterda inputmode hech narsani o'zgartirmaydi — jismoniy klaviatura doim bir xil. Shuning uchun u hech kimga zarar qilmaydi, faqat telefon egalariga yordam beradi.
3.3 Qachon type, qachon inputmode?
Qoida:
- Mos
typebo'lsa (email,tel,url,search) —typeni ishlating. Klaviatura o'zi to'g'ri chiqadi,inputmodeqo'shish shart emas. - Mos
typeyo'q, lekin maxsus klaviatura kerak —type="text"+inputmode.
Tekshirib ko'ring: Qaysi biri to'g'ri:
<input type="email" inputmode="email">yoki<input type="text" inputmode="email">?
Javob
Birinchisi ishlaydi, lekin inputmode ortiqcha: type="email" klaviaturani o'zi tanlaydi. Ikkinchisi xato tanlov: email klaviaturasi bor, lekin brauzer formatni tekshirmaydi. To'g'risi — oddiy <input type="email">: tekshiruv ham, klaviatura ham bor.
4. Nega type="number" telefon va karta uchun emas
"Karta raqami — raqamlar-ku, demak type="number"" — bu juda keng tarqalgan fikr. Lekin number son uchun, ya'ni hisoblanadigan qiymat uchun yaratilgan. U bilan telefon yoki karta raqami yozsangiz:
- Strelkalar. Kompyuterda maydon ichida ▲▼ tugmalari chiqadi. Bosib yuborsangiz, karta raqami bittaga oshadi.
- Sichqoncha g'ildiragi. Chrome'da maydon faol turganda g'ildirakni aylantirsangiz, qiymat o'zgaradi. Foydalanuvchi sahifani pastga aylantiryapman deb o'ylaydi — telefon raqami esa o'zgarib ketadi.
- Bo'sh joy va
+qabul qilinmaydi.8600 1234 5678 9012va+998 90 000 00 00— son emas. Brauzer ularni noto'g'ri qiymat deb hisoblaydi va forma yuborilmaydi. eharfi ruxsat etilgan.1e5— matematikada 100 000 degani, shuning uchun brauzereni yozishga ruxsat beradi.maxlengthvapatternishlamaydi. Ular son maydoniga umuman qo'llanilmaydi.
Oltin qoida: undan hisob-kitob qilmasangiz — bu son emas. Karta raqamini hech kim ikkiga ko'paytirmaydi. Telefon raqamidan o'rtacha hisoblanmaydi. Bular — raqamlardan iborat matn.
| Ma'lumot | Hisoblanadimi? | To'g'ri tanlov |
|---|---|---|
| Telefon raqami | Yo'q | type="tel" |
| Karta raqami | Yo'q | type="text" inputmode="numeric" |
| SMS kod | Yo'q | type="text" inputmode="numeric" |
| Odam soni, miqdor | Ha | type="number" |
«Bahor» formasidagi "Necha kishi" — haqiqiy son: 4 kishiga yana 2 kishi qo'shish, stol sig'imi bilan solishtirish mumkin. Uning uchun type="number" o'rinli — Son, sana, vaqt va rang maydonlari darsida aynan shuni qilamiz.
Maslahat: Buyuk Britaniya hukumatining GOV.UK dizayn tizimi — dunyodagi eng ko'p o'rganiladigan formalar qo'llanmalaridan biri. U ham 2020-yilda raqamli maydonlar uchun
type="number"dan voz kechib,type="text" inputmode="numeric"ga o'tgan — aynan shu sabablar tufayli.
5. enterkeyhint: Enter tugmasining yozuvi
Telefon klaviaturasining pastki o'ng burchagidagi katta tugma — Enter. Uning yozuvini enterkeyhint atributi belgilaydi:
enterkeyhint |
Tugmada (taxminan) | Qachon |
|---|---|---|
enter |
↵ (yangi qator) | Ko'p qatorli matn |
done |
"Tayyor" | Oxirgi maydon, klaviatura yopilsin |
go |
"O'tish" | Kiritilgan manzilga o'tish |
next |
"Keyingi" | Keyingi maydonga o'tish |
previous |
"Oldingi" | Oldingi maydonga qaytish |
search |
"Qidirish" yoki lupa | Qidiruv |
send |
"Yuborish" | Xabar yuborish |
Aniq yozuv va belgi telefon va klaviatura dasturiga bog'liq. Telefon tili o'zbekcha bo'lsa — o'zbekcha, ruscha bo'lsa — ruscha.
<label for="xabar">Administratorga savol</label>
<input type="text" id="xabar" name="xabar"
enterkeyhint="send">Diqqat:
enterkeyhintfaqat yozuvni o'zgartiradi, xatti-harakatni emas. Tugma bosilganda brauzer odatdagidek ishlaydi: bir qatorli maydonda forma yuboriladi (yashirin yuborish),textareada yangi qator qo'shiladi. Masalan,nextyozib qo'ysangiz, lekin tugma formani yuborsa — foydalanuvchi aldanadi. Yozuv har doim bosilganda haqiqatan nima bo'lishiga mos kelsin. Tugmaga boshqa vazifa berishni JavaScript bilan, Forma qiymatlarini o'qish darsidan keyin qila olasiz.
Eng ko'p ishlatiladigan holatlar: qidiruv maydonida search, bitta maydonli formada (SMS kod, chat xabari) send, done yoki go.
6. Telefonning "yordamchilari"ni boshqarish
Telefon klaviaturasi sizga yordam berishga harakat qiladi: gap boshini bosh harf qiladi, "xato" so'zlarni tuzatadi, imloni tekshiradi. Izoh yozganda bu qulay. Ism, login yoki kod yozganda esa xalaqit beradi.
6.1 autocapitalize: bosh harflar
| Qiymat | Nima qiladi | Qachon |
|---|---|---|
sentences (yoki on) |
Har gapning birinchi harfi katta | Izoh, xabar (standart) |
words |
Har so'zning birinchi harfi katta | Ism-familiya: Ali Valiyev |
characters |
Hamma harf katta | Pasport seriyasi, mashina raqami |
none (yoki off) |
Hech qaysi harf katta bo'lmaydi | Login, promokod |
<label for="seriya">Pasport seriyasi va raqami</label>
<input type="text" id="seriya" name="pasport"
autocapitalize="characters" spellcheck="false">autocapitalize faqat ekran klaviaturasiga ta'sir qiladi. Kompyuterda foydalanuvchi baribir kichik harf bilan yozishi mumkin. Shuning uchun u — qulaylik, qoida emas. email, url va password maydonlarida brauzer bosh harfni o'zi o'chiradi, u yerga yozish shart emas.
6.2 autocorrect: avtotuzatish
Telefonning avtotuzatishi o'zbekcha ismlarni ko'pincha "tanimaydi" va o'zi bilgan so'zga almashtiradi. autocorrect="off" buni o'chiradi:
<input type="text" id="login" name="login"
autocapitalize="none" autocorrect="off"
spellcheck="false">Bu atributni asosan iPhone'dagi Safari qo'llaydi, boshqa brauzerlarda qo'llab-quvvatlash hali to'liq emas. Yangi imkoniyatni ishlatishdan oldin caniuse va Baseline da tekshirish odatini eslang. Qo'llamagan brauzer uni shunchaki e'tiborsiz qoldiradi — zarar yo'q.
6.3 spellcheck: imlo tekshiruvi
Brauzer imloni tekshirib, "xato" so'zlarning tagiga qizil to'lqinli chiziq tortadi. Brauzer lug'atida o'zbek tili bo'lmasa, deyarli har bir o'zbekcha so'z "xato" bo'lib chiqadi. Ism, manzil va kodlarda bu chalg'itadi:
<input type="text" id="ism" name="ism" spellcheck="false">spellcheck ning qiymati — true yoki false. U faqat forma maydonlarida emas, istalgan tahrirlanadigan elementda ishlaydi (Global atributlar darsida ko'ramiz).
Uzun izoh (textarea) uchun odatda uni o'chirmaymiz — foydalanuvchi o'zi tanlasin.
Tekshirib ko'ring: Promokod maydoni:
BAHOR2026kabi kodlar. Qaysi uch atributni qo'shasiz?
Javob
autocapitalize="characters" — kod katta harflarda; autocorrect="off" — telefon uni "tuzatmasin"; spellcheck="false" — kod so'z emas, qizil chiziq kerak emas. Kod faqat katta harf va raqamlardan iborat bo'lsa ham, inputmode ni o'zgartirmaymiz: harflar ham kerak.
7. pattern: o'zbek telefon raqamini tekshirish
7.1 Muammo
O'tgan darsda type="tel" hech narsani tekshirmasligini ko'rdik. Mehmon 90 000 deb yozib yuborsa — administrator qo'ng'iroq qila olmaydi. Bizga "faqat +998 va 9 ta raqam" degan qoida kerak.
pattern atributi aynan shunday qoidani yozish imkonini beradi. Qoida regular expression (regex, "muntazam ifoda") tilida yoziladi — matn shaklini tasvirlaydigan kichik til. Unga Fayl va matn qidirish darsida qisqa kirgan edik. To'liq esa JavaScript qismida, RegExp asoslari darsida o'rganasiz. Hozir bitta tayyor namunani tushunish kifoya.
7.2 Namuna
<label for="telefon">Telefon</label>
<input type="tel" id="telefon" name="telefon"
placeholder="+998 90 000 00 00"
pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
title="+998 va 9 ta raqam: +998 90 000 00 00">Namunani bo'laklab o'qiymiz:
| Bo'lak | Ma'nosi |
|---|---|
\+ |
+ belgisining o'zi. \ — "bu belgining maxsus ma'nosini o'chir" |
998 |
Aynan 998 |
? |
Bo'sh joy — bo'lishi ham, bo'lmasligi ham mumkin (? — "ixtiyoriy") |
\d{2} |
Ikkita raqam (\d — istalgan raqam 0–9, {2} — 2 marta) |
\d{3} |
Uchta raqam |
Natija — +998, keyin 2 + 3 + 2 + 2 = 9 ta raqam, orasida ixtiyoriy bo'sh joylar.
| Kiritilgan qiymat | Natija |
|---|---|
+998 90 000 00 00 |
o'tadi |
+998900000000 |
o'tadi |
998 90 000 00 00 |
+ yo'q |
+998 90 000 00 0 |
bitta raqam kam |
+998-90-000-00-00 |
chiziqcha ruxsat etilmagan |
7.3 Qanday ishlaydi
- Butun qiymat tekshiriladi. Brauzer qoidani qiymatning boshidan oxirigacha qo'llaydi.
+998 90 000 00 00 dan keyin— : oxirida ortiqcha matn bor. - Tekshiruv yuborishda. Yozayotganda hech narsa bo'lmaydi. "Joy band qilish" bosilganda qiymat mos kelmasa, forma yuborilmaydi va Chrome xabar chiqaradi:
Please match the requested format.Tarjimasi: "So'ralgan formatga moslang." Xabar tagida title atributidagi matn ham chiqadi — shuning uchun title ga formatni aniq yozdik. Bu xabar foydalanuvchiga ko'p narsa aytmaydi, shuning uchun formatni label yoki placeholder'da ham ko'rsating.
- Bo'sh maydon tekshirilmaydi. Maydonni umuman to'ldirmasangiz,
patternjim turadi. Maydonni majburiy qilish uchunrequiredkerak — uni va brauzer tekshiruvining boshqa imkoniyatlarini Brauzer validatsiyasi darsida o'rganamiz. - Qayerda ishlaydi.
text,tel,email,url,passwordvasearchmaydonlarida.textareavanumberdapatternyo'q.
Tekshirib ko'ring: Mehmon avtoto'ldirishdan foydalandi va maydonga
+998 90 000 00 00tushdi (boshida bo'sh joy bor). Forma yuboriladimi?
Javob
Yo'q. Namuna + bilan boshlanishini talab qiladi, qiymat esa bo'sh joy bilan boshlangan. email maydonidan farqli, tel boshidagi bo'sh joyni o'zi olib tashlamaydi. Foydalanuvchi xatoni ko'rmaydi ham — bo'sh joy ko'zga tashlanmaydi. Yechim: namunani boshida bo'sh joyga ruxsat beradigan qilish yoki (yaxshisi) bunday ortiqcha belgilarni server tomonda tozalash.
7.4 Tuzoq: yangi regex qoidalari
2023-yildan beri brauzerlar pattern ni regex'ning yangi, qat'iyroq rejimida (v flag) o'qiydi. Bu rejimda kvadrat qavs ichidagi ba'zi belgilar \ bilan yozilishi shart. Masalan, "bo'sh joy yoki chiziqcha" qoidasi:
<!-- ❌ Brauzer bu namunani umuman qabul qilmaydi -->
<input type="tel" name="telefon" aria-label="Telefon"
pattern="\+998[ -]?\d{2}[ -]?\d{3}[ -]?\d{2}[ -]?\d{2}">Eng yomoni — brauzer xato bermaydi. U noto'g'ri namunani jimgina e'tiborsiz qoldiradi va istalgan qiymatni o'tkazib yuboradi. Faqat Console'da Pattern attribute value ... is not a valid regular expression ("pattern qiymati to'g'ri regex emas") bilan boshlanadigan ogohlantirish chiqadi.
<!-- ✅ Chiziqcha oldida \ -->
<input type="tel" name="telefon" aria-label="Telefon"
pattern="\+998[ \-]?\d{2}[ \-]?\d{3}[ \-]?\d{2}[ \-]?\d{2}">Endi +998-90-000-00-00 ham, +998 90 000 00 00 ham o'tadi. Qoida: pattern yozgach, albatta noto'g'ri qiymat bilan sinab ko'ring. Forma xatoni ushlamasa — Console'ni oching.
8. «Bahor»: telefonga tayyor forma
Joy band qilish formasiga bu darsdagi yordamchilarni qo'shamiz:
<form method="post">
<div>
<label for="ism">Ismingiz</label>
<input type="text" id="ism" name="ism" maxlength="50"
autocapitalize="words" spellcheck="false">
</div>
<div>
<label for="telefon">Telefon (+998 90 000 00 00)</label>
<input type="tel" id="telefon" name="telefon"
pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
title="+998 va 9 ta raqam: +998 90 000 00 00">
</div>
<div>
<label for="email">Email (ixtiyoriy, tasdiq xati uchun)</label>
<input type="email" id="email" name="email"
spellcheck="false">
</div>
<div>
<label for="odam">Necha kishi</label>
<input type="text" id="odam" name="odam">
</div>
<div>
<label for="izoh">Qo'shimcha istaklar (200 belgigacha)</label>
<textarea id="izoh" name="izoh" rows="3"
maxlength="200"></textarea>
</div>
<button type="submit">Joy band qilish</button>
</form>Nima o'zgardi:
- Ism: har so'z bosh harf bilan (
Ali Valiyev), imlo tekshiruvi o'chiq. - Telefon:
patternvatitleqo'shildi. Format placeholder'dan label'ga ko'chdi — endi u yozishni boshlaganda ham ko'rinib turadi (placeholder tuzog'i). - Email: imlo tekshiruvi o'chiq.
type="email"bosh harfni o'zi o'chiradi. - Necha kishi: hozircha o'zgarmadi — keyingi darsda
type="number"bo'ladi.
Band qilgandan keyin choyxona mehmonga SMS kod yuboradi deylik. Kod kiritish sahifasi — bitta maydonli forma:
<form method="post">
<label for="kod">SMS orqali kelgan 6 xonali kod</label>
<input type="text" id="kod" name="kod"
inputmode="numeric" pattern="\d{6}"
autocomplete="one-time-code" enterkeyhint="done">
<button type="submit">Tasdiqlash</button>
</form>Raqamli klaviatura, aynan 6 ta raqam, Enter tugmasida "Tayyor" — va bosilganda forma haqiqatan yuboriladi (bitta maydonli forma). Oxirgi atribut — autocomplete="one-time-code" — telefonga "bu SMS kod maydoni" deydi: iPhone va ko'p Android telefonlar kelgan SMS'dagi kodni klaviatura ustida o'zi taklif qiladi. Bu atributni autocomplete darsida batafsil ko'ramiz.
9. Hujumchi nigohi
Bu darsdagi hamma atribut — foydalanuvchiga yordam. Hujumchi uchun ular yo'q:
patternni o'chirish. DevTools'da atributni o'chirib yoki curl bilan so'rov yozib, telefon o'rniga istalgan matnni yuborish mumkin:telefon=<script>.... Telefon raqamini server o'zi tekshiradi — aynan shu yoki shunga o'xshash qoida bilan.inputmodecheklov emas. Raqamli klaviatura chiqsa ham, foydalanuvchi matnni nusxalab qo'yishi yoki kompyuterda harf yozishi mumkin.inputmode="numeric"bor maydondan harf kelishi — oddiy holat.- Imlo tekshiruvi va maxfiylik. Chrome'ning "kengaytirilgan imlo tekshiruvi" (Enhanced spell check) yoqilgan bo'lsa, maydonga yozilgan matn tekshirish uchun Google serverlariga yuboriladi. Tadqiqotchilar 2022-yilda bu yo'l bilan formalardagi maxfiy ma'lumotlar (hatto "parolni ko'rsatish" bosilgandagi parollar) tashqi serverga ketishini ko'rsatishgan. Maxfiy maydonlarda — pasport, karta, kod, parolni ko'rsatish holatida —
spellcheck="false"yozing.
10. Ko'p uchraydigan xatolar
10.1 Mavjud bo'lmagan qiymat
inputmode="number", inputmode="phone", enterkeyhint="submit" — bunday qiymatlar yo'q. Brauzer ularni e'tiborsiz qoldiradi va standart klaviaturani chiqaradi. Tuzatish: 3.2 va 5-bo'limdagi jadvallardan aniq qiymat: numeric, tel, send. Validator noto'g'ri qiymatni ko'rsatadi.
10.2 Telefon uchun type="number"
4-bo'limda ko'rdik: strelkalar, g'ildirak, + va bo'sh joy qabul qilinmaydi. Tuzatish: telefon — type="tel", karta va kod — type="text" inputmode="numeric".
10.3 Yolg'onchi Enter
enterkeyhint="next", lekin tugma formani yuboradi. Yoki send, lekin maydon textarea — tugma yangi qator qo'shadi. Tuzatish: yozuv doim bosilgandagi haqiqiy natijaga mos bo'lsin.
10.4 Ishlamayotgan pattern
7.4-bo'limdagi [ -] kabi xato namunani brauzer jim tashlab yuboradi. Tuzatish: har bir pattern ni noto'g'ri qiymat bilan sinang; forma o'tkazib yuborsa, Console'ni tekshiring. Kvadrat qavs ichidagi -, (, ), [, ], {, }, /, | oldiga \ qo'ying.
10.5 Faqat kompyuterda sinash
DevTools'ning mobil ko'rinishida hammasi "ishlaydi", chunki klaviatura umuman chiqmaydi. Tuzatish: 2-bo'limdagi usul bilan haqiqiy telefonda, imkon bo'lsa ham Android, ham iPhone'da sinang.
11. Mashqlar
1-mashq (oson): Klaviaturani tanlang
Har bir maydon uchun type va (kerak bo'lsa) inputmode ni yozing:
- Uzcard karta raqami.
- Taomning og'irligi, kilogrammda (
1,5). - Choyxona administratorining telefoni.
- Buyurtma soni (nechta porsiya osh).
Yechim
type="text" inputmode="numeric"— karta raqami hisoblanmaydi, bo'sh joylar bo'lishi mumkin.type="text" inputmode="decimal"— kasr ajratgichli raqamli klaviatura. (Og'irlik — haqiqiy son, shuning uchun keyingi darsdatype="number"bilanstepni ham ko'rasiz.)type="tel"—inputmodeshart emas.type="number"— porsiyalar soni haqiqiy son, uni qo'shish va ko'paytirish mumkin. Keyingi darsda o'rganamiz.
2-mashq (o'rta): Pasport maydoni
O'zbekiston pasporti: 2 ta lotin bosh harfi va 7 ta raqam, masalan AA1234567. Maydon yozing:
- Telefonda bosh harflar avtomatik yozilsin.
- Avtotuzatish va imlo tekshiruvi o'chiq bo'lsin.
patternformatni tekshirsin. Ishora:[A-Z]— "A dan Z gacha bitta bosh harf",{2}— ikki marta.
Yechim
<label for="pasport">Pasport seriyasi va raqami</label>
<input type="text" id="pasport" name="pasport"
autocapitalize="characters" autocorrect="off"
spellcheck="false" pattern="[A-Z]{2}\d{7}"
title="2 ta bosh harf va 7 ta raqam: AA1234567">AB1234567 o'tadi, ab1234567 esa yo'q. Lekin kompyuterda foydalanuvchi kichik harf bilan yozishi mumkin — autocapitalize faqat telefon klaviaturasiga ta'sir qiladi. Shuning uchun ko'p saytlar [A-Za-z]{2}\d{7} ni qabul qiladi, harflarni esa serverda katta qiladi. Qaysi yo'lni tanlasangiz ham, format label yoki title da aniq yozilsin.
3-mashq (qiyin): Telefonda to'liq tekshiruv
- 8-bo'limdagi «Bahor» formasini
bron/index.htmlga yozing. npx servebilan sahifani telefoningizda oching.- Har bir maydonga bosing va klaviatura turini, Enter tugmasi yozuvini yozib oling.
- Telefon maydoniga ataylab
+998 90 000 00(bitta raqam kam) yozib yuboring. Nima bo'ldi? - Namunani 7.4-bo'limdagi variantga almashtiring va yana yuboring. Farq nima? Kompyuterdagi Console nima deydi?
Yechim
- Ism — harfli klaviatura, har so'z bosh harf bilan. Telefon — raqamli (telefon terish). Email —
@tugmali. Necha kishi — oddiy harfli (keyingi darsda tuzatiladi). Izoh — harfli, Enter — yangi qator. Bir qatorli maydonlarda Enter yozuvi telefon va brauzerga qarab farq qiladi — shuning uchun bizenterkeyhintni bu yerda majburlamadik. - Forma yuborilmadi: "So'ralgan formatga moslang" xabari va
titledagi matn chiqdi. - namuna bilan noto'g'ri raqam ham yuborildi — brauzer namunani tashlab yubordi. Kompyuterda sahifani ochib, Console'ni ko'rsangiz,
Pattern attribute value ... is not a valid regular expressionogohlantirishi turadi.[ \-]ga tuzatgach, tekshiruv qaytadi.
Bu mashqning asosiy xulosasi: forma "ishlayapti" degani — tekshiruv ishlayapti degani emas. Har bir qoidani noto'g'ri qiymat bilan sinang.
12. Real ishda
- Mobil konversiya. Uzum, Yandex Go, Payme kabi ilovalarning veb-versiyalarida karta, telefon va SMS kod maydonlari aynan shu atributlar bilan yoziladi. To'g'ri klaviatura — kam xato va kam tashlab ketilgan buyurtma.
- To'lov formalari. Karta raqami uchun
inputmode="numeric"vaautocomplete="cc-number"— standart.type="number"ni code review'da darhol tuzatishni so'rashadi. - Frontend va backend.
patterndagi qoida serverda ham bo'lishi kerak. Ko'p jamoalar bitta regex'ni ikkala joyda ishlatadi — shunda brauzer va server bir xil qarorga keladi. - Intervyuda: "
inputmodevatypefarqi nima?" va "Nega telefon uchuntype="number"yaramaydi?" — ikkalasi ham frontend intervyularida uchraydi.
Xulosa
type— ma'lumot turi, tekshiruv va klaviatura;inputmode— faqat klaviatura.- Hisoblanmaydigan raqamlar (telefon, karta, kod) — son emas:
telyokitext+inputmode="numeric". enterkeyhintfaqat Enter yozuvini o'zgartiradi — yozuv haqiqiy natijaga mos bo'lsin.autocapitalize,autocorrect,spellcheck— ism, kod va maxfiy maydonlarda telefonning "yordami"ni o'chiradi.patternbutun qiymatni tekshiradi, bo'sh maydonni o'tkazib yuboradi; noto'g'ri namuna jim e'tiborsiz qolinadi.- Hamma narsani haqiqiy telefonda sinang; serverdagi tekshiruv baribir majburiy.
Keyingi dars: Son, sana, vaqt va rang maydonlari — «Bahor» formasiga odam soni, band qilish sanasi va vaqtini to'g'ri maydonlar bilan qo'shamiz.
Manbalar
- MDN: "inputmode", "enterkeyhint", "autocapitalize", "spellcheck" global atributlari va "HTML attribute: pattern" — developer.mozilla.org
- WHATWG HTML: "User interaction: input modalities" — html.spec.whatwg.org
- GOV.UK Design System: "Text input — numbers" — design-system.service.gov.uk
- web.dev: "Sign-in form best practices" va "Payment and address form best practices" — web.dev
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!