ঠিকানা ফর্ম সেরা অনুশীলন কোডল্যাব

স্যাম ডাটন

আপনি কীভাবে একটি ফর্ম ডিজাইন করতে পারেন যা বিভিন্ন নাম এবং ঠিকানা ফর্ম্যাটের জন্য ভাল কাজ করে? ছোট আকারের সমস্যাগুলি ব্যবহারকারীদের বিরক্ত করে এবং তাদের আপনার সাইট ছেড়ে যেতে পারে বা ক্রয় বা সাইন-আপ সম্পূর্ণ করা ছেড়ে দিতে পারে।

এই কোডল্যাব আপনাকে দেখায় কিভাবে একটি সহজে ব্যবহারযোগ্য, অ্যাক্সেসযোগ্য ফর্ম তৈরি করতে হয় যা বেশিরভাগ ব্যবহারকারীদের জন্য ভাল কাজ করে।

ধাপ 1: এইচটিএমএল উপাদান এবং বৈশিষ্ট্যগুলি সর্বাধিক করুন৷

আপনি কোডল্যাবের এই অংশটি একটি খালি ফর্ম দিয়ে শুরু করবেন, শুধুমাত্র একটি শিরোনাম এবং একটি বোতাম তাদের নিজস্ব। তারপরে আপনি ইনপুট যোগ করা শুরু করবেন। (সিএসএস এবং কিছুটা জাভাস্ক্রিপ্ট ইতিমধ্যেই অন্তর্ভুক্ত করা হয়েছে।)

• প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

• নিম্নলিখিত কোড সহ আপনার <form> উপাদানটিতে একটি নাম ক্ষেত্র যুক্ত করুন:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

এটি শুধুমাত্র একটি নামের ক্ষেত্রের জন্য জটিল এবং পুনরাবৃত্তিমূলক মনে হতে পারে, কিন্তু এটি ইতিমধ্যে অনেক কিছু করে।

আপনি input name বা id সাথে অ্যাট্রিবিউটের for label সাথে মিল করে input সাথে label যুক্ত করেছেন। একটি লেবেলে ট্যাপ বা ক্লিক তার ইনপুটের দিকে ফোকাস নিয়ে যায়, যা নিজে থেকে ইনপুটের চেয়ে অনেক বড় লক্ষ্য তৈরি করে—যা আঙুল, থাম্বস এবং মাউস ক্লিকের জন্য ভালো! স্ক্রীনরিডাররা লেবেল পাঠ্য ঘোষণা করে যখন লেবেল বা লেবেলের ইনপুট ফোকাস পায়।

name="name" সম্পর্কে কি? এই ইনপুট থেকে ডেটার সাথে যুক্ত নাম (যা 'নাম' হতে পারে!) যা ফর্ম জমা দেওয়ার সময় সার্ভারে পাঠানো হয়। একটি name বৈশিষ্ট্য অন্তর্ভুক্ত করার মানে হল যে এই উপাদান থেকে ডেটা FormData API দ্বারা অ্যাক্সেস করা যেতে পারে।

ধাপ 2: ব্যবহারকারীদের ডেটা প্রবেশ করতে সহায়তা করার জন্য বৈশিষ্ট্য যোগ করুন

আপনি Chrome-এ Name ইনপুটে ট্যাপ করলে বা ক্লিক করলে কী হয়? আপনি স্বয়ংক্রিয়ভাবে পূরণের পরামর্শগুলি দেখতে পাবেন যা ব্রাউজার সংরক্ষণ করেছে এবং অনুমান করে যে এই ইনপুটটির জন্য উপযুক্ত, এর name এবং id মান দেওয়া হয়েছে৷

এখন আপনার ইনপুট কোডে autocomplete="name" যোগ করুন যাতে এটি এইরকম দেখায়:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

ক্রোমে পৃষ্ঠাটি পুনরায় লোড করুন এবং নাম ইনপুটে আলতো চাপুন বা ক্লিক করুন৷ আপনি কি পার্থক্য দেখতে?

