ক্রস-প্ল্যাটফর্ম ব্রাউজার ফিচার ব্যবহার করে সাইন-ইন ফর্ম তৈরি করুন যা সুরক্ষিত, অ্যাক্সেসযোগ্য এবং ব্যবহার করা সহজ।
ব্যবহারকারীদের যদি কখনও আপনার সাইটে সাইন-ইন করতে হয়, তাহলে সাইন-ইন ফর্মের ডিজাইন ভালো হওয়া খুবই গুরুত্বপূর্ণ। এটি বিশেষ করে তাদের ক্ষেত্রে প্রযোজ্য যারা দুর্বল কানেকশন, মোবাইল ব্যবহার করছেন, তাড়াহুড়ো করছেন বা চাপের মধ্যে আছেন। খারাপভাবে ডিজাইন করা সাইন-ইন ফর্মের বাউন্স রেট বেশি হয়। প্রতিটি বাউন্সের অর্থ হল একজন গ্রাহক হারানো এবং একজন অসন্তুষ্ট ব্যবহারকারী—শুধু সাইন-ইন করার সুযোগ হাতছাড়া করা নয়।
কীভাবে প্রয়োগ করতে হয়
সাইন-ইন ফর্ম সফলভাবে তৈরি করার জন্য সবচেয়ে গুরুত্বপূর্ণ নির্দেশিকা নিচে উল্লেখ করা হল।
অর্থপূর্ণ, সঠিক HTML ব্যবহার করুন
ফর্ম তৈরি করার জন্য তৈরি করা এলিমেন্ট ও অ্যাট্রিবিউটের সবচেয়ে বেশি ব্যবহার করুন:
<form>,<input>,<label>ও<button>type,autocompleteওinputmode
এগুলি বিল্ট-ইন ব্রাউজার কার্যকারিতা চালু করে, অ্যাক্সেসিবিলিটি উন্নত করে এবং মার্কআপে অর্থ যোগ করে।
ডেটা এন্ট্রির জন্য ফর্ম ফিল্ড লেবেল করতে <label> এলিমেন্ট ব্যবহার করুন
<input>, <select> বা <textarea> লেবেল করতে, <label> ব্যবহার করুন। ইনপুটের id-এর মতো একই ভ্যালু লেবেলের for অ্যাট্রিবিউটকে দিয়ে ইনপুটের সাথে লেবেল যুক্ত করুন।
HTML অ্যাট্রিবিউটের সর্বাধিক সুবিধা নিন
মোবাইলে সঠিক কীবোর্ড প্রদান করতে এবং ব্রাউজারের মাধ্যমে প্রাথমিক বিল্ট-ইন যাচাইকরণ চালু করতে, উপযুক্ত <input> এলিমেন্ট <type> অ্যাট্রিবিউট ব্যবহার করে ব্যবহারকারীদের জন্য ডেটা এন্টার করা সহজ করুন।
ইমেল আইডির জন্য সবসময় type="email" এবং ফোন নম্বরের জন্য type="tel" ব্যবহার করুন।
অ্যাক্সেসিবিলিটি উন্নত করতে এবং ব্যবহারকারীদের ডেটা আবার লেখার ঝামেলা এড়াতে সাহায্য করার জন্য প্রতিটি <input>, <select> এবং <textarea> এলিমেন্টে উপযুক্ত autocomplete অ্যাট্রিবিউট থাকতে হবে।
ইউজারনেম এবং ইমেল ইনপুটে শনাক্তকারী থাকে, গদ্য নয়। spellcheck="false" যোগ করুন যাতে ব্রাউজার সেগুলিকে এমন কিছুতে রিরাইট না করে যা অ্যাকাউন্টের সাথে মেলে না। input type="email"-এর জন্য autocorrect এবং autocapitalize সবসময় বন্ধ থাকে, তবে ইমেল নয় এমন ইউজারনেমের জন্য প্রয়োজন।
বোতামগুলি সহায়ক করে তুলুন
বোতামের জন্য <button> ব্যবহার করুন। আপনি <input type="submit"> ব্যবহার করতে পারেন, তবে div বা বোতাম হিসেবে কাজ করে এমন অন্য কোনও র্যান্ডম এলিমেন্ট ব্যবহার করবেন না। বোতাম এলিমেন্ট অ্যাক্সেসযোগ্য আচরণ, বিল্ট-ইন ফর্ম জমা দেওয়ার কার্যকারিতা প্রদান করে এবং সহজেই স্টাইল করা যায়।
প্রতিটি ফর্ম জমা দেওয়ার বোতামে এমন একটি ভ্যালু দিন যা থেকে বোঝা যায় যে এটি কী করে। স্পষ্ট, চেনা যায় এমন লেবেল ব্যবহার করুন। যেমন, চালিয়ে যান বা জমা দিন-এর পরিবর্তে সাইন-ইন করুন ব্যবহার করুন।
সম্ভব হলে নামের জন্য একটি ইনপুট ব্যবহার করুন
আপনার ব্যবহারকারীদের একটি ইনপুট ব্যবহার করে তাদের নাম লিখতে দিন, যদি না আপনার কাছে প্রদত্ত নাম, পারিবারিক নাম, সম্মানসূচক বা অন্যান্য নামের অংশ আলাদাভাবে স্টোর করার কোনও ভালো কারণ থাকে। একটি নাম ইনপুট ব্যবহার করলে ফর্ম কম জটিল হয়, কাট-অ্যান্ড-পেস্ট করা যায় এবং অটোফিল আরও সহজ হয়।
আন্তর্জাতিক নামের অনুমতি দিন। যাচাইকরণের জন্য, শুধুমাত্র ল্যাটিন অক্ষরের সাথে মেলে এমন রেগুলার এক্সপ্রেশন ব্যবহার করা এড়িয়ে চলুন। 'শুধুমাত্র ল্যাটিন' বিকল্পটি বেছে নিলে, যেসব ব্যবহারকারীর নাম বা ঠিকানায় ল্যাটিন বর্ণমালার অক্ষর নেই, তাদের বাদ দেওয়া হয়। পরিবর্তে ইউনিকোড অক্ষর ম্যাচ করার অনুমতি দিন—এবং আপনার ব্যাকএন্ড ইনপুট এবং আউটপুট উভয় হিসাবেই ইউনিকোডকে নিরাপদে সমর্থন করে কিনা তা নিশ্চিত করুন। আধুনিক ব্রাউজারে রেগুলার এক্সপ্রেশনে ইউনিকোড ভালভাবে কাজ করে।
সাইন-ইন করার প্রোগ্রেস দেখুন
সাইন-ইন করার প্রতিটি ধাপে, পৃষ্ঠার শিরোনাম এবং বর্ণনামূলক বোতামের ভ্যালু ব্যবহার করুন যা এখন কী করতে হবে এবং পরবর্তী ধাপ কী তা স্পষ্ট করে তোলে।
মোবাইল কীবোর্ডের Enter কী লেবেল সেট করতে ফর্ম ইনপুটে enterkeyhint অ্যাট্রিবিউট ব্যবহার করুন। যেমন, একাধিক-পৃষ্ঠাযুক্ত ফর্মের মধ্যে enterkeyhint="previous" এবং enterkeyhint="next", ফর্মে চূড়ান্ত ইনপুটের জন্য enterkeyhint="done" এবং সার্চ ইনপুটের জন্য enterkeyhint="search" ব্যবহার করুন।
ব্যবহারকারীদের সাইন-ইন ডেটা আবার লেখা এড়াতে সাহায্য করুন
সাইন-ইন ফর্মে উপযুক্ত autocomplete ভ্যালু যোগ করতে ভুলবেন না।
এটি ব্রাউজারকে সাইন-ইন সংক্রান্ত বিবরণ নিরাপদে স্টোর করে এবং ফর্ম ডেটা সঠিকভাবে লিখে ব্যবহারকারীদের সাহায্য করতে দেয়। অটোফিল ফিচার না থাকলে, ব্যবহারকারীরা সাইন-ইন সংক্রান্ত বিবরণের ফিজিক্যাল রেকর্ড রাখতে পারেন অথবা তাদের ডিভাইসে সাইন-ইন ডেটা অসুরক্ষিতভাবে স্টোর করতে পারেন।
ভালো করে যাচাই করুন
রিয়েল-টাইমে এবং ফর্ম জমা দেওয়ার আগে ডেটা এন্ট্রি যাচাই করুন। ইমেল ইনপুটের জন্য type="email" ব্যবহার করুন — ব্রাউজার অটোমেটিক ফর্ম্যাট যাচাই করবে। ফাঁকা জমা দেওয়া আটকাতে বাধ্যতামূলক ফিল্ডে required অ্যাট্রিবিউট যোগ করুন।
সাইন-ইনকে নিজস্ব <form> এলিমেন্টে রাখুন
ব্যবহারকারীদের থেকে ডেটা নেওয়ার সময় সবসময় <form> এলিমেন্ট ব্যবহার করুন
<div>-এ ইনপুট র্যাপ করবেন না এবং ইনপুট ডেটা জমা দেওয়ার বিষয়টি শুধুমাত্র JavaScript-এর মাধ্যমে ম্যানেজ করুন। সাধারণত <form> এলিমেন্ট ব্যবহার করা ভাল। এটি আপনার সাইটকে স্ক্রিনরিডার এবং অন্যান্য সহায়ক ডিভাইসের জন্য অ্যাক্সেসযোগ্য করে তোলে, বিল্ট-ইন ব্রাউজার ফিচারের একটি রেঞ্জ চালু করে, পুরনো ব্রাউজারের জন্য মৌলিক কার্যকরী সাইন-ইন তৈরি করা সহজ করে তোলে এবং জাভাস্ক্রিপ্ট কাজ না করলেও কাজ করতে পারে।
ইনপুট ডবল করবেন না
কিছু সাইট ব্যবহারকারীদের ইমেল বা পাসওয়ার্ড দুবার লিখতে বাধ্য করে। এটি হয়ত কিছু ব্যবহারকারীর জন্য সমস্যার পরিমাণ কমাবে, কিন্তু সব ব্যবহারকারীর জন্য অতিরিক্ত কাজ তৈরি করবে এবং অ্যাপ লোডিং বন্ধ করার হার বাড়াবে। এছাড়াও, ব্রাউজার যেখানে ইমেল আইডি অটোফিল করে বা শক্তিশালী পাসওয়ার্ড সাজেস্ট করে, সেখানে দুবার জিজ্ঞাসা করার কোনও মানে হয় না। ব্যবহারকারীদের ইমেল আইডি কনফার্ম করার সুবিধা দেওয়া (আপনাকে এটি করতেই হবে) এবং প্রয়োজনে পাসওয়ার্ড রিসেট করার সুবিধা দেওয়া ভালো।
পাসওয়ার্ড ব্যক্তিগত রাখুন—তবে ব্যবহারকারীরা চাইলে তাদের দেখতে দিন
পাসওয়ার্ড ইনপুটে type="password" থাকতে হবে যাতে পাসওয়ার্ড টেক্সট লুকানো যায় এবং ব্রাউজার বুঝতে পারে যে ইনপুটটি পাসওয়ার্ডের জন্য। (মনে রাখবেন যে ইনপুট রোল বুঝতে এবং পাসওয়ার্ড সেভ করার অফার দেওয়া হবে কিনা তা নির্ধারণ করতে ব্রাউজার বিভিন্ন টেকনিক ব্যবহার করে।)
ব্যবহারকারীরা যাতে তাদের লেখা টেক্সট চেক করতে পারেন, তার জন্য আপনাকে পাসওয়ার্ড দেখুন টগল যোগ করতে হবে—এবং পাসওয়ার্ড ভুলে গেছেন লিঙ্ক যোগ করতে ভুলবেন না।
মোবাইল ব্যবহারকারীদের সঠিক কীবোর্ড দিন
মোবাইল ব্যবহারকারীদের উপযুক্ত কীবোর্ড দিতে এবং ব্রাউজারের মাধ্যমে প্রাথমিক বিল্ট-ইন ইমেল আইডি যাচাইকরণ চালু করতে <input type="email"> ব্যবহার করুন… কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই!
ইমেল আইডির পরিবর্তে টেলিফোন নম্বর ব্যবহার করতে হলে, <input type="tel"> মোবাইলে টেলিফোন কীপ্যাড চালু করে। এছাড়াও, আপনি যেখানে প্রয়োজন সেখানে inputmode অ্যাট্রিবিউট ব্যবহার করতে পারেন: inputmode="numeric" পিন নম্বরের জন্য আদর্শ।
মোবাইল কীবোর্ড যাতে সাইন-ইন বোতামকে আড়াল না করে তা নিশ্চিত করুন
আপনি সতর্ক না হলে, মোবাইল কীবোর্ড আপনার ফর্মটি ঢেকে দিতে পারে বা আরও খারাপ, সাইন-ইন বোতামটি আংশিকভাবে ব্লক করতে পারে। কী হয়েছে তা বোঝার আগেই ব্যবহারকারীরা হাল ছেড়ে দিতে পারেন।
সম্ভব হলে, আপনার সাইন-ইন পৃষ্ঠার সবচেয়ে উপরে শুধুমাত্র ইমেল (বা ফোন) ও পাসওয়ার্ড ইনপুট এবং সাইন-ইন বোতাম দেখিয়ে এটি এড়িয়ে চলুন। অন্য কন্টেন্ট নিচে রাখুন।
ব্যবহারকারীদের ডেটা আবার লেখার হাত থেকে বাঁচান
আপনি ব্রাউজারকে ডেটা সঠিকভাবে স্টোর করতে এবং ইনপুট অটোফিল করতে সাহায্য করতে পারেন, যাতে ব্যবহারকারীদের ইমেল এবং পাসওয়ার্ডের মান লিখতে মনে রাখতে না হয়। এটি মোবাইলের ক্ষেত্রে বিশেষভাবে গুরুত্বপূর্ণ এবং ইমেল ইনপুটের জন্য অত্যন্ত জরুরি, কারণ এতে ব্যবহারকারীরা অনেক সময় মাঝপথে ছেড়ে চলে যান। এর দুটি অংশ আছে:
autocomplete,name,idওtypeঅ্যাট্রিবিউট ব্রাউজারকে ইনপুটের ভূমিকা বুঝতে সাহায্য করে যাতে ডেটা স্টোর করা যায় যা পরে অটোফিলের জন্য ব্যবহার করা যেতে পারে। অটোফিলের জন্য ডেটা স্টোর করার অনুমতি দিতে, আধুনিক ব্রাউজারে ইনপুটের জন্য একটি স্থিতিশীলnameবাidভ্যালু থাকতে হবে (প্রতিটি পৃষ্ঠা লোড বা সাইট ডেপ্লয়মেন্টে র্যান্ডমভাবে জেনারেট করা নয়) এবংsubmitবোতাম সহ একটি<form>এলিমেন্টে থাকতে হবে।autocompleteঅ্যাট্রিবিউট, সেভ করা ডেটা ব্যবহার করে ব্রাউজারকে সঠিকভাবে ইনপুট অটোফিল করতে সাহায্য করে।
ইমেল ইনপুটের জন্য autocomplete="username" ব্যবহার করুন, কারণ আধুনিক ব্রাউজারে পাসওয়ার্ড ম্যানেজার username শনাক্ত করে—যদিও আপনার type="email" ব্যবহার করা উচিত এবং আপনি হয়ত id="email" ও name="email" ব্যবহার করতে চাইবেন। পাসওয়ার্ড ইনপুটের জন্য, উপযুক্ত autocomplete ভ্যালু ব্যবহার করুন যাতে ব্রাউজার নতুন ও বর্তমান পাসওয়ার্ডের মধ্যে পার্থক্য করতে পারে।
আগে থেকে থাকা পাসওয়ার্ডের জন্য autocomplete="current-password" ব্যবহার করুন
বাধ্যতামূলক: সাইন-ইন ফর্মে পাসওয়ার্ড ইনপুট করার জন্য autocomplete="current-password" ব্যবহার করুন। এটি ব্রাউজারকে জানায় যে আপনি সাইটের জন্য স্টোর করা বর্তমান পাসওয়ার্ড ব্যবহার করতে চান।
সাইন-ইন ফর্মের জন্য:
<input type="password" autocomplete="current-password" id="current-password" …>
ব্রাউজারকে শক্তিশালী পাসওয়ার্ড সাজেস্ট করার অনুমতি দিন
আধুনিক ব্রাউজার হিউরিস্টিক ব্যবহার করে সিদ্ধান্ত নেয় যে কখন পাসওয়ার্ড ম্যানেজার UI দেখাতে হবে এবং শক্তিশালী পাসওয়ার্ড সাজেস্ট করতে হবে।
ব্রাউজারে বিল্ট-ইন পাসওয়ার্ড জেনারেটর থাকার অর্থ হল, ব্যবহারকারী ও ডেভেলপারদের "শক্তিশালী পাসওয়ার্ড" কী তা নিয়ে মাথা ঘামাতে হয় না। ব্রাউজার যেহেতু পাসওয়ার্ড নিরাপদে স্টোর করতে এবং প্রয়োজন অনুযায়ী অটোফিল করতে পারে, তাই ব্যবহারকারীদের পাসওয়ার্ড মনে রাখা বা লেখার প্রয়োজন হয় না। ব্যবহারকারীদের বিল্ট-ইন ব্রাউজার পাসওয়ার্ড জেনারেটর ব্যবহার করতে উৎসাহিত করার অর্থ হল, তারা আপনার সাইটে একটি অনন্য, শক্তিশালী পাসওয়ার্ড ব্যবহার করার সম্ভাবনা বেশি এবং অন্য কোথাও চুরি হয়ে যেতে পারে এমন পাসওয়ার্ড পুনরায় ব্যবহার করার সম্ভাবনা কম।
ব্যবহারকারীদের ভুলবশত ইনপুট মিস করা থেকে বাঁচাতে সাহায্য করুন
বাধ্যতামূলক: ইমেল ও পাসওয়ার্ড, দুটি ফিল্ডেই required অ্যাট্রিবিউট যোগ করুন। আধুনিক ব্রাউজারগুলি অনুপস্থিত ডেটার জন্য অটোমেটিক প্রম্পট করে এবং ফোকাস সেট করে।
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
পাসওয়ার্ড পেস্ট করার অনুমতি দিন
কিছু সাইট পাসওয়ার্ড ইনপুটে টেক্সট পেস্ট করার অনুমতি দেয় না।
পাসওয়ার্ড পেস্ট করার অনুমতি না দিলে ব্যবহারকারীরা বিরক্ত হন, সহজে মনে রাখা যায় এমন পাসওয়ার্ড (যা সহজেই চুরি করা যায়) ব্যবহার করতে উৎসাহিত হন এবং UK National Cyber Security Centre-এর মতো সংস্থার মতে, এর ফলে নিরাপত্তা আসলে কমে যেতে পারে। ব্যবহারকারীরা পাসওয়ার্ড পেস্ট করার চেষ্টা করার পরেই বুঝতে পারেন যে পেস্ট করার অনুমতি নেই, তাই পাসওয়ার্ড পেস্ট করার অনুমতি না দিলেও ক্লিপবোর্ডের দুর্বলতা এড়ানো যায় না।
ফলব্যাক স্ট্র্যাটেজি
অটোফিল হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে অটোফিল কাজ করে না, সেখানে ব্যবহারকারীদের ম্যানুয়ালি সাইন-ইন ক্রেডেনশিয়াল লিখতে হবে। ব্যবহারকারীর ইনপুট যাচাই করতে এবং সঠিক ভার্চুয়াল কীবোর্ড প্রদান করতে, সেম্যান্টিক HTML কনস্ট্রেন্ট (যেমন type, inputmode এবং required) এখনও যথাযথভাবে কাজ করবে।