: आवश्यक - सीएसएस-ट्रिक्स

:requiredसीएसएस में छद्म वर्ग चयनकर्ता लेखकों का चयन करें और शैली के लिए के साथ किसी भी मिलान किया तत्व की अनुमति देता है requiredविशेषता। प्रपत्र आसानी से इंगित कर सकते हैं कि फ़ॉर्म सबमिट किए जाने से पहले किन फ़ील्ड में मान्य डेटा होना चाहिए, लेकिन उपयोगकर्ता को सर्वर के उपयोगकर्ता इनपुट का एकमात्र सत्यापनकर्ता होने से होने वाले प्रतीक्षा से बचने की अनुमति देता है।

मान लें कि हमारे पास एक विशेषता वाला इनपुट है type="name"और यह requiredबूलियन विशेषता ¹ का उपयोग करके एक आवश्यक इनपुट बनाता है :

अब हम :requiredछद्म वर्ग चयनकर्ता का उपयोग करके उस इनपुट को स्टाइल कर सकते हैं :

/* style all elements with a required attribute */ :required ( background: red; )

हम साधारण चयनकर्ताओं का उपयोग करने के साथ-साथ अतिरिक्त छद्म वर्ग चयनकर्ताओं के साथ मिलकर आवश्यक फ़ील्ड का भी स्टाइल कर सकते हैं:

/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )

डेमो

पेन देखें: कोडपेन पर क्रिस कॉयर (@chriscoyier) द्वारा आवश्यक स्टाइलिंग।

ब्याज के अंक

requiredविशेषता जिसका अर्थ यह एक मूल्य की आवश्यकता नहीं है एक बूलियन माना जाता है। बस requiredएक तत्व पर होने से ब्राउज़र को पता चलता है कि यह विशेषता मौजूद है और संबंधित इनपुट वास्तव में एक आवश्यक फ़ील्ड है। हालांकि, डब्ल्यू 3 सी कल्पना के अनुसार, आवश्यक विशेषता भी खाली मान या विशेषताओं के नाम के साथ एक मूल्य के साथ काम करती है।

आवश्यक विशेषता ब्राउज़र के लिए मूल कॉलआउट जैसे कि डेमो से दिखाए गए बबल संदेश का उपयोग करने के लिए भी अनुरोध करती है।

उन इनपुटों का उपयोग नहीं किया जाता है :required, जिनके लिए लेखक :optionalछद्म वर्ग चयनकर्ता के साथ-साथ गैर-आवश्यक तत्वों को भी अनुकूलित कर सकते हैं :invalidऔर :validजब प्रपत्र फ़ील्ड की डेटा आवश्यकताएँ पूरी हो जाती हैं, तो उन्हें ट्रिगर किया जाता है।

इनपुट सत्यापन के आधार पर फ़िल्टर डेटा की सहायता करने के requiredलिए patternविशेषता के साथ प्रपत्र सत्यापन की भी प्रशंसा की जा सकती है type। पैटर्न को एक नियमित अभिव्यक्ति या एक स्ट्रिंग के रूप में लिखा जा सकता है। नीचे दिए गए उदाहरण में हम एक ई-मेल पते के लिए वाक्यविन्यास का मिलान करने के लिए एक नियमित अभिव्यक्ति का उपयोग कर रहे हैं।

यह :requiredविशेषता रेडियो बटन पर काम करती है। यदि आप एक रेडियो बटन (या सभी) पर आवश्यक रखते हैं, तो रेडियो बटन के उस विशेष समूह की आवश्यकता होगी। चेकबॉक्स पर, प्रत्येक व्यक्तिगत चेकबॉक्स को आवश्यक बनाता है (चेक किया जाना है)।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
१०	४	१०	१२	10.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4.4.3-4.4.4	10.3

¹ बूलियन विशेषताएँ : HTML5 में कई विशेषताएँ बूलियन विशेषताएँ हैं। एक तत्व पर बूलियन विशेषता की उपस्थिति सही मूल्य का प्रतिनिधित्व करती है, और विशेषता की अनुपस्थिति झूठे मूल्य का प्रतिनिधित्व करती है। यदि विशेषता मौजूद है, तो इसका मान या तो रिक्त स्ट्रिंग होना चाहिए या ऐसा मान होना चाहिए जो विशेषता के विहित नाम के लिए केस-असंवेदनशील मेल है, जिसमें कोई अग्रणी या अनुगामी व्हाट्सएप नहीं है।