এমন একটি ফর্ম তৈরি করুন যা ব্যবহারকারীদের জন্য ডেস্কটপ এবং মোবাইলে ঠিকানা সংক্রান্ত ডেটা লেখা যতটা সম্ভব সহজ করে তোলে। অটোফিল, যাচাইকরণ এবং ডেটা এন্ট্রি সংক্রান্ত সীমাবদ্ধতার জন্য ফর্মটি যাতে বিল্ট-ইন ব্রাউজার ফিচারের সর্বাধিক ব্যবহার করে তা নিশ্চিত করুন।
কীভাবে প্রয়োগ করতে হয়
ঠিকানা লেখার ফর্ম সফলভাবে তৈরি করার জন্য সবচেয়ে গুরুত্বপূর্ণ নির্দেশিকা নিচে উল্লেখ করা হল।
অর্থপূর্ণ, সঠিক HTML ব্যবহার করুন
ফর্ম তৈরি করার জন্য তৈরি করা এলিমেন্ট ও অ্যাট্রিবিউটের সবচেয়ে বেশি ব্যবহার করুন:
<form>,<input>,<label>ও<button>type,autocompleteওinputmode
এগুলি বিল্ট-ইন ব্রাউজার কার্যকারিতা চালু করে, অ্যাক্সেসিবিলিটি উন্নত করে এবং মার্কআপে অর্থ যোগ করে।
ডেটা এন্ট্রির জন্য ফর্ম ফিল্ড লেবেল করতে <label> এলিমেন্ট ব্যবহার করুন
<input>, <select> বা <textarea> লেবেল করতে, <label> ব্যবহার করুন। ইনপুটের id-এর মতো একই ভ্যালু লেবেলের for অ্যাট্রিবিউটকে দিয়ে ইনপুটের সাথে লেবেল যুক্ত করুন।
HTML অ্যাট্রিবিউটের সর্বাধিক সুবিধা নিন
মোবাইলে সঠিক কীবোর্ড প্রদান করতে এবং ব্রাউজারের মাধ্যমে প্রাথমিক বিল্ট-ইন যাচাইকরণ চালু করতে, উপযুক্ত <input> এলিমেন্ট <type> অ্যাট্রিবিউট ব্যবহার করে ব্যবহারকারীদের জন্য ডেটা এন্টার করা সহজ করুন।
ইমেল আইডির জন্য সবসময় type="email" এবং ফোন নম্বরের জন্য type="tel" ব্যবহার করুন।
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
অ্যাক্সেসিবিলিটি উন্নত করতে এবং ব্যবহারকারীদের ডেটা আবার লেখার ঝামেলা এড়াতে সাহায্য করার জন্য প্রতিটি <input>, <select> এবং <textarea> এলিমেন্টে উপযুক্ত autocomplete অ্যাট্রিবিউট থাকতে হবে।
বোতামগুলি সহায়ক করে তুলুন
বোতামের জন্য <button> ব্যবহার করুন। আপনি <input type="submit"> ব্যবহার করতে পারেন, তবে div বা বোতাম হিসেবে কাজ করে এমন অন্য কোনও র্যান্ডম এলিমেন্ট ব্যবহার করবেন না। বোতাম এলিমেন্ট অ্যাক্সেসযোগ্য আচরণ, বিল্ট-ইন ফর্ম জমা দেওয়ার কার্যকারিতা প্রদান করে এবং সহজেই স্টাইল করা যায়।
প্রতিটি ফর্ম জমা দেওয়ার বোতামে এমন একটি ভ্যালু দিন যা থেকে বোঝা যায় যে এটি কী করে। চেক-আউটের প্রতিটি ধাপের জন্য, একটি বর্ণনামূলক কল-টু-অ্যাকশন ব্যবহার করুন যা প্রোগ্রেস দেখায় এবং পরবর্তী ধাপটি স্পষ্ট করে তোলে। যেমন, আপনার ডেলিভারি পাওয়ার ঠিকানা সংক্রান্ত ফর্মে 'জমা দিন' বোতামে চালিয়ে যান বা সেভ করুন-এর পরিবর্তে পেমেন্ট করার জন্য এগিয়ে যান লেবেল দিন।
সম্ভব হলে নামের জন্য একটি ইনপুট ব্যবহার করুন
আপনার ব্যবহারকারীদের একটি ইনপুট ব্যবহার করে তাদের নাম লিখতে দিন, যদি না আপনার কাছে প্রদত্ত নাম, পারিবারিক নাম, সম্মানসূচক বা অন্যান্য নামের অংশ আলাদাভাবে স্টোর করার কোনও ভালো কারণ থাকে। একটি নাম ইনপুট ব্যবহার করলে ফর্ম কম জটিল হয়, কাট-অ্যান্ড-পেস্ট করা যায় এবং অটোফিল আরও সহজ হয়।
আন্তর্জাতিক নামের অনুমতি দিন। যাচাইকরণের জন্য, শুধুমাত্র ল্যাটিন অক্ষরের সাথে মেলে এমন রেগুলার এক্সপ্রেশন ব্যবহার করা এড়িয়ে চলুন। 'শুধুমাত্র ল্যাটিন' বিকল্পটি বেছে নিলে, যেসব ব্যবহারকারীর নাম বা ঠিকানায় ল্যাটিন বর্ণমালার অক্ষর নেই, তাদের বাদ দেওয়া হয়। পরিবর্তে ইউনিকোড অক্ষর ম্যাচ করার অনুমতি দিন—এবং আপনার ব্যাকএন্ড ইনপুট এবং আউটপুট উভয় হিসাবেই ইউনিকোডকে নিরাপদে সমর্থন করে কিনা তা নিশ্চিত করুন। আধুনিক ব্রাউজারে রেগুলার এক্সপ্রেশনে ইউনিকোড ভালভাবে কাজ করে।
বিভিন্ন ধরনের ঠিকানা ফর্ম্যাটের অনুমতি দিন
ঠিকানা লেখার ফর্ম তৈরি করার সময়, বিভিন্ন ধরনের ঠিকানা লেখার ফর্ম্যাট সম্পর্কে সচেতন থাকুন, এমনকি একটি দেশের মধ্যেও। "স্বাভাবিক" ঠিকানা সম্পর্কে অনুমান করবেন না।
সম্ভব হলে, রাস্তার ঠিকানার জন্য একটিই <textarea> এলিমেন্ট ব্যবহার করুন।
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
বিভিন্ন ধরনের স্থানীয় ও আন্তর্জাতিক ঠিকানার ফর্ম্যাটের জন্য এটি সবচেয়ে সুবিধাজনক বিকল্প।
আপনার ডেটা মডেলে আলাদা আলাদা ঠিকানার লাইন প্রয়োজন হলে, প্রতি লাইনে একটি করে <input> ব্যবহার করুন, সাথে address-line1, address-line2 (এবং, প্রয়োজন হলে, address-line3) autocomplete টোকেন ব্যবহার করুন যাতে অটোফিল এখনও কাজ করে। এইসব টোকেন নেই এমন ইনপুট জুড়ে রাস্তার ঠিকানা ভাগ করবেন না এবং শুধুমাত্র প্রথম লাইনটি বাধ্যতামূলক করুন।
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
ব্যবহারকারীদের ভুলবশত ডেটা ফিল্ড মিস করা থেকে বাঁচাতে সাহায্য করুন
বাধ্যতামূলক ফিল্ডে required অ্যাট্রিবিউট যোগ করুন।
<input type="text" id="city" name="city" autocomplete="address-level2" required>
ফলব্যাক স্ট্র্যাটেজি
অটোফিল হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে অটোফিল কাজ করে না, সেখানে ব্যবহারকারীকে ম্যানুয়ালি ঠিকানা লিখতে হবে। সিম্যান্টিক HTML কনস্ট্রেন্ট (যেমন type, inputmode এবং required) স্ট্যান্ডার্ড ফর্ম যাচাইকরণ হিসেবে এখনও যথাযথভাবে কাজ করবে।