:user-valid:user-invalidउपयोगकर्ता का इनपुट, किसी भी यूज़र इंटरफ़ेस की सबसे संवेदनशील समस्याओं में से एक होता है. इस्तेमाल किए जा सकने वाले ऐप्लिकेशन से, लोगों को इनपुट में मौजूद किसी भी गलती को देखने, समझने, और उसे ठीक करने में मदद मिलनी चाहिए. :user-valid और :user-invalid स्यूडो-क्लास सिलेक्टर, इनपुट की पुष्टि करने के अनुभव को बेहतर बनाने में मदद करते हैं. ये उपयोगकर्ताओं के इनपुट बदलने के बाद ही, गलतियों के बारे में सुझाव देते हैं. इन नए सिलेक्टर को इस्तेमाल करने से, किसी उपयोगकर्ता ने जो इनपुट बदला है उसे ट्रैक करने के लिए, स्टेटफ़ुल कोड लिखने की ज़रूरत नहीं है.
उपयोगकर्ता इंटरैक्शन के बदली हुई क्लास सिलेक्टर
:user-valid और :user-invalid बदली हुई क्लास सिलेक्टर, मौजूदा :valid और :invalid बदली हुई क्लास की तरह ही हैं. दोनों ही फ़ॉर्म कंट्रोल से मेल खाते हैं.
यह इस बात पर आधारित होता है कि मौजूदा वैल्यू, पुष्टि करने की सीमाओं के हिसाब से है या नहीं. हालांकि, नए :user-valid और :user-invalid स्यूडो-क्लास का फ़ायदा यह होता है कि
वे किसी फ़ॉर्म कंट्रोल से मैच करने के बाद ही उपयोगकर्ता के इनपुट से इंटरैक्ट करते हैं.
ज़रूरी और खाली फ़ॉर्म कंट्रोल, :invalid से मेल खाएगा, भले ही उपयोगकर्ता ने पेज के साथ इंटरैक्ट करना शुरू न किया हो. हालांकि, फ़ॉर्म में उसी फ़ॉर्म कंट्रोल को तब तक :user-invalid से मैच नहीं किया जाएगा, जब तक कि उपयोगकर्ता ने इनपुट बदल न दिया हो और उसे अमान्य स्थिति में न छोड़ दिया हो.
:user-valid और :user-invalid बदली हुई क्लास का इस्तेमाल करना
इन बदली हुई क्लास का इस्तेमाल इनपुट, चुनने, और टेक्स्टएरिया कंट्रोल को स्टाइल करने के लिए करें, जैसा कि इन उदाहरणों में दिखाया गया है:
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 की मदद से उपयोगकर्ता अनुभव पाने के लिए, अतिरिक्त स्टेटफ़ुल कोड लिखना ज़रूरी होता है. उस कोड की ज़रूरत शुरुआती वैल्यू, इनपुट के मौजूदा फ़ोकस स्टेटस, वैल्यू में उपयोगकर्ता के किए गए बदलावों की सीमा, पुष्टि करने की एक और जांच करने, और आखिर में स्टाइल के लिए एक क्लास जोड़ने के लिए होती है. अब इन सभी कामों को अपने-आप मैनेज करने के लिए,
ब्राउज़र पर भरोसा किया जा सकता है.
कई और संसाधन
- :user-मान्य - एमडीएन वेब दस्तावेज़
- :user-अमान्य - एमडीएन वेब दस्तावेज़
- उपयोगकर्ता-इंटरैक्शन बदली हुई क्लास - W3C एडिटर का ड्राफ़्ट
- फ़ॉर्म की सीमा की पुष्टि - एमडीएन वेब दस्तावेज़
- Forms की सुलभता ट्यूटोरियल - Web Accessibility Initiative
Unsplash पर बेज़ाद गफ़्फ़ेरियन की कवर फ़ोटो.