HTML autocomplete: avtoto'ldirish bilan do'stlashish

Qisqacha: autocomplete atributi brauzerga maydonda aynan qaysi ma'lumot so'ralayotganini aytadi: name — to'liq ism, email, tel, street-address — manzil, one-time-code — SMS kod, current-password — saqlangan parol, new-password — yangi parol. To'g'ri "yorliq" qo'yilsa, brauzer va parol menejeri formani bir bosishda to'ldiradi. autocomplete="off" esa har doim ham ishlamaydi: login va parol maydonlarida brauzerlar uni ko'pincha e'tiborsiz qoldiradi.

Bu darsda

• autocomplete nima qilishini va nega uning qiymati name atributidan ishonchliroq ekanini tushunasiz.
• Kontakt, manzil va karta maydonlariga to'g'ri token qo'ya olasiz.
• current-password, new-password, username va one-time-code bilan login formasini parol menejeriga moslaysiz.
• autocomplete="off" qachon ishlashi va qachon ishlamasligini bilasiz.
• Avtoto'ldirish qat'iy pattern bilan qanday to'qnashishini ko'rasiz.

Oldin bilishingiz kerak: Brauzer validatsiyasi, Mobil klaviatura va kiritish yordamchilari, Maydon holatlari va yashirin maydonlar.

1. Nega bu kerak?

Malika telefonda «Bahor» choyxonasining saytini ochdi. Bron formasida ism, telefon va email so'ralyapti. U ism maydoniga bosadi — klaviatura ustida taklif paydo bo'ladi: "Malika Karimova, +998 90 000 00 00, malika@example.com". Bir bosish — uchala maydon to'ldi. Bron 10 soniyada tayyor.

Endi boshqa choyxona saytini ochadi. Taklif chiqmaydi. Kichkina ekranda hammasini qo'lda terish kerak. Malika yarim yo'lda zerikib, sahifani yopadi.

Farq bitta atributda — autocomplete. Brauzer Malikaning ismi, telefoni va manzilini allaqachon eslab qolgan. Lekin qaysi maydonga nimani qo'yishni bilishi uchun unga yorliq kerak.

Hayotdagi o'xshatish: pochta xodimi. Konvertda "Kimga:" va "Manzil:" deb yozilgan bo'lsa, u xatni birinchi urinishda yetkazadi. Yozilmagan bo'lsa — taxmin qiladi va ba'zan adashadi. autocomplete — maydonlardagi o'sha "Kimga:" yozuvi.

2. autocomplete qanday ishlaydi

2.1 Brauzer taxmin qiladi — va ko'pincha adashadi

autocomplete bo'lmasa, brauzer maydonning name, id va label iga qarab taxmin qiladi. name="email" ni u taniydi. Lekin bizning kursda nomlar o'zbekcha: name="ism", name="familiya". Brauzer bu so'zlarni bilmaydi — taxmin ishlamaydi.

Yechim — maydonga aniq token yozish:

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

Token — oldindan kelishilgan kalit so'z. Uni HTML standarti belgilaydi, har bir brauzer uni bir xil tushunadi. name atributi serverga borish uchun, autocomplete esa brauzer uchun. Ular bir-biriga bog'liq emas: name="ism" bo'lib qolaveradi, autocomplete="name" esa brauzerga "bu — to'liq ism" deydi.

Nomi o'xshash bo'lgani uchun ehtiyot bo'ling: autocomplete="name" dagi name — tokenning o'zi, "to'liq ism" degani. name="..." atributi bilan uning aloqasi yo'q.

2.2 Noto'g'ri token — jim xato

Token faqat standartdagi ro'yxatdan olinadi. O'ylab topilgan so'z ishlamaydi:

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

Brauzer autocomplete="ism" ni tushunmaydi va uni jimgina e'tiborsiz qoldiradi — xato chiqmaydi. html-validate esa ushlaydi:

error  "ism" is not a valid autocomplete token or field name  valid-autocomplete

Tarjimasi: "ism — to'g'ri autocomplete tokeni yoki maydon nomi emas".

3. Kontakt ma'lumotlari: ism, email, telefon

3.1 «Bahor» bron formasi

<form method="get">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism"
         autocomplete="name" required>

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

  <label for="telefon">Telefon</label>
  <input type="tel" id="telefon" name="telefon"
         autocomplete="tel" required>

  <button type="submit">Bron qilish</button>
</form>

Endi Malikaning brauzeri hamma maydonni biladi. U bitta maydonni tanlasa, qolganlari ham birga to'ladi.

3.2 Ism uchun tokenlar

Ism va familiya alohida maydonda so'ralsa, given-name va family-name ni ishlating. Bitta maydon bo'lsa — name.

3.3 Telefon: tel va tel-national

• tel — to'liq raqam, davlat kodi bilan: +998 90 000 00 00.
• tel-national — davlat kodisiz qismi.
• tel-country-code — faqat davlat kodi: +998.

Bu yerda muhim tuzoq bor — uni "Avtoto'ldirish va qat'iy pattern" bo'limida ko'ramiz.

Tekshirib ko'ring: <input type="text" name="familiya"> maydoniga qaysi token qo'yasiz?

4. Manzil tokenlari

«Bahor» osh yetkazib berishni ham boshladi. Yetkazish formasida manzil so'raladi:

<form method="get">
  <label for="manzil">Ko'cha, uy, xonadon</label>
  <textarea id="manzil" name="manzil" rows="2"
            autocomplete="street-address"></textarea>

  <label for="shahar">Shahar yoki tuman</label>
  <input type="text" id="shahar" name="shahar"
         autocomplete="address-level2">

  <label for="indeks">Pochta indeksi</label>
  <input type="text" id="indeks" name="indeks"
         autocomplete="postal-code" inputmode="numeric">

  <button type="submit">Yetkazib berish</button>
</form>

Ikki qoida:

1. street-address — ko'p qatorli manzil. Shuning uchun u textarea da ishlatiladi. input uchun manzilni address-line1 va address-line2 ga bo'ling. html-validate input dagi street-address ni xato deb ko'rsatadi.
2. street-address va address-line1 ni bitta formada aralashtirmang — bu bir xil ma'lumotning ikki xil shakli.

O'zbekistonda pochta indeksi 6 raqamli. Unga type="number" emas, inputmode="numeric" qo'ydik. Sababini Mobil klaviatura darsida ko'rgan edik: indeks — son emas, raqamlardan iborat matn.

5. Login va parollar

Bu yerda autocomplete eng katta foyda beradi. Parol menejeri — brauzerga o'rnatilgan yoki Bitwarden kabi alohida dastur — to'g'ri tokenlarsiz ko'pincha adashadi. Ish joyini tayyorlash darsida parol menejeri nima uchun kerakligini ko'rgan edik.

5.1 Kirish formasi

<form method="post" action="https://example.com/kirish">
  <label for="login">Telefon yoki email</label>
  <input type="text" id="login" name="login"
         autocomplete="username" required>

  <label for="parol">Parol</label>
  <input type="password" id="parol" name="parol"
         autocomplete="current-password" required>

  <button type="submit">Kirish</button>
</form>

• username — hisob nomi. U telefon ham, email ham bo'lishi mumkin — token baribir username, chunki bu yerda u hisobni topish uchun ishlatiladi.
• current-password — hozirgi, saqlangan parol. Brauzer saqlangan parolni shu yerga qo'yadi.

5.2 Ro'yxatdan o'tish formasi

<form method="post" action="https://example.com/royxat">
  <label for="login">Email</label>
  <input type="email" id="login" name="login"
         autocomplete="username" required>

  <label for="parol">Yangi parol</label>
  <input type="password" id="parol" name="parol"
         autocomplete="new-password" required minlength="8">

  <button type="submit">Ro'yxatdan o'tish</button>
</form>

new-password — yangi parol. U ikki narsani o'zgartiradi:

1. Brauzer bu yerga eski parolni qo'ymaydi.
2. Chrome va Safari kabi brauzerlar kuchli tasodifiy parol yaratishni taklif qiladi va uni o'zi saqlaydi.

Parolni o'zgartirish sahifasida ikkalasi ham bor: eski parol — current-password, yangisi — new-password.

Maslahat: Parolni o'zgartirish sahifasida ham username maydonini qoldiring — masalan, o'tgan darslardagi readonly qilib. Parol menejeri yangi parolni qaysi hisobga yozishni aynan shu maydondan biladi.

5.3 SMS kod: one-time-code

O'zbekistonda ko'p saytlar kirishda SMS kod yuboradi. one-time-code — "bir martalik kod" degani:

<label for="kod">SMS orqali kelgan kod</label>
<input type="text" id="kod" name="kod"
       autocomplete="one-time-code" inputmode="numeric"
       required pattern="\d{6}">

iPhone'da Safari SMS kelishi bilan kodni klaviatura ustida taklif qiladi — mijoz uni bir bosishda qo'yadi. Android'da buning uchun ko'pincha qo'shimcha JavaScript kerak bo'ladi (WebOTP deb ataladi). Lekin one-time-code token baribir yoziladi: u hech narsani buzmaydi, ko'p qurilmada yordam beradi.

inputmode="numeric" raqamli klaviaturani ochadi, pattern="\d{6}" esa 6 ta raqamni tekshiradi (Mobil klaviatura darsida xuddi shu maydonni yozgan edik).

5.4 Passkey: webauthn

Passkey — parolsiz kirish usuli: telefoningiz barmoq izi yoki yuz orqali tasdiqlaydi. Login maydoniga webauthn so'zi qo'shilsa, brauzer passkeylarni ham taklif qila oladi:

<label for="login">Telefon yoki email</label>
<input type="text" id="login" name="login"
       autocomplete="username webauthn">

webauthn har doim oxirgi so'z bo'ladi. U faqat JavaScript bilan birga ishlaydi. Passkeylarni Ikki faktorli autentifikatsiya va passkeys darsida to'liq o'rganamiz. Hozircha bu yozuvni ko'rsangiz, nima ekanini bilasiz.

Tekshirib ko'ring: Admin panelda boshqa xodimga yangi hisob yaratish formasi bor. Brauzer u yerga adminning o'z parolini to'ldirib qo'yyapti. Qanday tuzatasiz?

6. To'lov kartasi

«Bahor» saytida oldindan to'lov kartadan qilinsa, tokenlar shunday:

cc — credit card (kredit karta) qisqartmasi. Oddiy bank kartalari uchun ham shu tokenlar ishlatiladi.

<label for="karta">Karta raqami</label>
<input type="text" id="karta" name="karta"
       autocomplete="cc-number" inputmode="numeric">

Real ishda karta ma'lumotini o'zingiz yig'masligingiz ham mumkin. O'zbekistonda Click, Payme va Uzum kabi to'lov tizimlari o'z sahifasini beradi. Karta raqami sizning serveringizga umuman kelmaydi — bu xavfsizroq. Buni to'lovlar qismida o'rganamiz.

Chrome kabi brauzerlar karta ma'lumotini faqat HTTPS sahifada to'ldiradi. HTTPS va TLS darsidan eslang: HTTPS'siz ma'lumot yo'lda ochiq ketadi.

7. Qo'shimcha so'zlar: shipping, billing, section-

Ba'zan bitta sahifada bir xil ma'lumot ikki marta so'raladi. Masalan, "Oshni qayerga yetkazamiz?" va "Chekni qaysi manzilga yuboramiz?". Token oldiga qo'shimcha so'z yoziladi:

<label for="yetkazish">Yetkazish manzili</label>
<textarea id="yetkazish" name="yetkazish"
          autocomplete="shipping street-address"></textarea>

<label for="hisob">Hisob-faktura manzili</label>
<textarea id="hisob" name="hisob"
          autocomplete="billing street-address"></textarea>

• shipping — yetkazib berish uchun, billing — to'lov uchun.
• section-... — o'zingiz o'ylab topgan guruh nomi. Masalan, bitta formada ikki mehmon ma'lumoti so'ralsa: section-mehmon1 name va section-mehmon2 name. Bu yerda nomni erkin tanlaysiz — section- so'zidan keyin istalgan so'z.
• Telefon va email uchun: home (uy), work (ish), mobile (mobil). Masalan, work email. mobile name kabi mantiqsiz birikma ishlamaydi.

