দশম বার আপনার ঠিকানা পুনরায় লিখতে হচ্ছে ক্লান্তিকর. ব্রাউজার, এবং আপনি, একজন বিকাশকারী হিসাবে, ব্যবহারকারীদের দ্রুত ডেটা প্রবেশ করতে এবং ডেটা পুনরায় প্রবেশ করা এড়াতে সহায়তা করতে পারেন৷ এই মডিউলটি আপনাকে শেখায় কিভাবে অটোফিল কাজ করে, এবং কিভাবে autocomplete
এবং অন্যান্য উপাদান বৈশিষ্ট্যগুলি নিশ্চিত করতে পারে যে ব্রাউজারগুলি উপযুক্ত অটোফিল বিকল্পগুলি অফার করে৷
অটোফিল কিভাবে কাজ করে?
অটোফিলের ভূমিকায় , আপনি ইতিমধ্যেই অটোফিলের মূল বিষয়গুলি শিখেছেন৷ কিন্তু কেন ব্রাউজার অটোফিল অফার করে?
ফর্মগুলি পূরণ করা একটি আকর্ষণীয় কার্যকলাপ নয়, তবে এখনও এমন কিছু যা আপনি প্রায়শই করেন। সময়ের সাথে সাথে, আপনি অনেকগুলি ফর্ম পূরণ করেন এবং আপনি প্রায়শই একই ডেটা পূরণ করেন। ব্যবহারকারীদের দ্রুত ফর্মগুলি পূরণ করতে সহায়তা করার একটি উপায় হল তাদের পূর্বে প্রবেশ করা ডেটা সহ ফর্ম ক্ষেত্রগুলি স্বয়ংক্রিয়ভাবে পূরণ করার বিকল্প দেওয়া। এটি অটোফিল।
ব্রাউজাররা কীভাবে জানতে পারে কোন ডেটা স্বয়ংক্রিয়ভাবে পূরণ করতে হবে? খুঁজে বের করার জন্য একটি উদাহরণ ফর্ম ক্ষেত্রের দেখুন.
<label for="name">Name</label>
<input name="name" id="name">
আপনি যদি এই ফর্ম ক্ষেত্রটি জমা দেন, ব্রাউজারগুলি name
বৈশিষ্ট্য (নাম) এর মান সহ মান (আপনি যে ডেটা প্রবেশ করেছেন) সংরক্ষণ করে। কিছু ব্রাউজার ডেটা সংরক্ষণ এবং পূরণ করার সময় id
বৈশিষ্ট্যটিও দেখে।
বলুন, সপ্তাহ পরে, আপনি অন্য ওয়েবসাইটে আরেকটি ফর্ম পূরণ করেন। এই সাইটে name="name"
সহ একটি ফর্ম ক্ষেত্রও রয়েছে। আপনার ব্রাউজার এখন অটোফিল অফার করতে পারে, কারণ নামের জন্য একটি মান ইতিমধ্যেই সংরক্ষিত আছে৷
অটোফিল বিশেষত আপনার নিয়মিত ব্যবহার করা ফর্মগুলিতে দরকারী, যেমন সাইন-আপ এবং সাইন-ইন, অর্থপ্রদান, চেকআউট এবং ফর্ম যেখানে আপনাকে আপনার নাম বা ঠিকানা লিখতে হবে৷
autocomplete
বৈশিষ্ট্যের জন্য উপযুক্ত মান ব্যবহার করে আপনি ব্রাউজারগুলিকে সেরা স্বতঃপূর্ণ বিকল্পগুলি অফার করতে সহায়তা করতে পারেন। autocomplete
জন্য অনেকগুলি সম্ভাব্য মান রয়েছে। এখানে ঠিকানাগুলির একটি উদাহরণ।
আপনার ব্রাউজারে ইতিমধ্যে আপনার জন্য একটি ঠিকানা সংরক্ষিত আছে? দারুণ! আপনি ঠিকানা ফর্মের প্রথম ক্ষেত্রের সাথে ইন্টারঅ্যাক্ট করার পরে, ব্রাউজার আপনাকে সংরক্ষিত ঠিকানাগুলির একটি তালিকা দেখায়। আপনি একটি চয়ন করতে পারেন, এবং ব্রাউজার ঠিকানা সম্পর্কিত সমস্ত ক্ষেত্র পূরণ করে। অটোফিল দ্রুত এবং সহজে ফর্ম পূরণ করে।
প্রতিটি ঠিকানা ফর্মে একই ক্ষেত্র থাকে না এবং ক্ষেত্রের ক্রমও পরিবর্তিত হয়। autocomplete
জন্য সঠিক মান ব্যবহার করা নিশ্চিত করে যে ব্রাউজারটি একটি ফর্মের জন্য সঠিক মান পূরণ করে। country
জন্য মান আছে, postal-code
, এবং আরও অনেক কিছু ।
নিশ্চিত করুন যে ব্যবহারকারীরা দ্রুত সাইন ইন করতে পারে এবং নিরাপদ পাসওয়ার্ড ব্যবহার করতে পারে
অনেকেই পাসওয়ার্ড মনে রাখতে পারছেন না। সবচেয়ে সাধারণ পাসওয়ার্ড হল '123456', এর পরে অন্যান্য সহজে মনে রাখা যায়। কিভাবে আপনি তাদের সব মনে না রেখে নিরাপদ এবং অনন্য পাসওয়ার্ড ব্যবহার করতে পারেন?
আপনার জন্য পাসওয়ার্ড তৈরি করতে, সংরক্ষণ করতে এবং পূরণ করতে ব্রাউজারগুলিতে বিল্ট-ইন পাসওয়ার্ড ম্যানেজার রয়েছে৷ আপনি কীভাবে ব্রাউজারকে স্বয়ংক্রিয়ভাবে ইমেল পূরণ করতে এবং পাসওয়ার্ড পরিচালনা করতে সহায়তা করতে পারেন তা দেখুন৷
আপনি একটি ইমেল ক্ষেত্রের জন্য autocomplete="email"
ব্যবহার করতে পারেন, যাতে ব্যবহারকারীরা একটি ইমেল ঠিকানার জন্য অটোফিল বিকল্পটি পান।
যেহেতু এটি একটি সাইন-আপ ফর্ম, ব্যবহারকারীদের পূর্বে ব্যবহৃত পাসওয়ার্ড পূরণ করার বিকল্প পাওয়া উচিত নয়। আপনি autocomplete="new-password"
ব্যবহার করতে পারেন যাতে ব্রাউজার একটি নতুন পাসওয়ার্ড তৈরি করার বিকল্প অফার করে।
সাইন-ইন ফর্মে, আপনি ব্রাউজারগুলিকে এই ওয়েবসাইটের জন্য পূর্বে সংরক্ষিত পাসওয়ার্ডগুলি পূরণ করার বিকল্প অফার করতে বলার জন্য autocomplete="current-password"
ব্যবহার করতে পারেন৷
আপনি অনেক ওয়েবসাইটে দুই-ফ্যাক্টর প্রমাণীকরণ সেট আপ করতে পারেন। পাসওয়ার্ড ছাড়াও, এসএমএস বা একটি দ্বি-ফ্যাক্টর প্রমাণীকরণ অ্যাপের সাথে একটি এককালীন কোড পাঠানো হয়।
আপনি যদি এসএমএস বার্তায় প্রাপ্ত কোডটি অন-স্ক্রিন কীবোর্ড দ্বারা প্রস্তাবিত হয় এবং আপনি মানটি পূরণ করতে সরাসরি এটি নির্বাচন করতে পারেন তবে এটি কি দুর্দান্ত হবে না? Safari 14 বা তার পরে, আপনি এটি অর্জন করতে autocomplete="one-time-code"
ব্যবহার করতে পারেন। অ্যান্ড্রয়েডের ক্রোমে, আপনি JavaScript দিয়ে এটি অর্জন করতে WebOTP API ব্যবহার করতে পারেন।
এসএমএস ওটিপি ফর্মের সর্বোত্তম অনুশীলনের মাধ্যমে কীভাবে ওয়েবে ফোন নম্বর যাচাই করতে হয় সে সম্পর্কে আরও জানুন।
ব্যবহারকারীদের তাদের ক্রেডিট কার্ড তথ্য পূরণ করতে সাহায্য করুন
অনেক ইকমার্স ওয়েবসাইটে, আপনি পণ্য কেনার জন্য আপনার ক্রেডিট কার্ড ব্যবহার করতে পারেন। সাইটগুলি তাদের নিজস্ব ফর্মগুলি সরবরাহ করে এমন তৃতীয়-পক্ষের অর্থপ্রদানের প্ল্যাটফর্মগুলি ব্যবহার করতে পারে, তবে আপনার যদি নিজের অর্থপ্রদানের ফর্মগুলি তৈরি করার প্রয়োজন হয় তবে নিশ্চিত করুন যে লোকেরা সহজেই অর্থপ্রদানের তথ্য পূরণ করতে পারে৷
ব্রাউজারগুলি সঠিক অটোফিল বিকল্পগুলি অফার করে তা নিশ্চিত করতে আপনি autocomplete
বৈশিষ্ট্যটি আবার ব্যবহার করতে পারেন।
ক্রেডিট কার্ড নম্বর cc-number
, ক্রেডিট কার্ডের মেয়াদ শেষ হওয়ার তারিখ cc-exp
, এবং ক্রেডিট কার্ডের অর্থপ্রদানের জন্য প্রয়োজনীয় অন্যান্য সমস্ত তথ্যের মান রয়েছে৷
ব্রাউজারগুলি অটোফিল অফার করে তা নিশ্চিত করতে ক্রেডিট কার্ড নম্বর এবং টেলিফোন নম্বরগুলির মতো নম্বরগুলির জন্য একটি একক ইনপুট ব্যবহার করুন৷ মানক ফর্ম উপাদান ব্যবহার করুন, উদাহরণস্বরূপ, স্বয়ংসম্পূর্ণ উপলব্ধ নিশ্চিত করতে কাস্টম উপাদানের পরিবর্তে পেমেন্ট কার্ডের তারিখের জন্য একটি <select>
।
পেমেন্ট ডেটা পুনরায় প্রবেশ করা এড়াতে ব্যবহারকারীদের সাহায্য করার বিষয়ে আরও জানুন।
আপনার সমস্ত ক্ষেত্রের জন্য অটোফিল কাজ করে তা নিশ্চিত করুন
ঠিকানা, অ্যাকাউন্টের তথ্য এবং ক্রেডিট কার্ডের তথ্য ছাড়াও, আরও অনেক ক্ষেত্র রয়েছে যেখানে ব্রাউজারগুলি ব্যবহারকারীদের স্বতঃপূরণে সাহায্য করতে পারে।
আপনার ফর্মে একটি টেলিফোন ক্ষেত্র যোগ করার সময় আপনি স্বয়ংসম্পূর্ণের জন্য উপলব্ধ মানগুলির মধ্যে কোনো ব্যবহার করতে পারেন কিনা তা পরীক্ষা করুন। আপনার ফর্ম ক্ষেত্রের জন্য একটি উপযুক্ত মান পাওয়া গেছে? এটা যোগ করুন.
autocomplete
বৈশিষ্ট্যের জন্য উপযুক্ত মান ব্যবহার করা ব্রাউজারগুলিকে সর্বোত্তম অটোফিল বিকল্প অফার করতে সহায়তা করে এবং ব্যবহারকারীদের দ্রুত ফর্ম পূরণ করতে সহায়তা করে৷
ব্রাউজারদের বুঝতে সাহায্য করুন যে একটি ক্ষেত্র স্বয়ংক্রিয়ভাবে পূরণ করা উচিত নয়
আপনি শিখেছেন কীভাবে অটোফিল কাজ করে, আপনি কীভাবে ব্রাউজারকে স্বতঃপূরণে সাহায্য করতে পারেন এবং কেন স্বয়ংক্রিয়ভাবে পূরণ করা ব্যবহারকারীদের জন্য ফর্ম পূরণ করা সুবিধাজনক করে তোলে। কখনও কখনও, যদিও, আপনি ব্রাউজারগুলি অটোফিল অফার করতে চান না৷
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
একটি জায়গা যেখানে অটোফিল সহায়ক নয় তা হল ওয়ান-অফ, অনন্য মান যেমন এক-কালীন কোড ক্ষেত্র প্রবেশ করানো। মান প্রতিবার ভিন্ন হয়, এবং ব্রাউজার মান সংরক্ষণ করা বা একটি স্বতঃপূর্ণ বিকল্প অফার করা উচিত নয়। অটোফিল রোধ করতে আপনি এই ধরনের ক্ষেত্রগুলির জন্য autocomplete="off"
ব্যবহার করতে পারেন।
autocomplete="off"
এর জন্য আরেকটি ব্যবহারের ক্ষেত্রে একটি মধুর পট ক্ষেত্র ( আগের মডিউল দেখুন)। যদিও ক্ষেত্রটি দৃশ্যমান নয়, ব্রাউজারগুলি এটিকে বাকি ক্ষেত্রগুলির সাথে স্বয়ংক্রিয়ভাবে পূরণ করতে পারে৷ স্বয়ংক্রিয়ভাবে পূরণ করা বন্ধ করা নিশ্চিত করে যে একজন প্রকৃত ব্যবহারকারীকে বট হিসেবে চিহ্নিত করা হয়নি, কারণ ক্ষেত্রটি স্বয়ংক্রিয়ভাবে সম্পন্ন হচ্ছে।
আপনি শুধুমাত্র অটোফিল অক্ষম করা উচিত যদি আপনি নিশ্চিত হন যে এটি ব্যবহারকারীদের সাহায্য করবে।
আপনার উপলব্ধি পরীক্ষা করুন
অটোফিল সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন
সাইন-আপ ফর্মে পাসওয়ার্ড ক্ষেত্রের জন্য আপনার কোন স্বয়ংসম্পূর্ণ মান ব্যবহার করা উচিত?
autocomplete="new-password"
autocomplete="password"
autocomplete="current-password"
autocomplete="off"