:checked :disabled और फ़ॉर्म अवस्था के Pseudo
checked, disabled और required जैसी इंटरैक्टिव अवस्थाओं के आधार पर फ़ॉर्म elements को स्टाइल करना सीखिए।
:checked :disabled और फ़ॉर्म अवस्था के Pseudo, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
फ़ॉर्म स्थिति छद्म-क्लासों का परिचय
CSS ऐसी छद्म-क्लास उपलब्ध कराता है, जो HTML फ़ॉर्म तत्वों की स्थितियों को दर्शाती हैं। इनकी सहायता से JavaScript के बिना फ़ॉर्म नियंत्रणों को केवल CSS से शैलीबद्ध किया जा सकता है।
:checked
:checked चेकबॉक्स और रेडियो बटन के चयनित होने पर उन पर लागू होता है, और चयन सूचियों के भीतर चुने गए <option> तत्वों पर भी लागू होता है।
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
कस्टम चेकबॉक्स के लिए :checked
:checked तकनीक: मूल इनपुट को छिपाएँ और :checked से सक्रिय होने वाले समीपवर्ती सहोदर चयनकर्ता का उपयोग करके कस्टम बॉक्स को शैली दें:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled और :enabled
:disabled उन फ़ॉर्म तत्वों का चयन करता है, जिनमें disabled विशेषता होती है। :enabled उन तत्वों का चयन करता है, जिनके साथ सहभागिता की जा सकती है।
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required और :optional
:required उन इनपुट का चयन करता है, जिनमें required विशेषता होती है। :optional उन इनपुट का चयन करता है, जिनमें यह विशेषता नहीं होती।
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid और :invalid
:valid और :invalid प्रकार, पैटर्न, न्यूनतम/अधिकतम और आवश्यक होने जैसी बाधाओं के आधार पर ब्राउज़र की मूल फ़ॉर्म सत्यापन स्थिति को दर्शाते हैं।
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid और :user-invalid
उपयोगकर्ता की सहभागिता से पहले ही, पेज लोड होते ही ब्राउज़र सत्यापन चल जाता है। :user-valid और :user-invalid केवल उपयोगकर्ता द्वारा फ़ील्ड के साथ सहभागिता करने के बाद लागू होते हैं—इससे उपयोगकर्ता अनुभव काफी बेहतर होता है।
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown तब लागू होता है, जब कोई इनपुट अपना प्लेसहोल्डर टेक्स्ट दिखा रहा हो—अर्थात फ़ील्ड अभी खाली हो। JavaScript के बिना खाली इनपुट का पता लगाने के लिए इसका उपयोग करें।
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only और :read-write
:read-only readonly विशेषता वाले इनपुट का चयन करता है। :read-write संपादित किए जा सकने वाले इनपुट का चयन करता है।
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate मध्यवर्ती स्थिति वाले चेकबॉक्स पर लागू होता है (न तो चयनित, न ही अचयनित—इसे JavaScript से सेट किया जाता है), और तब रेडियो बटन पर भी लागू होता है, जब समूह में कोई चयन न किया गया हो।
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range और :out-of-range
min/max वाले type="number" या type="range" इनपुट के लिए, :in-range और :out-of-range वर्तमान मान की उन सीमाओं के सापेक्ष वैधता को दर्शाते हैं।
<input type="number" min="1" max="10" value="15" />
त्वरित जाँच
कौन-सी छद्म-क्लास उपयोगकर्ता द्वारा इनपुट फ़ील्ड के साथ सहभागिता करने के बाद ही फ़ॉर्म सत्यापन शैलियाँ लागू करती है?
पुनरावृत्ति
CSS की फ़ॉर्म स्थिति छद्म-क्लास JavaScript के बिना मूल फ़ॉर्म सत्यापन और सहभागिता की स्थिति दर्शाती हैं: :checked, :disabled, :required, :valid, :invalid और अन्य। बेहतर उपयोगकर्ता अनुभव के लिए :invalid के बजाय :user-invalid को प्राथमिकता दें। खाली फ़ील्ड का पता लगाने के लिए :placeholder-shown का उपयोग करें।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “:checked :disabled और फ़ॉर्म अवस्था के Pseudo” पाठ निःशुल्क है?
हाँ—“:checked :disabled और फ़ॉर्म अवस्था के Pseudo” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“:checked :disabled और फ़ॉर्म अवस्था के Pseudo” में मैं क्या सीखूँगा?
checked, disabled और required जैसी इंटरैक्टिव अवस्थाओं के आधार पर फ़ॉर्म elements को स्टाइल करना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“:checked :disabled और फ़ॉर्म अवस्था के Pseudo” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- :hover :focus :active और :visited
- :nth-child और :nth-of-type
- :not() :is() और :where()
- :checked :disabled और फ़ॉर्म अवस्था के Pseudo