सीएसएस इनपुट

वेब फॉर्म कई वेबसाइटों का एक अनिवार्य हिस्सा हैं, और वेबसाइट के संचालक को उपयोगकर्ता से इनपुट स्वीकार करने की अनुमति देते हैं। उदाहरण के लिए, एक वेब फ़ॉर्म का उपयोग उन उपयोगकर्ताओं के ईमेल पते को स्वीकार करने के लिए किया जा सकता है जो किसी वेबसाइट के ईमेल न्यूज़लेटर में साइन अप करना चाहते हैं।

CSS का उपयोग करके, आप वेब पेज पर इनपुट बनाने के लिए कस्टम स्टाइल जोड़ सकते हैं। यह आपको सौंदर्य की दृष्टि से मनभावन फ़ॉर्म फ़ील्ड बनाने की अनुमति देता है जिसका उपयोग आगंतुक जानकारी प्रस्तुत करने के लिए कर सकते हैं।

यह ट्यूटोरियल उदाहरणों के साथ, HTML इनपुट की मूल बातें और वेब पेज पर इनपुट फ़ील्ड को स्टाइल करने के लिए CSS का उपयोग करने के तरीके पर चर्चा करेगा। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS का उपयोग करके इनपुट फ़ील्ड को स्टाइल करने के विशेषज्ञ होंगे।

एचटीएमएल और सीएसएस इनपुट

वेब पेज पर फॉर्म को परिभाषित करने के लिए, हमें HTML का उपयोग करना चाहिए। एचटीएमएल भाषा हमें अपने फॉर्म की संरचना को परिभाषित करने की अनुमति देती है- कौन से फॉर्म फ़ील्ड दिखाई देंगे, और कहां-फिर हम अपने फॉर्म में तत्वों के लिए कस्टम शैलियों को लागू करने के लिए सीएसएस का उपयोग कर सकते हैं।

HTML में, टैग का उपयोग उपयोगकर्ता इनपुट को एक रूप में स्वीकार करने के लिए किया जाता है। HTML <इनपुट> के लिए मूल सिंटैक्स है:

<input type="typeOfInput">

सीएसएस इनपुट हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

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

<label for="userName">Name</label>
<input type="text" name="userName">

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

हमारा इनपुट फ़ील्ड <इनपुट> टैग के लिए डिफ़ॉल्ट HTML शैलियों का उपयोग करता है, जो कि बुनियादी हैं। हम अपने फॉर्म में एक लेबल जोड़ने के लिए <लेबल> टैग का भी उपयोग करते हैं। कस्टम डिज़ाइन जोड़ने के लिए, हम CSS का उपयोग कर सकते हैं।

सीएसएस इनपुट

आइए कुछ उदाहरणों के माध्यम से चलते हैं कि CSS का उपयोग करके तत्वों को कैसे स्टाइल किया जाए।

इनपुट की चौड़ाई सेट करना

मान लीजिए कि हम एक स्थानीय स्टाम्प क्लब के लिए एक फॉर्म फील्ड डिजाइन कर रहे हैं जो फॉर्म जमा करने वाले लोगों के नाम एकत्र करता है। यह फ़ॉर्म वेब पेज की चौड़ाई का 50% होना चाहिए। हम निम्नलिखित कोड का उपयोग करके यह फॉर्म बना सकते हैं:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	width: 50%;
}

इस उदाहरण में, हमने एक फॉर्म फ़ील्ड बनाया है जो वेब पेज की चौड़ाई के 50% के बराबर है।

हमारे एचटीएमएल कोड में, हमने <लेबल> टैग का इस्तेमाल Name . लेबल जोड़ने के लिए किया था हमारे रूप को। फिर हमने अपने फॉर्म को परिभाषित करने के लिए एक <इनपुट> टैग का इस्तेमाल किया। फिर, हमारे सीएसएस कोड में, हम सभी <इनपुट> टैग की चौड़ाई को उनके मूल कंटेनर के 50% के बराबर सेट करते हैं। इस मामले में, क्योंकि मूल कंटेनर वेब पेज है, हमारा <इनपुट> टैग हमारी साइट की चौड़ाई का 50% हिस्सा लेता है।

बॉर्डर के साथ इनपुट

सिएटल स्टैम्प क्लब ने हमें प्रत्येक फॉर्म फ़ील्ड के चारों ओर एक हल्का नीला बॉर्डर जोड़ने के लिए कहा है क्योंकि हल्का नीला उनके क्लब का रंग है। बॉर्डर की चौड़ाई 3px होनी चाहिए। हम प्रत्येक फॉर्म इनपुट फ़ील्ड के चारों ओर सीमा जोड़ने के लिए सीमा संपत्ति का उपयोग कर सकते हैं।

यहां वह कोड है जिसका उपयोग हम अपने इनपुट क्षेत्र के चारों ओर बॉर्डर जोड़ने के लिए करेंगे:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightblue;
}

हमारे कोड में, हम अपने इनपुट फ़ील्ड के चारों ओर बॉर्डर जोड़ने के लिए बॉर्डर स्टाइल का उपयोग करते हैं। यह बॉर्डर 3px मोटा है। जैसा कि आप देख सकते हैं, हमारे प्रपत्र फ़ील्ड में हल्के नीले रंग का बॉर्डर है।

यदि आप सीएसएस सीमाओं के बारे में अधिक जानने में रुचि रखते हैं, तो सीएसएस सीमाओं के लिए हमारी अंतिम मार्गदर्शिका पढ़ें।

निचले बॉर्डर वाला इनपुट

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

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border-bottom: 3px solid lightblue;
}

हमारे कोड में, हम अपने इनपुट फ़ील्ड के निचले भाग में बॉर्डर जोड़ने के लिए बॉर्डर-बॉटम प्रॉपर्टी का उपयोग करते हैं।

पैडिंग के साथ इनपुट

सिएटल स्टैम्प क्लब ने हमें फ़ॉर्म की सामग्री के बीच स्थान दिखाने के लिए कहा है - वह स्थान जहाँ उपयोगकर्ता जानकारी दर्ज करता है - और फ़ॉर्म की सीमा।

क्लब चाहता है कि ऊपर और नीचे की सीमाओं और फॉर्म की सामग्री के बीच 10px की पैडिंग दिखाई दे। क्लब यह भी चाहता है कि बाएं और दाएं बॉर्डर और फ़ॉर्म की सामग्री के बीच 15px की पैडिंग दिखाई दे।

हम निम्नलिखित कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	padding: 10px 15px;
	box-sizing: border-box;
}

इस उदाहरण में, हमने अपने प्रपत्र फ़ील्ड की सामग्री और प्रपत्र फ़ील्ड की सीमाओं के बीच पैडिंग लागू करने के लिए पैडिंग शैली का उपयोग किया है। पहला मान (10px) ऊपर और नीचे के किनारों के लिए पैडिंग सेट करता है, और दूसरा मान (15px) बाएँ और दाएँ किनारों के लिए पैडिंग सेट करता है।

हमने बॉक्स-साइज़िंग प्रॉपर्टी का मान border-box . पर भी सेट किया है . यह सुनिश्चित करता है कि पैडिंग तत्वों की कुल चौड़ाई में शामिल है।

यदि आप CSS पैडिंग प्रॉपर्टी के बारे में अधिक जानने में रुचि रखते हैं, तो CSS पैडिंग के लिए हमारा गाइड पढ़ें।

केंद्रित इनपुट वाली शैलियां

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

हालाँकि, हम :focus CSS चयनकर्ता का उपयोग करके इसे अनुकूलित कर सकते हैं। जब उपयोगकर्ता प्रपत्र पर क्लिक करता है, तो सिएटल स्टैम्प क्लब ने हमें हमारे फ़ॉर्म के निचले भाग में एक हल्के भूरे रंग का बॉर्डर जोड़ने के लिए कहा है। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input:focus {
	outline: none;
	border-bottom: 3px solid lightgray;
}

वेबफ़ॉर्म डिफ़ॉल्ट HTML शैलियों का उपयोग करके प्रकट होता है। हालांकि, जब आप फ़ॉर्म पर क्लिक करते हैं, तो हमारे फ़ॉर्म के निचले भाग पर एक 3px चौड़ा सॉलिड लाइट ग्रे बॉर्डर लगाया जाता है।

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

फ़ोकस चयनकर्ता के बारे में अधिक जानने के लिए, CSS के लिए हमारी मार्गदर्शिका पढ़ें:फ़ोकस चयनकर्ता।

गोल कोनों के साथ इनपुट

सिएटल स्टैम्प क्लब ने हमें इनपुट फ़ील्ड के प्रत्येक किनारे के चारों ओर एक हल्के भूरे रंग की सीमा जोड़ने और इनपुट के कोनों को गोल करने के लिए कहा है। हम ऐसा सीमा-त्रिज्या गुण का उपयोग करके कर सकते हैं, जो आपको rounded corners . बनाने की अनुमति देता है सीएसएस में प्रभाव।

