फ़ॉर्म को स्टाइल देना

लोगों को उनके पसंदीदा ब्राउज़र पर, आपके फ़ॉर्म का इस्तेमाल करने में मदद करें

यह पक्का करने के लिए कि आपके फ़ॉर्म को ज़्यादा से ज़्यादा लोग ऐक्सेस कर सकें, नौकरी के लिए बनाए गए एलिमेंट का इस्तेमाल करें: <input>, <textarea>, <select>, और <button>. यह इस्तेमाल किए जा सकने वाले फ़ॉर्म की बेसलाइन है.

ब्राउज़र की डिफ़ॉल्ट स्टाइल बढ़िया नहीं लग रही हैं! चलिए, इसे बदलते हैं.

पक्का करें कि फ़ॉर्म कंट्रोल सभी के लिए पढ़े जा सकें

ज़्यादातर ब्राउज़र में, फ़ॉर्म कंट्रोल के लिए डिफ़ॉल्ट फ़ॉन्ट साइज़ बहुत छोटा होता है. यह पक्का करने के लिए कि आपके फ़ॉर्म कंट्रोल पढ़े जा सकें, सीएसएस की मदद से फ़ॉन्ट का साइज़ बदलें:

कॉन्टेंट को आसानी से पढ़ने के लिए, font-size और line-height बढ़ाएं.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

उपयोगकर्ताओं को आपके फ़ॉर्म में नेविगेट करने में मदद करना

अगले चरण के रूप में, अपने फ़ॉर्म का लेआउट बदलें और फ़ॉर्म एलिमेंट की स्पेसिंग बढ़ाएं, ताकि उपयोगकर्ताओं को यह समझने में मदद मिल सके कि कौनसे एलिमेंट एक साथ जुड़े हैं.

margin सीएसएस प्रॉपर्टी, एलिमेंट के बीच के स्पेस को बढ़ाती है और padding प्रॉपर्टी, एलिमेंट के कॉन्टेंट के आस-पास स्पेस बढ़ाती है.

सामान्य लेआउट के लिए, Flexbox या Grid का इस्तेमाल करें. सीएसएस लेआउट के तरीकों के बारे में ज़्यादा जानें.

पक्का करें कि फ़ॉर्म कंट्रोल, फ़ॉर्म कंट्रोल जैसे दिखते हों

फ़ॉर्म कंट्रोल के लिए, आसानी से समझ में आने वाली स्टाइल का इस्तेमाल करें. इससे लोग आसानी से आपका फ़ॉर्म भर पाएंगे. उदाहरण के लिए, <input> एलिमेंट को ठोस बॉर्डर वाले स्टाइल में बनाएं.

input,
textarea {
  border: 1px solid;
}

फ़ॉर्म सबमिट करने में उपयोगकर्ताओं की मदद करना

अपनी साइट की स्टाइल से मैच करने के लिए, अपने <button> के लिए background का इस्तेमाल करें. साथ ही, डिफ़ॉल्ट border स्टाइल को बदलें या हटाएं.

मौजूदा स्थिति को समझने में उपयोगकर्ताओं की मदद करें

ब्राउज़र :focus के लिए डिफ़ॉल्ट स्टाइल लागू करते हैं. :focus की स्टाइल को बदला जा सकता है, ताकि वह रंग आपके ब्रैंड से मेल खाए.

button:focus {
    outline: 4px solid green;
}

जांचें कि आपको कितना समझ आया

स्टाइलिंग फ़ॉर्म के बारे में अपनी जानकारी को परखें

रिसॉर्स

• सीएसएस के बारे में जानें
• सीएसएस के लेआउट के तरीके
• फ़ोकस इंडिकेटर डिज़ाइन करना
• <button> की डिफ़ॉल्ट स्टाइल को वापस लाना.