:ব্যবহারকারী-বৈধ এবং :ব্যবহারকারী-অবৈধ ছদ্ম-শ্রেণী,:ব্যবহারকারী-বৈধ এবং :ব্যবহারকারী-অবৈধ ছদ্ম-শ্রেণী

প্রকাশিত: নভেম্বর 8, 2023

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

ব্যবহারকারীর মিথস্ক্রিয়া ছদ্ম-শ্রেণী নির্বাচক

:user-valid এবং :user-invalid pseudo-class নির্বাচকগুলি বিদ্যমান :valid এবং :invalid ছদ্ম-শ্রেণির অনুরূপ। উভয়ই একটি ফর্ম নিয়ন্ত্রণের সাথে মেলে যে এটির বর্তমান মান এটির বৈধতা সীমাবদ্ধতাগুলিকে সন্তুষ্ট করে কিনা। যাইহোক, নতুন :user-valid এবং :user-invalid ছদ্ম-শ্রেণির সুবিধা হল যে কোনও ব্যবহারকারী ইনপুটের সাথে উল্লেখযোগ্যভাবে ইন্টারঅ্যাক্ট করার পরেই তারা একটি ফর্ম নিয়ন্ত্রণের সাথে মেলে।

একটি ফর্ম কন্ট্রোল যা প্রয়োজনীয় এবং খালি মিলবে :invalid এমনকি যদি একজন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট শুরু না করে থাকে। যাইহোক, সেই একই ফর্ম কন্ট্রোল মিলবে না :user-invalid যতক্ষণ না ব্যবহারকারী ইনপুট পরিবর্তন করে এটিকে একটি অবৈধ অবস্থায় না ফেলে।

:user-valid এবং :user-invalid pseudo-class ব্যবহার করুন

স্টাইল ইনপুট, নির্বাচন এবং টেক্সটেরিয়া নিয়ন্ত্রণের জন্য এই ছদ্ম-শ্রেণীগুলি ব্যবহার করুন, যেমনটি নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}
<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

একটি চিত্র যা তুলনা করার জন্য 3টি স্ক্রিনশট পাশাপাশি একত্রিত করে৷ প্রতিটি স্ক্রিনশট একই ইনপুট, নির্বাচন এবং টেক্সটেরিয়া নিয়ন্ত্রণ সহ একটি ওয়েব ফর্ম দেখায়। প্রথম স্ক্রিনশটটি কোনো ব্যবহারকারীর ইনপুটের আগে ফর্মটিকে তার প্রাথমিক অবস্থায় দেখায়। নিয়ন্ত্রণ সীমানাগুলি ধূসর এবং নীচের সাহায্য পাঠ্যটি ব্যাখ্যা করে যে প্রতিটি নিয়ন্ত্রণ বর্তমানে :অবৈধ ছদ্ম-শ্রেণী নির্বাচকের সাথে মিলবে৷ ব্যবহারকারী প্রতিটি নিয়ন্ত্রণের জন্য ইনপুট প্রদান করার পরে দ্বিতীয় স্ক্রিনশটটি একই ফর্ম দেখায়। নিয়ন্ত্রণ সীমানা সবুজ এবং নীচের সাহায্য পাঠ্য ব্যাখ্যা করে যে প্রতিটি নিয়ন্ত্রণ বর্তমানে :valid এবং :user-valid pseudo-class নির্বাচক উভয়ের সাথেই মিলবে। তৃতীয় এবং চূড়ান্ত স্ক্রিনশট একই ফর্ম দেখায় যখন একজন ব্যবহারকারী তাদের সমস্ত ইনপুট মুছে ফেলার পরে। নিয়ন্ত্রণ সীমানা লাল এবং নীচের সাহায্য পাঠ্য ব্যাখ্যা করে যে প্রতিটি নিয়ন্ত্রণ বর্তমানে :অবৈধ এবং :ব্যবহারকারী-অবৈধ ছদ্ম-শ্রেণী নির্বাচক উভয়ের সাথেই মিলবে৷

ব্যবহারকারীর মিথস্ক্রিয়া এবং বৈধতা সীমাবদ্ধতার সমন্বয়ের উপর ভিত্তি করে নির্বাচকরা মেলে। তাদের কর্মে দেখতে নিম্নলিখিত ডেমোর সাথে ইন্টারঅ্যাক্ট করুন:

কম কোড সহ আরও ভাল ব্যবহারকারীর অভিজ্ঞতা

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

