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

স্যাম ডাটন

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

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

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

  • <form>
  • <section>
  • <label>
  • <button>

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

  1. প্রকল্পটি সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন।

  2. <body> উপাদানে নিম্নলিখিত কোড যোগ করুন:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    এই পয়েন্টে আপনার index.html ফাইলটি কেমন হওয়া উচিত তা এখানে:

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

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

2. আঙ্গুল এবং থাম্ব জন্য ডিজাইন

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

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

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

  3. আপনার style.css ফাইলে ফিরে যেতে উৎস দেখুন ক্লিক করুন।

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

  • padding এবং margin ইনপুট যোগ করা হয়.
  • মোবাইল এবং ডেস্কটপের জন্য font-size আলাদা।

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

CSS লেআউট হল মোবাইল-প্রথম:

  • ডিফল্ট CSS হল 450 পিক্সেলের কম চওড়া ভিউপোর্টের জন্য।
  • মিডিয়া ক্যোয়ারী বিভাগটি অন্তত 450 পিক্সেল প্রশস্ত ভিউপোর্টের জন্য ওভাররাইড সেট করে।

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

  • লেবেল এবং ইনপুট পাঠ্য কি পঠনযোগ্য, বিশেষত কম দৃষ্টিসম্পন্ন লোকেদের জন্য?
  • ইনপুট এবং সাইন ইন বোতামগুলি কি থাম্বসের জন্য স্পর্শ লক্ষ্য হিসাবে ব্যবহার করার জন্য যথেষ্ট বড়?

3. অন্তর্নির্মিত ব্রাউজার বৈশিষ্ট্য সক্রিয় করতে ইনপুট বৈশিষ্ট্য যোগ করুন

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

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

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. আপনার অ্যাপটি আবার দেখুন এবং তারপরে ইমেল এ ক্লিক করুন।

    লক্ষ্য করুন কিভাবে ফোকাস ইমেল ইনপুটে চলে যায়। এর কারণ হল লেবেলটি for="email" অ্যাট্রিবিউটের মাধ্যমে ইনপুটের সাথে যুক্ত। যখন লেবেল বা লেবেলের সংশ্লিষ্ট ইনপুট ফোকাস পায় তখন স্ক্রীনরিডাররাও লেবেল পাঠ্য ঘোষণা করে।

  3. একটি মোবাইল ডিভাইসে ইমেল ইনপুট ফোকাস করুন।

    একটি ইমেল ঠিকানা টাইপ করার জন্য কীবোর্ডটি কীভাবে অপ্টিমাইজ করা হয়েছে তা লক্ষ্য করুন। উদাহরণস্বরূপ, @ এবং . প্রাথমিক কীবোর্ডে অক্ষরগুলি দেখানো হতে পারে এবং অপারেটিং সিস্টেম কীবোর্ডের উপরে সংরক্ষিত ইমেলগুলি দেখাতে পারে। এই সব ঘটে কারণ type="email" অ্যাট্রিবিউটটি একটি <input> উপাদানে প্রয়োগ করা হয়।

    iOS-এ ডিফল্ট ইমেল কীবোর্ড।

  4. পাসওয়ার্ড ইনপুটে কিছু পাঠ্য টাইপ করুন।

    পাঠ্যটি ডিফল্টরূপে লুকানো থাকে কারণ উপাদানটিতে type="password" বৈশিষ্ট্য প্রয়োগ করা হয়েছে।

  • autocomplete , name , id , এবং type বৈশিষ্ট্যগুলি ব্রাউজারগুলিকে ইনপুটগুলির ভূমিকা বুঝতে সাহায্য করে যাতে ডেটা সঞ্চয় করা যায় যা অটোফিলের জন্য পরে ব্যবহার করা যেতে পারে৷
  1. একটি ডেস্কটপ ডিভাইসে ইমেল ইনপুট ফোকাস করুন এবং কিছু পাঠ্য টাইপ করুন। আপনি ফুলস্ক্রিন ক্লিক করলে আপনি আপনার অ্যাপের URL দেখতে পাবেনফুলস্ক্রিন আইকন . আপনি যদি আপনার ব্রাউজারে কোনো ইমেল ঠিকানা সংরক্ষণ করেন, তাহলে আপনি সম্ভবত একটি ডায়ালগ দেখতে পাবেন যা আপনাকে সেই সঞ্চিত ইমেলগুলি থেকে নির্বাচন করতে দেয়৷ এটি ঘটে কারণ autocomplete="username" বৈশিষ্ট্যটি ইমেল ইনপুটে প্রয়োগ করা হয়েছে৷
  • autocomplete="username" এবং autocomplete="current-password" ব্রাউজারগুলিকে ইনপুটগুলি স্বয়ংক্রিয়ভাবে পূরণ করতে সঞ্চিত মানগুলি ব্যবহার করতে সহায়তা করে।

বিভিন্ন ব্রাউজার ফর্ম ইনপুটগুলির ভূমিকা কাজ করতে এবং বিভিন্ন ওয়েবসাইটের একটি পরিসরের জন্য অটোফিল প্রদান করতে বিভিন্ন কৌশল ব্যবহার করে।

এটি নিজে চেষ্টা করার জন্য গুণাবলী যোগ করুন এবং সরান।

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

এই পয়েন্টে আপনার index.html ফাইলটি কেমন হওয়া উচিত তা এখানে:

4. পাসওয়ার্ড প্রদর্শন টগল করতে UI যোগ করুন

