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

Sam Dutton

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

১. অর্থপূর্ণ HTML ব্যবহার করুন

অন্তর্নির্মিত ব্রাউজার বৈশিষ্ট্যগুলি সর্বাধিক ব্যবহার করতে ফর্ম উপাদানগুলি কীভাবে ব্যবহার করবেন তা শিখুন।

একটি নতুন কলম তৈরি করুন ।

নিচের কোডটি কপি করে HTML এডিটরে পেস্ট করুন।

<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>

HTML ফর্মটি দেখতে লাইভ প্রিভিউতে ক্লিক করুন। নাম, ইমেল এবং পাসওয়ার্ডের জন্য ইনপুট রয়েছে। এই ফর্মটি শুধুমাত্র ডিফল্ট ব্রাউজার CSS ব্যবহার করে।

প্রতিটি ইনপুট একটি বিভাগে থাকে এবং প্রতিটিতে একটি লেবেল থাকে। সাইনআপ বোতামটি, গুরুত্বপূর্ণভাবে, একটি <button> । পরে এই কোডল্যাবে, আপনি এই সমস্ত উপাদানগুলির বিশেষ ক্ষমতাগুলি শিখবেন।

নিজের মতো করে নিম্নলিখিত প্রশ্নগুলি করুন:

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

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

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

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

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

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

২. ফর্মটি আরও ভালোভাবে কাজ করতে CSS যোগ করুন

HTML-এ এখন পর্যন্ত কোনও সমস্যা নেই, তবে আপনাকে নিশ্চিত করতে হবে যে আপনার ফর্মটি মোবাইল এবং ডেস্কটপের বিভিন্ন ব্যবহারকারীর উপর ভালভাবে কাজ করে।

এই ধাপে, ফর্মটি ব্যবহার করা সহজ করার জন্য আপনি CSS যোগ করবেন। এই CSS টি কপি করে css/main.css ফাইলে পেস্ট করুন।

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

এই CSS কি বিভিন্ন ব্রাউজার এবং স্ক্রিন আকারের জন্য কাজ করে?

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

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

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

আপনার 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 এর সাথে মেলে। অন্যান্য লেবেল এবং ইনপুট একইভাবে কাজ করে। লেবেল (অথবা লেবেলের সংশ্লিষ্ট ইনপুট) ফোকাস পেলে স্ক্রিন রিডাররাও লেবেল টেক্সট ঘোষণা করে।

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

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

ফুল নেম ইনপুটের জন্য autocomplete ভ্যালু name ব্যবহার করা যুক্তিসঙ্গত, কিন্তু অন্যান্য ইনপুট সম্পর্কে কী বলা যায়?

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

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

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

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

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

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

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

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

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

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

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

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

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