उपयोगकर्ताओं को उनके पसंदीदा ब्राउज़र पर आपका फ़ॉर्म इस्तेमाल करने में मदद करें
यह पक्का करने के लिए कि आपके फ़ॉर्म को ज़्यादा से ज़्यादा लोग ऐक्सेस कर सकें, इसके लिए डिज़ाइन किए गए एलिमेंट का इस्तेमाल करें
नौकरी: <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;
}
देखें कि आपको कितना समझ आया है
स्टाइलिंग फ़ॉर्म के बारे में अपनी जानकारी को परखें
आपको font-size
के लिए मिलती-जुलती इकाइयों का इस्तेमाल क्यों करना चाहिए?
फ़ॉर्म कंट्रोल के बीच स्पेस कैसे बढ़ाया जा सकता है?
margin
सीएसएस प्रॉपर्टी का इस्तेमाल करना.spacer
सीएसएस प्रॉपर्टी का इस्तेमाल करना.boundary
सीएसएस प्रॉपर्टी का इस्तेमाल करना.padding
सीएसएस प्रॉपर्टी का इस्तेमाल करना.