ব্যবহারযোগ্যতা বিশেষজ্ঞরা দৃঢ়ভাবে একটি আইকন বা বোতাম যুক্ত করার পরামর্শ দেন যা ব্যবহারকারীদের পাসওয়ার্ড ক্ষেত্রে প্রবেশ করা পাঠ্য দেখতে দেয়। এটি করার কোন অন্তর্নির্মিত উপায় নেই, তাই আপনাকে জাভাস্ক্রিপ্টের সাথে এটি বাস্তবায়ন করতে হবে।

এই কার্যকারিতা যোগ করার কোড সহজবোধ্য. এই উদাহরণটি টেক্সট ব্যবহার করে, একটি আইকন নয়।

নিম্নরূপ index.html , style.css , এবং script.js ফাইলগুলি আপডেট করুন৷

  1. 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="current-password" required>
</section>

  2. style.css ফাইলের নীচে নিম্নলিখিত CSS যোগ করুন:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    এটি পাসওয়ার্ড দেখান বোতামটিকে প্লেইন টেক্সটের মতো দেখায় এবং এটি পাসওয়ার্ড বিভাগের উপরের-ডান কোণায় প্রদর্শন করে।

  3. পাসওয়ার্ড প্রদর্শন টগল করতে script.js ফাইলে নিম্নলিখিত জাভাস্ক্রিপ্ট যোগ করুন এবং উপযুক্ত aria-label সেট করুন:

    const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

  4. শো পাসওয়ার্ড লজিক এখন চেষ্টা করুন.

    1. আপনার অ্যাপ দেখুন।

    2. পাসওয়ার্ড ক্ষেত্রে কিছু টেক্সট লিখুন.

    3. পাসওয়ার্ড দেখান ক্লিক করুন।

  5. বিভিন্ন অপারেটিং সিস্টেমে একাধিক ব্রাউজারে চতুর্থ ধাপটি পুনরাবৃত্তি করুন।

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

স্ক্রিনরিডারদের জন্য এই কার্যকারিতা কীভাবে কাজ করে তা বোঝার জন্য, ChromeVox ক্লাসিক এক্সটেনশন ইনস্টল করুন এবং ফর্মটি নেভিগেট করুন। aria-label মান কি উদ্দেশ্য হিসাবে কাজ করে?

কিছু ওয়েবসাইট, যেমন Gmail , আইকন ব্যবহার করে, টেক্সট নয়, পাসওয়ার্ড প্রদর্শন টগল করতে। আপনার এই কোডল্যাবটি শেষ হয়ে গেলে, এসভিজি চিত্রগুলির সাথে এটি প্রয়োগ করুন। মেটেরিয়াল ডিজাইন উচ্চ-মানের আইকন অফার করে যা আপনি বিনামূল্যে ডাউনলোড করতে পারেন।

এই পয়েন্টে আপনার কোডটি কীভাবে দেখা উচিত তা এখানে:

5. ফর্ম বৈধতা যোগ করুন

আপনি ব্যবহারকারীদের তাদের ডেটা সঠিকভাবে প্রবেশ করতে সাহায্য করতে পারেন যখন আপনি তাদের ফর্ম জমা দেওয়ার আগে তাদের ডেটা যাচাই করতে দেন এবং তাদের কী পরিবর্তন করতে হবে তা দেখান।

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

এই ধাপটি বিল্ট-ইন ব্রাউজার UI এর সাথে কাস্টম বৈধতা যোগ করতে সীমাবদ্ধতা যাচাইকরণ API (যা ব্যাপকভাবে সমর্থিত ) ব্যবহার করে যা ফোকাস সেট করে এবং প্রম্পট প্রদর্শন করে।

ব্যবহারকারীদের পাসওয়ার্ড এবং অন্য কোনো ইনপুটের জন্য সীমাবদ্ধতা বলুন। তাদের অনুমান করবেন না!

  1. 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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

এটি দুটি নতুন বৈশিষ্ট্য যোগ করে:

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

  1. style.css ফাইলের নীচে নিম্নলিখিত CSS যোগ করুন:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

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

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. এটা চেষ্টা করুন!

    সমস্ত সাম্প্রতিক ব্রাউজারে জাভাস্ক্রিপ্টের সাথে ফর্ম যাচাইকরণ এবং সমর্থন বৈধকরণের জন্য অন্তর্নির্মিত বৈশিষ্ট্য রয়েছে।

    1. একটি অবৈধ ইমেল ঠিকানা লিখুন এবং সাইন ইন ক্লিক করুন। ব্রাউজার একটি সতর্কতা প্রদর্শন করে-কোন জাভাস্ক্রিপ্টের প্রয়োজন নেই!

    2. একটি বৈধ ইমেল ঠিকানা লিখুন, কিন্তু তারপর একটি পাসওয়ার্ড মান ছাড়া সাইন ইন ক্লিক করুন. ব্রাউজার সতর্ক করে যে আপনি একটি প্রয়োজনীয় মান মিস করেছেন এবং পাসওয়ার্ড ইনপুটের উপর ফোকাস সেট করে।

    3. একটি অবৈধ পাসওয়ার্ড লিখুন এবং সাইন ইন ক্লিক করুন। এখন আপনি কি ভুল তার উপর নির্ভর করে বিভিন্ন বার্তা দেখতে পাচ্ছেন।

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

    এই পয়েন্টে আপনার কোডটি কীভাবে দেখা উচিত তা এখানে:

আরও যান

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

  • যোগ করুন আপনার পাসওয়ার্ড ভুলে গেছেন? , একটি বোতাম যা ব্যবহারকারীদের জন্য তাদের পাসওয়ার্ড রিসেট করা সহজ করে তোলে।

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

  • শৈলী এবং ব্র্যান্ডিং বিবেচনা করুন, এবং নিশ্চিত করুন যে এই অতিরিক্ত বৈশিষ্ট্যগুলি আপনার ওয়েবসাইটের বাকি অংশের সাথে মেলে।

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