यहाँ वह कोड है जिसका उपयोग हम गोल कोनों के साथ एक फॉर्म फ़ील्ड बनाने के लिए करेंगे:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	border-radius: 10px;
}

इस उदाहरण में, हम एक 3px-चौड़े सॉलिड लाइट ग्रे बॉर्डर को परिभाषित करते हैं जो हमारे इनपुट फ़ील्ड के आसपास दिखाई देता है। फिर, हम अपने फॉर्म फ़ील्ड के कोनों को गोल करने के लिए सीमा-त्रिज्या संपत्ति का उपयोग करते हैं।

यदि आप वेब पेज पर HTML एलिमेंट में गोलाकार कोनों को लागू करने के तरीके के बारे में अधिक जानने में रुचि रखते हैं, तो CSS गोलाकार कोनों के लिए हमारी मार्गदर्शिका पढ़ें।

पृष्ठभूमि रंग के साथ इनपुट

सिएटल स्टैम्प क्लब ने हमें एक अंतिम फॉर्म फ़ील्ड बनाने के लिए कहा है। इस फ़ॉर्म फ़ील्ड में 3px चौड़ा सॉलिड लाइट ग्रे बॉर्डर होना चाहिए और इसका बैकग्राउंड हल्का नीला होना चाहिए.

हम इस फॉर्म फ़ील्ड को बनाने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	background-color: lightblue;
}

हमारे कोड में, हमने अपने इनपुट फ़ील्ड के चारों ओर एक 3px-चौड़ा सॉलिड लाइट ग्रे बॉर्डर परिभाषित करने के लिए बॉर्डर प्रॉपर्टी का उपयोग किया था। फिर, हमने अपने फॉर्म फील्ड के बैकग्राउंड कलर को हल्का नीला करने के लिए बैकग्राउंड-कलर प्रॉपर्टी का इस्तेमाल किया।

विशिष्ट इनपुट फ़ील्ड में शैलियाँ लागू करें

इस ट्यूटोरियल में, हमने चर्चा की है कि <इनपुट> फ़ील्ड में शैलियों को कैसे लागू किया जाए। हालांकि, एक तरीका है कि आप शैलियों को केवल एक विशिष्ट इनपुट प्रकार पर लागू कर सकते हैं।

यहीं से विशेषता चयनकर्ता आते हैं। input . का उपयोग करने के बजाय अपनी शैलियों में, यदि आप शैलियों को केवल एक विशिष्ट इनपुट पर लागू करना चाहते हैं, तो आप इनमें से किसी एक चयनकर्ता का उपयोग करने का प्रयास कर सकते हैं:

इनपुट[टाइप=टेक्स्ट]:सभी टेक्स्ट फ़ील्ड पर एक शैली लागू करता है।
इनपुट[टाइप=ईमेल]:सभी ईमेल फ़ील्ड पर एक शैली लागू करता है।
इनपुट[टाइप=पासवर्ड]:सभी पासवर्ड फ़ील्ड पर एक शैली लागू करता है।
इनपुट[id=userName]:userName आईडी वाले एलीमेंट पर शैली लागू करता है ।

विशेषता चयनकर्ता कैसे काम करते हैं, इसके बारे में अधिक जानने के लिए, CSS विशेषता चयनकर्ताओं के लिए हमारी करियर कर्म मार्गदर्शिका पढ़ें।

निष्कर्ष

CSS का उपयोग करके, आप कस्टम-डिज़ाइन किए गए वेब फ़ॉर्म बना सकते हैं जो सौंदर्य की दृष्टि से मनभावन और कार्यात्मक दोनों हैं। सबसे पहले, आप किसी प्रपत्र की संरचना को डिज़ाइन करने के लिए HTML का उपयोग करते हैं, फिर आप प्रपत्र में शैलियों को लागू करने के लिए CSS शैलियों का उपयोग कर सकते हैं।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में, HTML इनपुट की मूल बातें और इनपुट फ़ील्ड को स्टाइल करने के लिए आप CSS का उपयोग कैसे कर सकते हैं, इस पर चर्चा की गई। अब आप सीएसएस का उपयोग करने वाले विशेषज्ञ की तरह अपने इनपुट फ़ील्ड को स्टाइल करने के लिए आवश्यक ज्ञान से लैस हैं!