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