So'zlar tartibi qat'iy: section-..., keyin shipping yoki billing, keyin home/work/mobile, keyin asosiy token, oxirida webauthn.

8. Avtoto'ldirish va qat'iy pattern: to'qnashuv

Mobil klaviatura va Brauzer validatsiyasi darslarida telefon uchun qat'iy shablon yozgan edik: raqam +998 bilan boshlanishi shart. Endi unga autocomplete="tel" qo'shdik. Nima bo'ladi?

Brauzer Malikaning raqamini u avval saqlagan ko'rinishda qo'yadi. Malika uni boshqa saytda 90 000-00-00 deb yozgan edi — +998 siz va tire bilan. Bu shablonga mos kelmaydi. Malika "Please match the requested format." xabarini oladi va nimani noto'g'ri qilganini tushunmaydi. U hech narsa yozmagan-ku — brauzer yozdi!

Ikki yechim bor:

1. Shablonni yumshatish. Raqam, bo'sh joy, + va tireni qabul qiling:

<label for="telefon">Telefon</label>
<input type="tel" id="telefon" name="telefon" autocomplete="tel"
       required pattern="[0-9 +\-]{9,17}">

Endi 900000000, 90 000-00-00 va +998 90 000 00 00 — hammasi o'tadi. salom esa o'tmaydi. Kvadrat qavs ichidagi tire oldidagi \ ni eslang — o'tgan darsdagi v rejim tuzog'i.

2. Serverda tartibga keltirish. Server kelgan raqamdan bo'sh joy va tirelarni olib tashlaydi, +998 ni ajratadi va bitta ko'rinishga keltiradi.

Real ishda ikkalasi birga qilinadi. Qoida: brauzer tekshiruvi avtoto'ldirish natijasini rad etmasin. Aks holda eng qulay imkoniyat mijozni jazolaydi.

9. autocomplete="off": qachon ishlaydi

off — "bu maydonga avvalgi qiymatlarni taklif qilma" degani. Uni butun formaga ham qo'yish mumkin: <form autocomplete="off">.

Qachon o'rinli:

• O'z takliflar ro'yxatingiz bor maydon. Masalan, datalist bilan taom qidiruvi. Aks holda ikki ro'yxat bir-birining ustiga chiqadi.
• Bir martalik qiymatlar. Rasmdagi harflarni terish (CAPTCHA) kabi maydonlar.

Qachon ishlamaydi:

• Login va parol maydonlari. Ko'p brauzerlar bu yerda off ni ataylab e'tiborsiz qoldiradi. Sababi — xavfsizlik: parol menejeri bo'lmasa, odamlar oddiy parol o'ylab topadi va uni hamma saytda ishlatadi. Saqlangan parol qo'yilmasligi kerak bo'lsa — new-password ishlating.
• Brauzer taniydigan manzil va kontakt maydonlari. Ba'zi brauzerlar bu yerda ham off ni har doim hurmat qilmaydi.

Xulosa: off — iltimos, buyruq emas. Brauzerga qanday ma'lumot kerakligini aniq token bilan aytish — off bilan kurashishdan ancha ishonchli.

10. Hujumchi nigohi

Avtoto'ldirish qulay — lekin uni firibgarlar ham ishlatishga uringan. Ma'lum hujum usuli bor:

1. Firibgar sahifasida faqat ikki maydon ko'rinadi: "Ism" va "Email" — sovg'a o'yini uchun.
2. Sahifada yana ko'rinmas maydonlar bor: autocomplete="tel", street-address, hatto cc-number.
3. Mijoz ismni avtoto'ldirish bilan to'ldiradi. Brauzer ko'rinmas maydonlarni ham to'ldirib qo'yadi.
4. Mijoz "ism va email berdim" deb o'ylaydi. Firibgar esa telefon, manzil va karta raqamini oladi.

