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

স্যাম ডাটন

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

ধাপ 1: উদ্দেশ্য হিসাবে HTML ব্যবহার করুন

কাজের জন্য নির্মিত উপাদান ব্যবহার করুন:

• <form>
• <section>
• <label>
• <input> , <select> , <textarea>
• <button>

আপনি দেখতে পাবেন, এই উপাদানগুলি অন্তর্নির্মিত ব্রাউজার কার্যকারিতা সক্ষম করে, অ্যাক্সেসযোগ্যতা উন্নত করে এবং আপনার মার্কআপে অর্থ যোগ করে।

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

index.html এ আপনার ফর্মের জন্য HTML দেখুন।

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

কার্ড নম্বর, কার্ডে নাম, মেয়াদ শেষ হওয়ার তারিখ এবং নিরাপত্তা কোডের জন্য <input> উপাদান রয়েছে। এগুলি সবই <section> উপাদানে মোড়ানো, এবং প্রত্যেকটির একটি লেবেল রয়েছে। সম্পূর্ণ অর্থপ্রদান বোতামটি একটি HTML <button> । পরে এই কোডল্যাবে আপনি এই উপাদানগুলি ব্যবহার করে অ্যাক্সেস করতে পারেন এমন ব্রাউজার বৈশিষ্ট্যগুলি সম্পর্কে শিখবেন।

আপনার পেমেন্ট ফর্মের পূর্বরূপ দেখতে অ্যাপ দেখুন ক্লিক করুন।

• ফর্মটি কি যথেষ্ট ভাল কাজ করে?
• এটি আরও ভাল কাজ করার জন্য আপনি কি কিছু পরিবর্তন করবেন?
• মোবাইলে কেমন হয়?

আপনার সোর্স কোডে ফিরে যেতে উৎস দেখুন ক্লিক করুন।

ধাপ 2: মোবাইল এবং ডেস্কটপের জন্য ডিজাইন

আপনার যোগ করা HTML বৈধ, কিন্তু ডিফল্ট ব্রাউজার স্টাইলিং ফর্মটিকে ব্যবহার করা কঠিন করে তোলে, বিশেষ করে মোবাইলে। এটা খুব ভাল দেখায় না.

প্যাডিং, মার্জিন এবং ফন্টের আকার সামঞ্জস্য করে আপনার ফর্মগুলি বিভিন্ন ডিভাইসে ভালভাবে কাজ করছে তা নিশ্চিত করতে হবে।

নীচের সমস্ত CSS কপি করুন এবং আপনার নিজস্ব css/main.css ফাইলে পেস্ট করুন।

যে অনেক CSS! মাপের পরিবর্তনগুলি সম্পর্কে সচেতন হওয়া প্রধান বিষয়গুলি হল:

• padding এবং margin ইনপুট যোগ করা হয়.
• font-size এবং অন্যান্য মান বিভিন্ন ভিউপোর্ট আকারের জন্য ভিন্ন।

আপনি প্রস্তুত হলে, স্টাইল করা ফর্ম দেখতে অ্যাপ দেখুন ক্লিক করুন। আপনি আরও লক্ষ্য করবেন যে সীমানাগুলি সামঞ্জস্য করা হয়েছে এবং display: block; লেবেলগুলির জন্য ব্যবহার করা হয় যাতে তারা নিজেরাই একটি লাইনে চলে যায় এবং ইনপুটগুলি সম্পূর্ণ প্রস্থের হতে পারে। সাইন-ইন ফর্মের সর্বোত্তম অনুশীলনগুলি এই পদ্ধতির সুবিধাগুলি আরও বিশদে ব্যাখ্যা করে৷

একটি ইনপুট একটি অবৈধ মান আছে যখন নির্দেশ করতে :invalid নির্বাচক ব্যবহার করা হয়. (আপনি এটি পরে কোডল্যাবে ব্যবহার করবেন।)

CSS হল মোবাইল-প্রথম:

• ডিফল্ট CSS হল 400px চওড়ার কম ভিউপোর্টের জন্য।
• মিডিয়া ক্যোয়ারীগুলি কমপক্ষে 400px প্রশস্ত ভিউপোর্টগুলির জন্য ডিফল্ট ওভাররাইড করতে এবং তারপরে আবার কমপক্ষে 500px প্রশস্ত ভিউপোর্টগুলির জন্য ব্যবহার করা হয়৷ এটি ছোট ফোন, বড় স্ক্রীন সহ মোবাইল ডিভাইস এবং ডেস্কটপে ভাল কাজ করা উচিত।

যখনই আপনি ওয়েবের জন্য তৈরি করেন, আপনাকে বিভিন্ন ডিভাইস এবং ভিউপোর্ট আকারে পরীক্ষা করতে হবে। এটি ফর্মগুলির জন্য বিশেষভাবে সত্য, কারণ একটি ছোট ত্রুটি তাদের অব্যবহারযোগ্য করে তুলতে পারে। আপনার বিষয়বস্তু এবং আপনার টার্গেট ডিভাইসগুলির সাথে ভালভাবে কাজ করে তা নিশ্চিত করতে আপনার সর্বদা CSS ব্রেকপয়েন্টগুলি সামঞ্জস্য করা উচিত।

• পুরো রূপ কি দৃশ্যমান?
• ফর্ম ইনপুট যথেষ্ট বড়?
• সব লেখা পঠনযোগ্য?
• আপনি কি সত্যিকারের মোবাইল ডিভাইস ব্যবহার করা এবং Chrome DevTools-এ ডিভাইস মোডে ফর্ম দেখার মধ্যে কোনো পার্থক্য লক্ষ্য করেছেন?
• আপনার কি ব্রেকপয়েন্ট সামঞ্জস্য করার দরকার ছিল?

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

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

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

ইনপুট মান সঞ্চয় এবং স্বয়ংক্রিয়ভাবে পূরণ করতে ব্রাউজারটিকে সক্ষম করুন এবং সুরক্ষিত অন্তর্নির্মিত অর্থ প্রদান এবং বৈধতা বৈশিষ্ট্যগুলিতে অ্যাক্সেস সরবরাহ করুন৷

আপনার index.html ফাইলের ফর্মটিতে বৈশিষ্ট্যগুলি যোগ করুন যাতে এটি এইরকম দেখায়:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

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

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

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

একবার আপনি একটি অর্থপ্রদানের পদ্ধতি নির্বাচন করে আপনার নিরাপত্তা কোড লিখলে, ব্রাউজারটি আপনার ফর্মে যোগ করা পেমেন্ট কার্ড autocomplete মানগুলি ব্যবহার করে ফর্মটি স্বয়ংক্রিয়ভাবে পূরণ করে:

• cc-number
• cc-name
• cc-exp
• cc-csc

অনেক ব্রাউজার ক্রেডিট কার্ড নম্বর এবং নিরাপত্তা কোডের বৈধতা পরীক্ষা করে এবং নিশ্চিত করে।

একটি মোবাইল ডিভাইসে আপনি লক্ষ্য করবেন যে আপনি কার্ড নম্বর ক্ষেত্রে ট্যাপ করার সাথে সাথে আপনি একটি সংখ্যাসূচক কীবোর্ড পাবেন। কারণ আপনি inputmode="numeric" ব্যবহার করেছেন। সাংখ্যিক ক্ষেত্রগুলির জন্য এটি সংখ্যাগুলি প্রবেশ করা সহজ করে এবং অ-সংখ্যাসূচক অক্ষরগুলি প্রবেশ করা অসম্ভব করে এবং ব্যবহারকারীদের তারা যে ধরণের ডেটা প্রবেশ করছে তা মনে রাখতে ধাক্কা দেয়৷

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

একটি খালি ফিল্ড সহ পেমেন্ট ফর্ম জমা দেওয়ার চেষ্টা করুন। ব্রাউজার অনুপস্থিত ডেটা সম্পূর্ণ করতে অনুরোধ করে। এখন কার্ড নম্বর ক্ষেত্রের মানটিতে একটি অক্ষর যোগ করুন এবং ফর্মটি জমা দেওয়ার চেষ্টা করুন। ব্রাউজার সতর্ক করে যে মানটি অবৈধ। এটি ঘটে কারণ আপনি একটি ক্ষেত্রের জন্য বৈধ মান নির্দিষ্ট করতে pattern বৈশিষ্ট্য ব্যবহার করেছেন। maxlength এবং অন্যান্য বৈধতা সীমাবদ্ধতার জন্য একই কাজ করে কোন জাভাস্ক্রিপ্টের প্রয়োজন নেই।