আপনার একটি সূক্ষ্ম পরিবর্তন লক্ষ্য করা উচিত: autocomplete="name" এর সাথে, পরামর্শগুলি এখন নির্দিষ্ট মান যা পূর্বে ফর্ম ইনপুটগুলিতে ব্যবহৃত হত যেগুলি autocomplete="name" ও ছিল। ব্রাউজারটি কেবল অনুমান করছে না কি উপযুক্ত হতে পারে: আপনার নিয়ন্ত্রণ আছে। আপনি আপনার ব্রাউজার দ্বারা সংরক্ষিত নাম এবং ঠিকানাগুলি দেখতে এবং সম্পাদনা করতে পরিচালনা করুন… বিকল্পটিও দেখতে পাবেন৷

এখন সীমাবদ্ধতা যাচাইকরণ বৈশিষ্ট্য যোগ করুন maxlength , pattern এবং required যাতে আপনার ইনপুট কোডটি এইরকম দেখায়:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

• maxlength="100" মানে ব্রাউজার 100 অক্ষরের বেশি কোনো ইনপুটকে অনুমতি দেবে না।

• pattern="[\p{L} \-\.]+" একটি রেগুলার এক্সপ্রেশন ব্যবহার করে যা ইউনিকোড অক্ষর অক্ষর , হাইফেন এবং পিরিয়ড (ফুল স্টপ) অনুমোদন করে। এর মানে ফ্রাঙ্কোইজ বা জর্গের মতো নামগুলিকে 'অবৈধ' হিসাবে শ্রেণীবদ্ধ করা হয় না। এটি হয় না যদি আপনি মান ব্যবহার করেন \w যা [শুধুমাত্র ল্যাটিন বর্ণমালার অক্ষরগুলিকে অনুমতি দেয়।

• required মানে… প্রয়োজনীয়! ব্রাউজার এই ক্ষেত্রের ডেটা ছাড়া ফর্মটিকে জমা দেওয়ার অনুমতি দেবে না এবং আপনি যদি এটি জমা দেওয়ার চেষ্টা করেন তবে ইনপুটটিকে সতর্ক করবে এবং হাইলাইট করবে৷ কোন অতিরিক্ত কোড প্রয়োজন!

এই বৈশিষ্ট্যগুলির সাথে এবং ছাড়া ফর্মটি কীভাবে কাজ করে তা পরীক্ষা করতে, ডেটা প্রবেশ করার চেষ্টা করুন:

• pattern অ্যাট্রিবিউটের সাথে খাপ খায় না এমন মান প্রবেশ করার চেষ্টা করুন।
• একটি খালি ইনপুট দিয়ে ফর্ম জমা দেওয়ার চেষ্টা করুন। আপনি খালি প্রয়োজনীয় ক্ষেত্রের বিল্ট-ইন ব্রাউজার কার্যকারিতা সতর্কতা এবং এটিতে ফোকাস সেট করতে দেখতে পাবেন।

ধাপ 3: আপনার ফর্মে একটি নমনীয় ঠিকানা ক্ষেত্র যোগ করুন

একটি ঠিকানা ক্ষেত্র যোগ করতে, আপনার ফর্মে নিম্নলিখিত কোড যোগ করুন:

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

একটি textarea হল আপনার ব্যবহারকারীদের তাদের ঠিকানা লিখতে সবচেয়ে নমনীয় উপায়, এবং এটি কাটা এবং আটকানোর জন্য দুর্দান্ত।

আপনার ঠিকানা ফর্মটিকে রাস্তার নাম এবং নম্বরের মতো উপাদানগুলিতে বিভক্ত করা এড়ানো উচিত যদি না আপনার সত্যিই প্রয়োজন হয়। ব্যবহারকারীদের এমন ক্ষেত্রগুলিতে তাদের ঠিকানা ফিট করার চেষ্টা করতে বাধ্য করবেন না যা অর্থহীন।

এখন জিপ বা পোস্টাল কোড , এবং দেশ বা অঞ্চলের জন্য ক্ষেত্র যোগ করুন। সরলতার জন্য, শুধুমাত্র প্রথম পাঁচটি দেশ এখানে অন্তর্ভুক্ত করা হয়েছে। সম্পূর্ণ ঠিকানা ফর্মে একটি সম্পূর্ণ তালিকা অন্তর্ভুক্ত করা হয়েছে।

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

আপনি দেখতে পাবেন যে পোস্টাল কোড ঐচ্ছিক: কারণ অনেক দেশ পোস্টাল কোড ব্যবহার করে না । ( গ্লোবাল সোর্সবুক নমুনা ঠিকানা সহ 194টি বিভিন্ন দেশের ঠিকানা বিন্যাস সম্পর্কে তথ্য সরবরাহ করে।) দেশের পরিবর্তে দেশ বা অঞ্চল লেবেল ব্যবহার করা হয়, কারণ সম্পূর্ণ তালিকা থেকে কিছু বিকল্প (যেমন ইউনাইটেড কিংডম) একক দেশ নয় (যদিও autocomplete মান)।

ধাপ 4: গ্রাহকদের সহজে শিপিং এবং বিলিং ঠিকানা লিখতে সক্ষম করুন

আপনি একটি অত্যন্ত কার্যকরী ঠিকানা ফর্ম তৈরি করেছেন, কিন্তু যদি আপনার সাইটের একাধিক ঠিকানা প্রয়োজন হয়, যেমন শিপিং এবং বিলিং এর জন্য? গ্রাহকদের শিপিং এবং বিলিং ঠিকানা লিখতে সক্ষম করতে আপনার ফর্ম আপডেট করার চেষ্টা করুন৷ কিভাবে আপনি যত তাড়াতাড়ি সম্ভব ডেটা এন্ট্রি করতে পারেন, বিশেষ করে যদি দুটি ঠিকানা একই হয়? এই কোডল্যাবের সাথে যাওয়া নিবন্ধটি একাধিক ঠিকানা পরিচালনার কৌশল ব্যাখ্যা করে। আপনি যাই করুন না কেন, সঠিক autocomplete মান ব্যবহার নিশ্চিত করুন!

ধাপ 5: একটি টেলিফোন নম্বর ক্ষেত্র যোগ করুন

একটি টেলিফোন নম্বর ইনপুট যোগ করতে, ফর্মে নিম্নলিখিত কোড যোগ করুন:

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

ফোন নম্বরগুলির জন্য একটি একক ইনপুট ব্যবহার করুন: নম্বরটিকে অংশে বিভক্ত করবেন না৷ এটি ব্যবহারকারীদের জন্য ডেটা প্রবেশ করা বা অনুলিপি এবং আটকানো সহজ করে তোলে, বৈধতাকে সহজ করে তোলে এবং ব্রাউজারগুলিকে স্বয়ংক্রিয়ভাবে পূরণ করতে সক্ষম করে৷

দুটি বৈশিষ্ট্য রয়েছে যা একটি টেলিফোন নম্বর প্রবেশের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারে:

• type="tel" নিশ্চিত করে যে মোবাইল ব্যবহারকারীরা সঠিক কীবোর্ড পান।
• enterkeyhint="done" মোবাইল কীবোর্ড এন্টার কী লেবেল সেট করে দেখায় যে এটিই শেষ ক্ষেত্র এবং ফর্মটি এখন জমা দেওয়া যেতে পারে (ডিফল্টটি next )।

আপনার সম্পূর্ণ ঠিকানা ফর্ম এখন এই মত হওয়া উচিত:

• বিভিন্ন ডিভাইসে আপনার ফর্ম চেষ্টা করুন. আপনি কোন ডিভাইস এবং ব্রাউজার টার্গেট করছেন? কিভাবে ফর্ম উন্নত করা যেতে পারে?

বিভিন্ন ডিভাইসে আপনার ফর্ম পরীক্ষা করার বিভিন্ন উপায় আছে:

• মোবাইল ডিভাইস অনুকরণ করতে Chrome DevTools ডিভাইস মোড ব্যবহার করুন ।
• আপনার কম্পিউটার থেকে আপনার ফোনে URL পাঠান ।
• বিভিন্ন ডিভাইস এবং ব্রাউজারে পরীক্ষা করার জন্য ব্রাউজারস্ট্যাকের মতো একটি পরিষেবা ব্যবহার করুন।

সামনে যাচ্ছি

• অ্যানালিটিক্স এবং রিয়েল ইউজার মনিটরিং : আপনার ফর্ম ডিজাইনের কার্যকারিতা এবং ব্যবহারযোগ্যতাকে প্রকৃত ব্যবহারকারীদের জন্য পরীক্ষা ও নিরীক্ষণ করতে এবং পরিবর্তনগুলি সফল কিনা তা পরীক্ষা করতে সক্ষম করুন। আপনার লোড পারফরম্যান্স এবং অন্যান্য ওয়েব ভাইটাল , সেইসাথে পৃষ্ঠা বিশ্লেষণ (ব্যবহারকারীদের কত অনুপাত আপনার ঠিকানা ফর্মটি সম্পূর্ণ না করে বাউন্স করে? ব্যবহারকারীরা আপনার ঠিকানা ফর্ম পৃষ্ঠাগুলিতে কতক্ষণ ব্যয় করে?) এবং ইন্টারঅ্যাকশন বিশ্লেষণ (কোন পৃষ্ঠার উপাদানগুলি ব্যবহারকারীরা করে) নিরীক্ষণ করা উচিত সাথে যোগাযোগ, নাকি না?)

