अपनी वेबसाइट की तलाश में सुधार करना सीखें
सीएसएस के साथ फॉर्म स्टाइल करने का तरीका सीखना आपकी वेबसाइट के स्वरूप को बेहतर बनाने का एक शानदार तरीका है। अधिकांश वेब पेजों पर सबसे खराब चीजों के बीच एचटीएमएल फॉर्म तर्कसंगत हैं। वे अक्सर उबाऊ और उपयोगितावादी होते हैं और शैली के रास्ते में ज्यादा पेशकश नहीं करते हैं।
सीएसएस के साथ, यह बदल सकता है। अधिक उन्नत फॉर्म टैग के साथ सीएसएस का संयोजन कुछ अच्छे दिखने वाले फॉर्म प्रदान कर सकता है।
रंग बदलें
पाठ के साथ ही, आप फॉर्म तत्वों के अग्रभूमि और पृष्ठभूमि रंगों को बदल सकते हैं।
लगभग हर फ़ॉर्म तत्व के पृष्ठभूमि रंग को बदलने का एक आसान तरीका इनपुट टैग पर पृष्ठभूमि-रंग संपत्ति का उपयोग करना है। उदाहरण के लिए, यह कोड सभी तत्वों पर नीली पृष्ठभूमि रंग (# 9सीएफ) लागू करता है।
इनपुट {
पृष्ठभूमि रंग: # 9 सीएफ;
रंग: # 000;
}
केवल कुछ फॉर्म तत्वों के पृष्ठभूमि रंग को बदलने के लिए, बस टेक्स्टरेरा जोड़ें और शैली का चयन करें। उदाहरण के लिए:
इनपुट, textarea, {
पृष्ठभूमि रंग: # 9 सीएफ;
रंग: # 000;
}
यदि आप अपना पृष्ठभूमि रंग अंधेरा बनाते हैं तो टेक्स्ट रंग को बदलना सुनिश्चित करें। कंट्रास्टिंग रंग फॉर्म तत्वों को अधिक सुगम बनाने में मदद करते हैं। उदाहरण के लिए, टेक्स्ट रंग सफेद होने पर, एक गहरे लाल पृष्ठभूमि रंग पर टेक्स्ट अधिक आसानी से पढ़ा जाता है। उदाहरण के लिए, यह कोड लाल पृष्ठभूमि पर सफेद पाठ रखता है।
इनपुट, textarea, {
पृष्ठभूमि रंग: # सी 00;
रंग: # एफएफएफ;
}
आप फ़ॉर्म टैग पर भी पृष्ठभूमि रंग डाल सकते हैं। याद रखें कि फॉर्म टैग एक ब्लॉक तत्व है , इसलिए रंग पूरे आयत में भरता है, न केवल तत्वों के स्थानों पर।
क्षेत्र को खड़ा करने के लिए आप ब्लॉक तत्व में पीले रंग की पृष्ठभूमि जोड़ सकते हैं, इस तरह:
प्रपत्र {
पृष्ठभूमि रंग: # एफसीसी;
}
सीमा जोड़ें
रंगों के साथ, आप विभिन्न रूप तत्वों की सीमाओं को बदल सकते हैं। आप पूरे फॉर्म के चारों ओर एक ही सीमा जोड़ सकते हैं। पैडिंग जोड़ना सुनिश्चित करें, या सीमा के बगल में आपके फॉर्म तत्वों को सीधे जाम किया जाएगा।
5 पिक्सल पैडिंग के साथ 1-पिक्सेल ब्लैक बॉर्डर के लिए कोड का उदाहरण यहां दिया गया है:
प्रपत्र {
सीमा: 1 पीएक्स ठोस # 000;
पैडिंग: 5 पीएक्स;
}
आप केवल फॉर्म के मुकाबले सीमाओं को और अधिक रख सकते हैं। उन्हें इनपुट आउट करने के लिए इनपुट आइटम की सीमा बदलें:
इनपुट {
सीमा: 2 पीएक्स डैश # सी 00;
}
सावधान रहें जब आप इनपुट बॉक्स पर सीमाएं डालते हैं क्योंकि वे इनपुट बॉक्स की तरह कम दिखते हैं, और कुछ लोगों को यह नहीं पता हो सकता है कि वे फॉर्म भर सकते हैं।
स्टाइल फीचर्स को मिलाएं
विचार और कुछ सीएसएस के साथ अपने फॉर्म तत्वों को एक साथ रखकर, आप एक अच्छी लग रही फ़ॉर्म सेट कर सकते हैं जो आपकी साइट के डिज़ाइन और लेआउट को पूरा करता है।