स्टाइल लेबल के साथ एक फॉर्म
CSS के साथ एक फॉर्म लेबल को कैसे स्टाइल करें I एक वेब पेज फॉर्म पर विभिन्न क्षेत्रों और इनपुट क्षेत्रों को लेबल करने के लिए उपयोग किया जाने वाला एक फॉर्म तत्व लेबल तत्व है। इसे कैस्केडिंग स्टाइल शीट नियमों का उपयोग करके स्टाइल किया जा सकता है।
चरण 1
लेबल तत्वों को उस तरह से स्टाइल करने के लिए जिस तरह से वे परिचय में छवि में दिखाई देते हैं, आपको "के लिए" विशेषता के साथ लेबल तत्व का उपयोग करने की आवश्यकता है। इसके अलावा, आपको "इनपुट" तत्व को जोड़ने से पहले लेबल तत्व को बंद करना होगा। चित्रण में दिखाए गए पूर्ण रूप के लिए HTML।
दिन का वीडियो
चरण 2
लेबल तत्वों को स्टाइल करने के लिए, मैंने लेबल को ब्लॉक स्तर के तत्वों के रूप में प्रदर्शित किया, जो बाईं ओर तैरते थे। फिर मैंने लेबल को एक चौड़ाई दी ताकि इनपुट फ़ील्ड सभी लेबल से एक समान दूरी पर हों। मैंने एक रंग दिया और टेक्स्ट को बोल्ड किया। मैंने लेबल के बाद एक कोलन (:) जोड़ने के लिए जेनरेट की गई सामग्री का उपयोग किया। (बृहदान्त्र हर ब्राउज़र में प्रकट नहीं हो सकता है।)
यहाँ सीएसएस है:
लेबल {रंग: #B4886B; फोंट की मोटाई: बोल्ड; प्रदर्शन क्षेत्र; चौड़ाई: 150px; बाईंओर तैरना; } लेबल: के बाद { सामग्री: ":" }
चरण 3
केवल पूर्णता के लिए, मैं आपको फ़ील्डसेट को स्टाइल करने के लिए उपयोग किया जाने वाला CSS भी दिखाऊंगा, क्योंकि लेबल तत्व एक बॉर्डर वाले फ़ील्डसेट द्वारा संलग्न हैं।
यहाँ वह सीएसएस है:
फ़ील्डसेट {बॉर्डर: 1px सॉलिड #CCA383; चौड़ाई: 400px; पृष्ठभूमि: #FFE8EF; पैडिंग: 3px; } फ़ील्डसेट लीजेंड {पृष्ठभूमि: #CCA383; पैडिंग: 6px; फोंट की मोटाई: बोल्ड; }
चरण 4
आप लेबल तत्वों को स्टाइल करने के लिए और भी बहुत कुछ कर सकते हैं। मेरा उदाहरण इसे करने का सिर्फ एक तरीका है।
फॉर्म एचटीएमएल
चीजें आप की आवश्यकता होगी
HTML का कार्यसाधक ज्ञान
CSS का कार्यसाधक ज्ञान
