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

স্যাম ডাটন

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

ধাপ ১: উদ্দেশ্য অনুযায়ী HTML ব্যবহার করুন

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

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

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

  • প্রকল্পটি সম্পাদনাযোগ্য করতে Remix to Edit এ ক্লিক করুন।

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> । পরে এই কোডল্যাবে আপনি এই উপাদানগুলি ব্যবহার করে ব্রাউজার বৈশিষ্ট্যগুলি সম্পর্কে জানতে পারবেন।

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

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

আপনার সোর্স কোডে ফিরে যেতে View Source এ ক্লিক করুন।

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

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

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

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

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

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

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

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

সিএসএস মোবাইল-প্রথম:

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

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

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

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

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

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

আপনার 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>

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

একটি অ্যান্ড্রয়েড ফোনে Chrome-এ একটি পেমেন্ট ফর্মের দুটি স্ক্রিনশট। একটিতে অন্তর্নির্মিত ব্রাউজার পেমেন্ট কার্ড নির্বাচক দেখানো হয়েছে; অন্যটিতে প্লেসহোল্ডার স্বয়ংক্রিয়ভাবে পূরণ করা মান দেখানো হয়েছে।
অন্তর্নির্মিত ব্রাউজার পেমেন্ট চয়নকারী এবং অটোফিল।

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

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

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

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

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

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

আপনার পেমেন্ট ফর্মটি এখন এইরকম দেখাবে:

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

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

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

আপনার 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() ফাংশন যোগ করে:

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

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

আপনার সম্পূর্ণ পেমেন্ট ফর্মটি এখন এইরকম দেখাবে:

আরও এগিয়ে যান

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

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

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

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