আপনার অর্থপ্রদানের ফর্ম এখন এটি দেখতে হবে:

• autocomplete মানগুলি সরানোর চেষ্টা করুন এবং অর্থপ্রদানের ফর্মটি পূরণ করুন৷ আপনি কি অসুবিধা সম্মুখীন?
• অনলাইন স্টোরগুলিতে অর্থপ্রদানের ফর্মগুলি ব্যবহার করে দেখুন। কি ভাল কাজ করে এবং কি ভুল হয় বিবেচনা করুন. আপনার অনুসরণ করা উচিত কোন সাধারণ সমস্যা বা সেরা অনুশীলন আছে?

ধাপ 4: একবার ফর্ম জমা দেওয়ার পরে পেমেন্ট বোতামটি অক্ষম করুন

ব্যবহারকারী একবার ট্যাপ বা ক্লিক করার পরে একটি জমা বোতামটি নিষ্ক্রিয় করার বিষয়ে আপনার বিবেচনা করা উচিত—বিশেষ করে যখন ব্যবহারকারী অর্থপ্রদান করছেন। অনেক ব্যবহারকারী বারবার বোতামে ট্যাপ বা ক্লিক করেন , এমনকি তারা ঠিকঠাক কাজ করলেও। এটি অর্থপ্রদান প্রক্রিয়াকরণে সমস্যা সৃষ্টি করতে পারে এবং সার্ভার লোড যোগ করতে পারে।

আপনার js/main.js ফাইলে নিম্নলিখিত জাভাস্ক্রিপ্ট যোগ করুন:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

পেমেন্ট ফর্ম জমা দেওয়ার চেষ্টা করুন এবং দেখুন কি হয়।

কিছু মন্তব্য এবং একটি validate() ফাংশন যোগ করার সাথে আপনার কোডটি এই পয়েন্টে কীভাবে দেখা উচিত তা এখানে রয়েছে:

• আপনি লক্ষ্য করবেন যে জাভাস্ক্রিপ্ট ডেটা যাচাইকরণের জন্য মন্তব্য-আউট কোড অন্তর্ভুক্ত করে। এই কোডটি কাস্টম বৈধতা যোগ করতে সীমাবদ্ধতা যাচাইকরণ API (যা ব্যাপকভাবে সমর্থিত ) ব্যবহার করে, ফোকাস সেট করতে এবং প্রম্পট প্রদর্শন করতে বিল্ট-ইন ব্রাউজার UI অ্যাক্সেস করে। কোডটি আন-কমেন্ট করুন এবং এটি চেষ্টা করুন। আপনাকে someregex এবং message জন্য উপযুক্ত মান সেট করতে হবে এবং someField এর জন্য একটি মান সেট করতে হবে।

• আপনার ফর্মগুলিকে উন্নত করার উপায়গুলি সনাক্ত করার জন্য আপনি কোন বিশ্লেষণ এবং বাস্তব ব্যবহারকারী মনিটরিং ডেটা নিরীক্ষণ করবেন?

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

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

সামনে যাচ্ছি

নিম্নলিখিত গুরুত্বপূর্ণ ফর্ম বৈশিষ্ট্যগুলি বিবেচনা করুন যা এই কোডল্যাবে আচ্ছাদিত নয়:

• আপনার পরিষেবার শর্তাবলী এবং গোপনীয়তা নীতির নথিগুলির সাথে লিঙ্ক করুন: আপনি কীভাবে তাদের ডেটা সুরক্ষিত করেন তা ব্যবহারকারীদের কাছে পরিষ্কার করুন৷

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

• অ্যানালিটিক্স এবং রিয়েল ইউজার মনিটরিং : আপনার ফর্ম ডিজাইনের কার্যকারিতা এবং ব্যবহারযোগ্যতা প্রকৃত ব্যবহারকারীদের জন্য পরীক্ষা এবং নিরীক্ষণ করতে সক্ষম করুন।