ग्लिच

अच्छी तरह से डिज़ाइन किए गए फ़ॉर्म, उपयोगकर्ताओं की मदद करते हैं और कन्वर्ज़न रेट बढ़ाते हैं. एक छोटे से सुधार से काफ़ी फ़र्क़ पड़ सकता है!

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

यहां पेमेंट फ़ॉर्म का एक उदाहरण दिया गया है, जिसमें सभी सबसे सही तरीके दिखाए गए हैं:

यहां पते के लिए बनाए गए एक आसान फ़ॉर्म का उदाहरण दिया गया है. इसमें सभी सबसे सही तरीके दिखाए गए हैं:

उदाहरण के लिए, नीचे दिए गए एचटीएमएल में, जन्म का साल 1900 से 2020 के बीच का होना चाहिए. type="number" का इस्तेमाल करने पर, इनपुट वैल्यू सिर्फ़ संख्याओं पर सीमित हो जाती हैं. ये वैल्यू, min और max की तय की गई सीमा में होनी चाहिए. अगर किसी ऐसी वैल्यू को डालने की कोशिश की जाती है जो तय सीमा से बाहर है, तो इनपुट को अमान्य के तौर पर सेट कर दिया जाएगा.

नीचे दिए गए उदाहरण में, pattern="[\d ]{10,30}" का इस्तेमाल करके यह पक्का किया गया है कि पेमेंट कार्ड नंबर मान्य है. साथ ही, इसमें स्पेस की अनुमति दी गई है:

मॉडर्न ब्राउज़र, email या url टाइप वाले इनपुट की बुनियादी पुष्टि भी करते हैं.

सीएसएस ग्रिड लेआउट

सीएसएस ग्रिड लेआउट की मदद से, आसानी से फ़्लेक्सिबल ग्रिड बनाए जा सकते हैं. अगर हम ऊपर दिए गए उदाहरण को देखें, तो प्रतिशत के साथ कॉलम बनाने के बजाय, हम ग्रिड लेआउट और fr यूनिट का इस्तेमाल कर सकते हैं. यह यूनिट, कंटेनर में उपलब्ध जगह के हिस्से को दिखाती है.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

ग्रिड का इस्तेमाल, रेगुलर ग्रिड लेआउट बनाने के लिए भी किया जा सकता है. इसमें ज़्यादा से ज़्यादा आइटम फ़िट किए जा सकते हैं. स्क्रीन का साइज़ छोटा होने पर, उपलब्ध ट्रैक की संख्या कम हो जाएगी. डेमो में, हमने हर पंक्ति में उतने कार्ड डाले हैं जितने इसमें फ़िट हो सकते हैं. साथ ही, इनका साइज़ कम से कम 200px होना चाहिए.

सीएसएस ग्रिड लेआउट के बारे में ज़्यादा पढ़ें

कई कॉलम वाला लेआउट

कुछ तरह के लेआउट के लिए, एक से ज़्यादा कॉलम वाले लेआउट (मल्टीकोल) का इस्तेमाल किया जा सकता है. इससे column-width प्रॉपर्टी की मदद से, कॉलम की संख्या रिस्पॉन्सिव बनाई जा सकती है. डेमो में, यह देखा जा सकता है कि अगर किसी दूसरे 200px कॉलम के लिए जगह है, तो कॉलम जोड़ दिए जाते हैं.