Avtoto‘ldirish (autocomplete)


ULASHISH

Nega

autocomplete atributi formani barcha foydalanuvchilar uchun osonroq va samaraliroq qiladi, ayniqsa diqqat yetishmovchiligi yoki kognitiv buzilishlari bor, harakatlanish imkoniyati cheklangan, ko‘rish qobiliyati past yoki ko‘zi ojiz foydalanuvchilar uchun.


Nima

Hech veb-formaga kirganingizda brauzeringiz maydonlarni sehrli tarzda avtomatik to‘ldirganini boshdan kechirganmisiz? Buning sababi yo brauzer aqlli bo‘lgani, yoki forma muallifi autocomplete atributidan to‘g‘ri foydalangani.

Bu hamma uchun qulay. Bu harakat faoliyati buzilgan yoki kognitiv nogironligi bor foydalanuvchilar uchun juda foydali. Formani to‘ldirish qiyin bo‘lishi mumkin va autocomplete atributi ko‘pincha yordam qo‘lini cho‘zadi.


Qanday

Autocomplete’ni <input>, <textarea>, <select> va <form> elementlarida ishlatish mumkin. Atribut ko‘plab qiymatlarga ega bo‘lishi mumkin, masalan:

  • "name": Daniel Zhang
  • "given name": Daniel
  • "family name": Zhang
  • "organization": Alibaba Group
  • "country-name": China
  • "street-address": 699 Wang Shang Road

Qiymatlarning to‘liq ro‘yxati: Input Purposes for User Interface Components.

Misol: Ro‘yxatdan o‘tish formasi

Screenshot from Optus registration form, with empty fields for email and date of birth.

Bu ro‘yxatdan o‘tish formasida email va tug‘ilgan kun uchun maydonlar bor. Avtoto‘ldirishni taqdim etish uchun ajoyib imkoniyat. Ko‘plab foydalanuvchilarda bu ma’lumotlar brauzerida saqlangan bo‘lib, autocomplete yoqilgan formaga tayyor turadi. Brauzer maydonlarning maqsadini tushunishi kerak.

Yorliq va placeholder ba’zi brauzerlar uchun ishora bo‘ladi, lekin ishonchli yechim emas. Eng yaxshi usul — sehrli autocomplete atributini qo‘shish:

<input id="email" autocomplete="email" name="email" aria-required="true" placeholder="Email" required>

<select id="dobDay" autocomplete="bday-day" aria-required="true" required>

<select id="dobMonth" autocomplete="bday-month" aria-required="true" required>

<input id="dobYear" autocomplete="bday-year" placeholder="YYYY" aria-required="true" required>

Istisnolar

Istisnosiz qoida bo‘lmaydi. Yuqoridagi kod misoli formani oson, samarali, xatosiz va qulay qiladi. Agar forma "sizning" emailingizni emas, boshqa emailni so‘rasa, autocomplete atributini qo‘shish ma’nosiz bo‘lardi. Agar ma’lumotlar brauzerda saqlanmagan bo‘lishi ehtimoli katta bo‘lsa, bu atribut qo‘shilmasligi kerak.

Hamma formalar ham xatosiz bo‘lavermaydi. Qulay xato xabarlarini qanday kodlash kerak? O‘qishda davom eting!



W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!