Brauzerlar bu hujumga qarshi choralar ko'rgan. Taklif oynasida nimalar to'ldirilishini ko'rsatadi, ba'zilari karta raqamini qo'yishdan oldin qo'shimcha tasdiq (masalan, barmoq izi) so'raydi. Lekin choralar brauzerga qarab farq qiladi — ularga to'liq tayanmang.

Siz — dasturchi sifatida:

• Faqat kerakli ma'lumotni so'rang. Bron uchun manzil kerak bo'lmasa — manzil maydoni qo'ymang.
• Maydonlarni ko'zdan yashirib, ma'lumot yig'mang. Bu mijoz ishonchini buzadi, ko'p davlatlarda esa qonunga ham zid.
• Karta ma'lumotini faqat HTTPS sahifada va iloji bo'lsa to'lov tizimining o'z sahifasida so'rang.

Siz — foydalanuvchi sifatida: avtoto'ldirish taklifini bosishdan oldin unda nimalar to'ldirilishini o'qing. Notanish saytda karta ma'lumotini avtoto'ldirish bilan bermang.

11. Ko'p uchraydigan xatolar

11.1 O'ylab topilgan token

autocomplete="ism", autocomplete="telefon", autocomplete="phone" — hech biri token emas. To'g'risi: name, tel. Tuzatish: tokenni MDN'dagi ro'yxatdan oling va html-validate bilan tekshiring.

11.2 input da street-address

error  "street-address" cannot be used on <input type="text">  valid-autocomplete

Tarjimasi: "street-address ni input type="text" da ishlatib bo'lmaydi". Tuzatish: textarea ishlating yoki address-line1 va address-line2 ga bo'ling.

11.3 Ro'yxatdan o'tishda current-password

Brauzer yangi hisob formasiga eski parolni qo'yadi. Tuzatish: yangi parol maydoniga — new-password.

11.4 Hamma joyga autocomplete="off"

"Xavfsizroq bo'lsin" deb butun saytda off qo'yiladi. Natija: mijoz har safar hammasini qo'lda yozadi, parol menejeri adashadi. Xavfsizlik oshmaydi. Tuzatish: off ni faqat yuqorida sanalgan o'rinli holatlarda qoldiring, qolgan joyda aniq token yozing.

11.5 Avtoto'ldirishni rad etadigan pattern

Yuqorida ko'rgan tuzoq: brauzer to'ldirgan to'g'ri raqam qat'iy shablondan o'tmaydi. Tuzatish: shablonni yumshating, raqamni serverda tartibga keltiring.

12. Mashqlar

1-mashq (oson): Tokenni tanlang

1. Familiya maydoni:
2. Email maydoni:
3. Kirish formasidagi parol:
4. SMS kod maydoni:

