CSS फॉर्म कंट्रोल
फ़ॉर्म वह जगह हैं जहाँ लोग लिखते, चुनते और भेजते हैं। CSS input, textarea और select को साफ़ और शांत बना सकता है — पठनीय padding, साफ़ बॉर्डर, और सच में दिखने वाला फोकस संकेत — जबकि HTML अर्थ रखता है।
फॉर्म-कंट्रोल टूलकिट
📊 एक नज़र में फॉर्म कंट्रोल
| हिस्सा | रोज़ का काम |
|---|---|
input / textarea / select |
मुख्य कंट्रोल जिन्हें आप एक साथ स्टाइल करते हैं |
padding + border |
फ़ील्ड को जगह और साफ़ किनारा दें |
border-radius |
कोने नरम करें |
:focus-visible |
कीबोर्ड/पॉइंटर के लिए फोकस रिंग दिखाएँ |
:disabled |
अभी संपादन-योग्य न होने वाले फ़ील्ड मंद करें |
एक साझा क्लास (या तत्व समूह) एक बार स्टाइल करें ताकि हर फ़ील्ड एक ही परिवार लगे। बटन की त्वचा अगले पाठ में।
टेक्स्ट इनपुट — जगह और किनारे
डिफ़ॉल्ट ब्राउज़र इनपुट अक्सर उपकरणों पर असमान लगते हैं। चौड़ाई, padding, फ़ॉन्ट-आकार और हल्का बॉर्डर सेट करें ताकि टाइप करना आरामदेह हो।
बेस टेक्स्ट इनपुट
cssinput[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}Textarea — लिखने की जगह
Textarea को ऊँचाई और इनपुट जैसी ही padding भाषा चाहिए। लंबी उत्तरों के लिए ऊर्ध्वाधर resize दें; लेआउट स्थिर रखना हो तो लॉक करें।
आरामदायक textarea
csstextarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}Select — वही परिवार
ड्रॉपडाउन को टेक्स्ट फ़ील्ड जैसी बॉर्डर, radius और padding चाहिए ताकि फ़ॉर्म पैच जैसा न लगे।
उसी परिवार में select
cssselect {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}दिखने वाला फोकस
बिना बदले फोकस स्टाइल कभी न हटाएँ। :focus-visible कीबोर्ड उपयोगकर्ता के लिए साफ़ रिंग खींचता है और लुक शांत रखता है।
दिखने वाली फोकस रिंग
cssinput:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}Disabled फ़ील्ड
Disabled कंट्रोल अनुपलब्ध दिखें — कम opacity या मंद पृष्ठभूमि — बिना लेआउट से गायब हुए।
Disabled टोन
cssinput:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}शांत फ़ील्ड आदत
एक साझा फ़ील्ड स्टाइल रखें, लेबल अंतराल का सम्मान करें, फोकस बचाएँ, और बटन कॉस्मेटिक Buttons पाठ के लिए छोड़ें।
साझा फ़ील्ड क्लास
css.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}
.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}खुद आज़माएँ
- टेक्स्ट/ईमेल इनपुट को padding, border और
border-radiusसे स्टाइल करें। textareaमिलाएँ;resize: verticalलगाएँ।selectको उसी बॉर्डर परिवार से स्टाइल करें।:focus-visibleoutline + बॉर्डर रंग — नंगाoutline: noneन छोड़ें।:disabledइनपुट मंद करें और जाँचें कि वह अभी भी फ़ील्ड लगे।
आम गलतियाँ
- बिना फोकस बदले
outline: none(कीबोर्ड उपयोगकर्ता खो जाते हैं) - बहुत छोटा padding/फ़ॉन्ट जिससे मोबाइल टाइपिंग दुखती है
- हर कंट्रोल अलग स्टाइल करके फ़ॉर्म यादृच्छिक लगना
- इस पाठ को बटन डिज़ाइन बनाना (वह अगला है)
- टेबल
border-collapse/ ज़ेबरा से मिलाना (पिछला सत्र)
सारांश
- साझा padding, border और radius इनपुट, textarea और select को एक करते हैं
- Textarea को ऊँचाई और समझदार resize दें
- दिखने वाला
:focus-visibleरखें :disabledफ़ील्ड मंद करें; छिपाएँ नहीं- बटन दिखावट अगले पाठ के लिए छोड़ें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी