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

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

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

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

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

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

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

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

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

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

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

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

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

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

input,
textarea {
  border: 1px solid;
}

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

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

लोगों को हाल की स्थिति समझने में मदद करें

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

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

देखें कि आपको कितना समझ आया है

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

संसाधन

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