2-mashq (o'rta): «Bahor» formalariga tokenlar

Bron formangizdagi har bir maydonga to'g'ri autocomplete qo'ying: ism, familiya, telefon, email va tug'ilgan kun (choyxona tug'ilgan kunda chegirma beradi). Telefon shablonini avtoto'ldirish bilan to'qnashmaydigan qiling.

Ishora: tug'ilgan kun tokeni — bday. Sana maydoni — type="date" (Son, sana, vaqt darsi).

<form method="get">
  <label for="ism">Ism</label>
  <input type="text" id="ism" name="ism"
         autocomplete="given-name" required>

  <label for="familiya">Familiya</label>
  <input type="text" id="familiya" name="familiya"
         autocomplete="family-name">

  <label for="telefon">Telefon</label>
  <input type="tel" id="telefon" name="telefon" autocomplete="tel"
         required pattern="[0-9 +\-]{9,17}">

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

  <label for="tugilgan">Tug'ilgan kuningiz</label>
  <input type="date" id="tugilgan" name="tugilgan"
         autocomplete="bday">

  <button type="submit">Bron qilish</button>
</form>

3-mashq (qiyin): Uch forma — uch xil parol

«Bahor» saytida doimiy mijozlar kabineti ochildi. Uchta forma yozing:

1. Kirish: login (telefon yoki email) va parol.
2. Ro'yxatdan o'tish: email va parol (kamida 8 belgi).
3. Parolni o'zgartirish: login ko'rinib turadi, lekin o'zgartirilmaydi; eski parol; yangi parol.

Har bir maydon uchun to'g'ri tokenni tanlang va sababini bir gapda yozing.

<form method="post" action="https://example.com/kirish">
  <label for="k-login">Telefon yoki email</label>
  <input type="text" id="k-login" name="login"
         autocomplete="username" required>
  <label for="k-parol">Parol</label>
  <input type="password" id="k-parol" name="parol"
         autocomplete="current-password" required>
  <button type="submit">Kirish</button>
</form>

<form method="post" action="https://example.com/royxat">
  <label for="r-login">Email</label>
  <input type="email" id="r-login" name="login"
         autocomplete="username" required>
  <label for="r-parol">Parol</label>
  <input type="password" id="r-parol" name="parol"
         autocomplete="new-password" required minlength="8">
  <button type="submit">Ro'yxatdan o'tish</button>
</form>

<form method="post" action="https://example.com/parol">
  <label for="p-login">Hisob</label>
  <input type="text" id="p-login" name="login"
         value="malika@example.com"
         autocomplete="username" readonly>
  <label for="p-eski">Hozirgi parol</label>
  <input type="password" id="p-eski" name="eski"
         autocomplete="current-password" required>
  <label for="p-yangi">Yangi parol</label>
  <input type="password" id="p-yangi" name="yangi"
         autocomplete="new-password" required minlength="8">
  <button type="submit">Parolni o'zgartirish</button>
</form>

13. Real ishda

• Konversiya. Onlayn do'konlarda buyurtma formasini tugatmay ketish — eng katta yo'qotishlardan biri. To'g'ri tokenlar formani tezlashtiradi va ko'proq buyurtma yakunlanadi. Bu dasturchi uchun eng arzon foyda.
• Accessibility standarti. WCAG'da (accessibility qoidalari to'plami — Accessibility nima darsida o'rganamiz) alohida talab bor: foydalanuvchi haqidagi ma'lumot so'raladigan maydonlar maqsadini dastur tushunsin. Buni aynan autocomplete tokenlari bajaradi. Harakatlanishi yoki xotirasi cheklangan odamlar uchun avtoto'ldirish — katta yordam.
• Parol menejerlari. Bitwarden, 1Password, Google Password Manager — hammasi username, current-password va new-password ga tayanadi. Ular to'g'ri ishlamasa, foydalanuvchilar sizga "sayt parolni eslab qolmayapti" deb yozadi.
• SMS bilan kirish. O'zbekistondagi ko'p ilovalarda kirish SMS kod bilan. one-time-code ni yozish — bir so'z, foydasi esa har kuni.
• Intervyu savoli: "new-password va current-password farqi nima?" Yoki: "autocomplete="off" parol maydonida ishlaydimi?"

Xulosa

• autocomplete — brauzerga maydonda qaysi ma'lumot so'ralayotganini aytadigan standart token; name atributi esa serverga ketadigan nom.
• Kontakt: name, given-name, family-name, email, tel; manzil: street-address (faqat textarea), address-line1, address-level2, postal-code.
• Login: username, current-password; ro'yxatdan o'tish — new-password; SMS kod — one-time-code; passkey — username webauthn.
• Noto'g'ri token jimgina e'tiborsiz qoldiriladi — html-validate bilan tekshiring.
• Qat'iy pattern avtoto'ldirish natijasini rad etmasin: shablonni yumshating, serverda tartibga keltiring.
• off — iltimos, buyruq emas; login va parol maydonlarida ko'pincha e'tiborsiz qoldiriladi.

Keyingi dars: Qulay va accessible forma — kam maydon, aniq yo'riqnoma va maydonga bog'langan xato xabarlari bilan formani hamma uchun qulay qilamiz.

Manbalar

• MDN: "HTML attribute: autocomplete" (tokenlar ro'yxati) — developer.mozilla.org
• WHATWG HTML: "Autofill" (autofill detail tokens) — html.spec.whatwg.org
• web.dev: "Sign-in form best practices", "Payment and address form best practices" — web.dev
• W3C WCAG 2.2: 1.3.5 "Identify Input Purpose" — w3.org