• আপনার ব্যবহারকারীরা কোথায় অবস্থিত? কিভাবে তারা তাদের ঠিকানা ফর্ম্যাট করবেন? ঠিকানার উপাদানগুলির জন্য তারা কোন নাম ব্যবহার করে, যেমন জিপ বা পোস্টাল কোড? পোস্টাল অ্যাড্রেসের জন্য ফ্র্যাঙ্কের বাধ্যতামূলক নির্দেশিকা 200 টিরও বেশি দেশে দরকারী লিঙ্ক এবং বিস্তৃত নির্দেশিকা ঠিকানার বিশদ বিবরণ প্রদান করে।

• দেশের নির্বাচকরা দুর্বল ব্যবহারের জন্য কুখ্যাত। আইটেমগুলির একটি দীর্ঘ তালিকার জন্য নির্বাচিত উপাদানগুলি এড়ানো ভাল এবং ISO 3166 কান্ট্রি-কোড স্ট্যান্ডার্ড বর্তমানে 249টি দেশকে তালিকাভুক্ত করে ! একটি <select> এর পরিবর্তে আপনি একটি বিকল্প বিবেচনা করতে চাইতে পারেন যেমন Baymard Institute কান্ট্রি সিলেক্টর ।

  আপনি অনেক আইটেম সহ তালিকার জন্য একটি ভাল নির্বাচক ডিজাইন করতে পারেন? আপনি কীভাবে নিশ্চিত করবেন যে আপনার ডিজাইন বিভিন্ন ডিভাইস এবং প্ল্যাটফর্ম জুড়ে অ্যাক্সেসযোগ্য? ( <select> উপাদানটি প্রচুর সংখ্যক আইটেমের জন্য ভাল কাজ করে না, তবে অন্তত এটি কার্যত সমস্ত ব্রাউজার এবং সহায়ক ডিভাইসে ব্যবহারযোগ্য!)

  ব্লগ পোস্ট <input type="country" /> একটি দেশ নির্বাচককে মানসম্মত করার জটিলতা নিয়ে আলোচনা করে। দেশের নামের স্থানীয়করণও সমস্যাযুক্ত হতে পারে। দেশের তালিকায় একাধিক ভাষায়, একাধিক ফর্ম্যাটে দেশের কোড এবং নাম ডাউনলোড করার জন্য একটি টুল রয়েছে।