আরও সম্পদ

আনস্প্ল্যাশে বেহজাদ গাফফারিয়ানের কভার ফটো।

,

প্রকাশিত: নভেম্বর 8, 2023

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

ব্যবহারকারীর মিথস্ক্রিয়া ছদ্ম-শ্রেণী নির্বাচক

:user-valid এবং :user-invalid pseudo-class নির্বাচকগুলি বিদ্যমান :valid এবং :invalid ছদ্ম-শ্রেণির অনুরূপ। উভয়ই একটি ফর্ম নিয়ন্ত্রণের সাথে মেলে যে এটির বর্তমান মান এটির বৈধতা সীমাবদ্ধতাগুলিকে সন্তুষ্ট করে কিনা। যাইহোক, নতুন :user-valid এবং :user-invalid ছদ্ম-শ্রেণির সুবিধা হল যে কোনও ব্যবহারকারী ইনপুটের সাথে উল্লেখযোগ্যভাবে ইন্টারঅ্যাক্ট করার পরেই তারা একটি ফর্ম নিয়ন্ত্রণের সাথে মেলে।

একটি ফর্ম কন্ট্রোল যা প্রয়োজনীয় এবং খালি মিলবে :invalid এমনকি যদি একজন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট শুরু না করে থাকে। যাইহোক, সেই একই ফর্ম কন্ট্রোল মিলবে না :user-invalid যতক্ষণ না ব্যবহারকারী ইনপুট পরিবর্তন করে এটিকে একটি অবৈধ অবস্থায় না ফেলে।

:user-valid এবং :user-invalid pseudo-class ব্যবহার করুন

স্টাইল ইনপুট, নির্বাচন এবং টেক্সটেরিয়া নিয়ন্ত্রণের জন্য এই ছদ্ম-শ্রেণীগুলি ব্যবহার করুন, যেমনটি নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}
<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

একটি চিত্র যা তুলনা করার জন্য 3টি স্ক্রিনশট পাশাপাশি একত্রিত করে৷ প্রতিটি স্ক্রিনশট একই ইনপুট, নির্বাচন এবং টেক্সটেরিয়া নিয়ন্ত্রণ সহ একটি ওয়েব ফর্ম দেখায়। প্রথম স্ক্রিনশটটি কোনো ব্যবহারকারীর ইনপুটের আগে ফর্মটিকে তার প্রাথমিক অবস্থায় দেখায়। নিয়ন্ত্রণ সীমানাগুলি ধূসর এবং নীচের সাহায্য পাঠ্যটি ব্যাখ্যা করে যে প্রতিটি নিয়ন্ত্রণ বর্তমানে :অবৈধ ছদ্ম-শ্রেণী নির্বাচকের সাথে মিলবে৷ ব্যবহারকারী প্রতিটি নিয়ন্ত্রণের জন্য ইনপুট প্রদান করার পরে দ্বিতীয় স্ক্রিনশটটি একই ফর্ম দেখায়। নিয়ন্ত্রণ সীমানা সবুজ এবং নীচের সাহায্য পাঠ্য ব্যাখ্যা করে যে প্রতিটি নিয়ন্ত্রণ বর্তমানে :valid এবং :user-valid pseudo-class নির্বাচক উভয়ের সাথেই মিলবে। তৃতীয় এবং চূড়ান্ত স্ক্রিনশট একই ফর্ম দেখায় যখন একজন ব্যবহারকারী তাদের সমস্ত ইনপুট মুছে ফেলার পরে। নিয়ন্ত্রণ সীমানা লাল এবং নীচের সাহায্য পাঠ্য ব্যাখ্যা করে যে প্রতিটি নিয়ন্ত্রণ বর্তমানে :অবৈধ এবং :ব্যবহারকারী-অবৈধ ছদ্ম-শ্রেণী নির্বাচক উভয়ের সাথেই মিলবে৷

ব্যবহারকারীর মিথস্ক্রিয়া এবং বৈধতা সীমাবদ্ধতার সমন্বয়ের উপর ভিত্তি করে নির্বাচকরা মেলে। তাদের কর্মে দেখতে নিম্নলিখিত ডেমোর সাথে ইন্টারঅ্যাক্ট করুন:

কম কোড সহ আরও ভাল ব্যবহারকারীর অভিজ্ঞতা

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

আরও সম্পদ

আনস্প্ল্যাশে বেহজাদ গাফফারিয়ানের কভার ফটো।