ग्लिच

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

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

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

उदाहरण के लिए, नीचे दिया गया एचटीएमएल, जन्म के साल 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 कॉलम के लिए जगह उपलब्ध है, तो कॉलम जोड़े गए हैं.