जब हम फॉर्म बना रहे होते हैं, तो हम उन्हें अपने ग्राहकों या ग्राहकों के लिए अद्वितीय और आकर्षक बनाना चाहते हैं। यह सच है कि जिस तरह से हम अपने फॉर्म प्रस्तुत करते हैं, वह उपयोगकर्ता-अनुभव को काफी बेहतर बनाता है। अपने रूपों को स्टाइल करने के लिए, हम विभिन्न प्रकार के CSS इनपुट प्रकार चयनकर्ताओं का उपयोग करते हैं।
वाक्यविन्यास और उदाहरण
जब आप इस लेख को पढ़ते हैं तो साथ में दिए गए कोडपेन का संदर्भ लें।
मुझे लगता है कि आपके पास HTML के साथ कुछ अनुभव निर्माण प्रपत्र हैं, इसलिए मैं HTML को विस्तार से कवर नहीं करूंगा।
बिना किसी स्टाइल के हमारा फॉर्म कुछ इस तरह दिखता है:
अगर हम 1990 के दशक में होते तो यह इतना बुरा नहीं होता, मेरा मतलब है नेटस्केप (90 के दशक का एक लोकप्रिय ब्राउज़र) होमपेज देखें।
लेकिन हम 90 के दशक में नहीं हैं। सौभाग्य से आज हमारे पास CSS है और हम इस सरल सिंटैक्स के साथ इनपुट को स्टाइल कर सकते हैं:
input[type=""] {/* यहां शैलियां */}
स्टाइलिंग टेक्स्ट इनपुट
पहली चीज जो हम कर सकते हैं वह है हमारे इनपुट और लेबल के फ़ॉन्ट आकार को स्टाइल करना। हम उन्हें इस तरह से आसान खोजशब्दों द्वारा चुन सकते हैं:
इनपुट, लेबल {फ़ॉन्ट-आकार:2rem; पैडिंग:1रेम;}
यह हमारे पाठ को अधिक सुपाठ्य बना देगा और इनपुट के बीच कुछ स्थान देगा। इसके साथ, चलिए आगे बढ़ते हैं और उस टेक्स्ट इनपुट को स्टाइल करते हैं जिसमें नाम के साथ-साथ हमारा ईमेल भी होता है।
इनपुट [टाइप ="टेक्स्ट"] {बॉर्डर:0; बॉर्डर-बॉटम:0.3rem सॉलिड मीडियमस्प्रिंगग्रीन;}इनपुट [टाइप ="ईमेल"] {बॉर्डर:0; बॉर्डर-लेफ्ट:0.3rem सॉलिड मीडियमस्प्रिंगग्रीन; सीमा-त्रिज्या:0.5rem;} यहां चाल यह है कि हम सीमाओं को हटा देते हैं और केवल उस विशिष्ट सीमा को जोड़ते हैं जिसकी हमें आवश्यकता होती है। हमारे ईमेल के लिए हमने अपनी सीमा को गोल बनाने के लिए कुछ दायरा जोड़ा। इतने कम कोड के साथ, हमने पहले ही कुछ अच्छे सुधार किए हैं।
चेतावनी:ड्रॉपडाउन
एक और इनपुट जिसे हम स्टाइल कर सकते हैं वह है ड्रॉपडाउन। लेकिन एक चेतावनी है। अगर हम input[type="select"] . करते हैं यह हमारे ड्रॉपडाउन का चयन नहीं करेगा। हमें select . का उपयोग करना होगा ड्रॉपडाउन चुनने के लिए कीवर्ड।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
चुनें { पैडिंग:2rem; फ़ॉन्ट-आकार:2rem; चौड़ाई:25rem; सीमा:कोई नहीं; बॉर्डर-बॉटम:0.3rem सॉलिड मीडियमस्प्रिंगग्रीन;} अन्य इनपुट स्टाइलिंग
अब तक आपके पास स्टाइलिंग इनपुट्स की जानकारी होनी चाहिए। साथ ही, ऐसा लगता है कि हमारे पास पहले से ही एक स्टाइल पैटर्न है। आइए आगे बढ़ते हैं और हमारे स्टाइल पैटर्न को संख्या और दिनांक इनपुट में जोड़ते हैं।
<पूर्व> इनपुट [प्रकार ="संख्या"], इनपुट [प्रकार ="दिनांक"] {सीमा:0; बॉर्डर-बॉटम:0.3rem सॉलिड मीडियमस्प्रिंगग्रीन; }CSS के कुछ ही स्ट्रोक के साथ, और बहुत आसान चयनकर्ताओं का उपयोग करके हम अपने इनपुट को एक नया रूप देने में सक्षम हैं!
यह तो बस शुरुआत है, तो सोचिए कि आप और क्या हासिल कर सकते हैं।
वास्तव में, मैंने कुछ इनपुट को कोडपेन पर अधूरा छोड़ दिया। तो आगे बढ़ें और अपनी पसंद का कोई भी स्टाइल लागू करें। आप पहले से ही जानते हैं कि यह कैसे करना है। इसके लिए जाओ!