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

স্যাম ডাটন

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

ধাপ 1: অর্থপূর্ণ HTML ব্যবহার করুন

এই ধাপে আপনি শিখবেন কিভাবে বিল্ট-ইন ব্রাউজার বৈশিষ্ট্যগুলি সবচেয়ে বেশি করতে ফর্ম উপাদানগুলি ব্যবহার করতে হয়৷

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

index.html এ আপনার ফর্মের জন্য HTML দেখুন। আপনি নাম, ইমেল এবং পাসওয়ার্ডের জন্য ইনপুট দেখতে পাবেন। প্রতিটি একটি বিভাগে, এবং প্রতিটি একটি লেবেল আছে. সাইন আপ বোতামটি হল… একটি <button> ! পরে এই কোডল্যাবে, আপনি এই সমস্ত উপাদানের বিশেষ ক্ষমতা শিখবেন।

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

আপনার সাইন-আপ ফর্মের পূর্বরূপ দেখতে অ্যাপ দেখুন ক্লিক করুন। এটি আপনাকে দেখায় যে ডিফল্ট ব্রাউজার শৈলী ব্যতীত অন্য কোন সিএসএস ছাড়া ফর্মটি কেমন দেখায়।

  • ডিফল্ট শৈলী ঠিক দেখায় ? ফর্মটিকে আরও ভাল দেখাতে আপনি কী পরিবর্তন করবেন?
  • ডিফল্ট শৈলী ঠিক কাজ করে ? আপনার ফর্ম ব্যবহার করে কি কি সমস্যার সম্মুখীন হতে পারে? মোবাইলে কি? স্ক্রিনরিডার বা অন্যান্য সহায়ক প্রযুক্তির জন্য কি?
  • আপনার ব্যবহারকারী কারা এবং আপনি কোন ডিভাইস এবং ব্রাউজারকে লক্ষ্য করছেন?

আপনার ফর্ম পরীক্ষা করুন

আপনি অনেক হার্ডওয়্যার অর্জন করতে পারেন এবং একটি ডিভাইস ল্যাব সেট আপ করতে পারেন, তবে বিভিন্ন ব্রাউজার, প্ল্যাটফর্ম এবং ডিভাইসে আপনার ফর্মটি চেষ্টা করার জন্য সস্তা এবং সহজ উপায় রয়েছে:

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

  • Chrome DevTools ডিভাইস মোড ব্যবহার করে বিভিন্ন ডিভাইসে আপনার ফর্ম ব্যবহার করে দেখুন।
  • এখন একটি ফোন বা অন্যান্য বাস্তব ডিভাইসে ফর্ম খুলুন. আপনি কি পার্থক্য দেখতে?

ধাপ 2: ফর্মটি আরও ভালভাবে কাজ করতে CSS যোগ করুন

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

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

এই ধাপে আপনি ফর্মটিকে সহজে ব্যবহার করতে CSS যোগ করবেন।

css/main.css ফাইলে নিম্নলিখিত সমস্ত CSS কপি এবং পেস্ট করুন:

আপনার স্টাইল করা সাইন-আপ ফর্ম দেখতে অ্যাপ দেখুন ক্লিক করুন। তারপর css/main.css এ ফিরে যেতে উৎস দেখুন ক্লিক করুন।

  • এই CSS বিভিন্ন ব্রাউজার এবং স্ক্রীন মাপের জন্য কাজ করে?

  • আপনার পরীক্ষা ডিভাইসের জন্য padding , margin এবং font-size সামঞ্জস্য করার চেষ্টা করুন।

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

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

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

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

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type মানগুলি অনেক কিছু করে: * type="password" লেখার সাথে সাথে এটিকে অস্পষ্ট করে এবং ব্রাউজারের পাসওয়ার্ড ম্যানেজারকে একটি শক্তিশালী পাসওয়ার্ড প্রস্তাব করতে সক্ষম করে। * type="email" মৌলিক বৈধতা প্রদান করে এবং মোবাইল ব্যবহারকারীরা একটি উপযুক্ত কীবোর্ড পান তা নিশ্চিত করে। এটা চেষ্টা করে দেখুন!

দেখুন অ্যাপে ক্লিক করুন এবং তারপরে ইমেল লেবেলে ক্লিক করুন। কি হয়? ফোকাস ইমেল ইনপুটে চলে যায় কারণ লেবেলের একটি for রয়েছে যা ইমেল ইনপুটের id সাথে মেলে। অন্যান্য লেবেল এবং ইনপুট একই ভাবে কাজ করে। যখন লেবেল (বা লেবেলের সংশ্লিষ্ট ইনপুট) ফোকাস পায় তখন স্ক্রীনরিডাররাও লেবেল পাঠ্য ঘোষণা করে। আপনি ChromeVox এক্সটেনশন ব্যবহার করে এটি চেষ্টা করতে পারেন।

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

সম্পূর্ণ নাম ইনপুটের জন্য autocomplete মান name ব্যবহার করা অর্থপূর্ণ, কিন্তু অন্যান্য ইনপুট সম্পর্কে কি? * ইমেল ইনপুটের জন্য autocomplete="username" মানে ব্রাউজারের পাসওয়ার্ড ম্যানেজার এই ব্যবহারকারীর (ব্যবহারকারীর নাম!) পাসওয়ার্ডের সাথে যেতে ইমেল ঠিকানাটিকে 'নাম' হিসাবে সংরক্ষণ করবে৷ * পাসওয়ার্ডের জন্য autocomplete="new-password" হল পাসওয়ার্ড ম্যানেজারকে একটি ইঙ্গিত যে এটি এই মানটিকে বর্তমান সাইটের জন্য পাসওয়ার্ড হিসাবে সংরক্ষণ করার প্রস্তাব দেবে। তারপর আপনি একটি সাইন-ইন ফর্মে অটোফিল সক্ষম করতে autocomplete="current-password" ব্যবহার করতে পারেন (মনে রাখবেন, এটি সাইন-আপ ফর্ম)।

ধাপ 4: ব্যবহারকারীদের নিরাপদ পাসওয়ার্ড লিখতে সাহায্য করুন

ফর্মটি যেমন আছে, আপনি কি পাসওয়ার্ড ইনপুটে কিছু ভুল লক্ষ্য করেছেন?

দুটি সমস্যা আছে: * পাসওয়ার্ড মানতে সীমাবদ্ধতা আছে কিনা তা জানার কোন উপায় নেই। * আপনি পাসওয়ার্ডটি ঠিক পেয়েছেন কিনা তা পরীক্ষা করতে আপনি দেখতে পাচ্ছেন না।

ব্যবহারকারীদের অনুমান করবেন না!

নিম্নলিখিত কোড দিয়ে index.html এর পাসওয়ার্ড বিভাগ আপডেট করুন:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

ব্যবহারকারীদের পাসওয়ার্ড লিখতে সাহায্য করার জন্য এটি নতুন বৈশিষ্ট্য যুক্ত করে:

  • পাসওয়ার্ড প্রদর্শন টগল করার জন্য একটি বোতাম (আসলে শুধু পাঠ্য)। (জাভাস্ক্রিপ্টের সাথে বোতামের কার্যকারিতা যোগ করা হবে।)
  • পাসওয়ার্ড-টগল বোতামের জন্য একটি aria-label বৈশিষ্ট্য।
  • পাসওয়ার্ড ইনপুটের জন্য অ্যাট্রিবিউট aria-describedby একটি অ্যাট্রিবিউট। স্ক্রিনরিডাররা লেবেল পাঠ্য, ইনপুট প্রকার (পাসওয়ার্ড) এবং তারপর বিবরণ পড়ে।

পাসওয়ার্ড-টগল বোতাম সক্রিয় করতে এবং পাসওয়ার্ড সীমাবদ্ধতা সম্পর্কে ব্যবহারকারীদের তথ্য দেখাতে, নীচের সমস্ত জাভাস্ক্রিপ্ট অনুলিপি করুন এবং আপনার নিজস্ব js/main.js ফাইলে পেস্ট করুন৷

(সিএসএস ইতিমধ্যেই ২য় ধাপে রয়েছে। পাসওয়ার্ড-টগল বোতামটি কীভাবে স্টাইল করা হয়েছে এবং অবস্থান করা হয়েছে তা দেখতে দেখুন।)

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

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

এই বিন্দুতে আপনার ফর্মটি কেমন হওয়া উচিত তা এখানে:

আরও এগিয়ে যাচ্ছে

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

  • আপস করা পাসওয়ার্ড পরীক্ষা করা হচ্ছে। আপস করা হয়েছে এমন পাসওয়ার্ডগুলিকে আপনার কখনই অনুমতি দেওয়া উচিত নয়। আপস করা পাসওয়ার্ডগুলি ধরতে আপনি একটি পাসওয়ার্ড-চেকিং পরিষেবা ব্যবহার করতে পারেন (এবং উচিত)৷ আপনি একটি বিদ্যমান পরিষেবা ব্যবহার করতে পারেন বা নিজের সার্ভারে নিজেই চালাতে পারেন৷ এটা চেষ্টা করে দেখুন! আপনার ফর্মে পাসওয়ার্ড চেকিং যোগ করুন।

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

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

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