How to design responsive and device-agnostic forms

Sep 11, 2025

कैसे करना है

चाहे यह एक साइनअप प्रवाह या बहु-दृश्य स्टेपर है, फॉर्म डिजिटल उत्पाद डिज़ाइन के सबसे महत्वपूर्ण घटकों में से एक हैं - इसलिए आपको उन्हें डिजाइन करने की आवश्यकता है ताकि वे मोबाइल उपकरणों पर प्रभावी ढंग से काम कर सकें।

यहां एक त्वरित रूप सहित मोबाइल उपकरणों के लिए रूपों को डिजाइन करने का तरीका बताया गया है फ्लेक्सबॉक्स का उपयोग कैसे करें ।

01. वर्टिकल स्क्रॉल के लिए डिज़ाइन [2 9]

एक एकल कॉलम लेआउट बेहतर काम करता है

डिवाइस के आकार के बावजूद, एक फॉर्म को पूरा करने का सबसे आसान तरीका एक रैखिक फैशन में है। एकाधिक कॉलम उपयोगकर्ता की गति को बाधित करते हैं (उपयोगकर्ताओं को असंगत रूप से फ़ील्ड की व्याख्या करने की संभावना है, जो उपयोगिता के मामले में एक नकारात्मक कारक है) और परिणामस्वरूप उपयोगकर्ता क्षैतिज स्क्रॉलिंग का सहारा ले सकते हैं।
[4 9]

जब फॉर्म डालने की बात आती है, तो आपको प्रविष्टियों को एक कॉलम में डिज़ाइन करना चाहिए: यदि कोई फ़ॉर्म एक कॉलम में होता है, तो पूरा करने का मार्ग पृष्ठ के नीचे एक सीधी रेखा है।

02. खेतों के ऊपर लेबल रखें [2 9]

फॉर्म फ़ील्ड के ऊपर लेबल रखें

लेबल उपयोगकर्ताओं को बताते हैं कि संबंधित इनपुट फ़ील्ड का क्या अर्थ है। अपने लेबल कहां से चुनना है तो आपके पास दो विकल्प हैं: बाएं-गठबंधन या शीर्ष-गठबंधन।

यदि डेस्कटॉप या टैबलेट पर फॉर्म पूरा हो रहा है तो बाएं-गठबंधन लेबल अच्छी तरह से काम करते हैं। हालांकि, वे मोबाइल उपकरणों के लिए एक भयानक समाधान हैं जहां सीमित स्क्रीन एस्टेट है। चूंकि बाएं-गठबंधन लेबल को क्षेत्र से पहले बैठने की आवश्यकता है, इसलिए संकीर्ण स्क्रीन फ़ील्ड के लिए बहुत कम जगह छोड़ देती है - खासकर यदि डिवाइस पोर्ट्रेट मोड में है। यह दो गंभीर उपयोगिता मुद्दों को बनाता है:

[7 9] फॉर्म फ़ील्ड उपयोगकर्ता के पूरे इनपुट को प्रदर्शित करने के लिए पर्याप्त नहीं होगा, जिससे उन्हें अपनी प्रतिक्रियाओं को गलत करने की अधिक संभावना है और अधिक गलत रूप प्रस्तुत किए जा रहे हैं

[7 9] जब किसी उपयोगकर्ता को अधिसूचित किया जाता है कि उन्होंने गलत जानकारी दर्ज की है, तो उन्हें समस्या को हल करने और समस्या को ठीक करने में कठिनाई हो सकती है क्योंकि वे पूरे अमान्य इनपुट को देखने में सक्षम नहीं होंगे

जब कोई उपयोगकर्ता किसी मोबाइल डिवाइस से ब्राउज़ कर रहा है तो फॉर्म फ़ील्ड के ऊपर लेबल को रखकर यह सुनिश्चित करेगा कि उपयोगकर्ता अपने विवरणों को इनपुट करने के लिए अधिकतम चौड़ाई देख सकें, क्योंकि आपको लेबल के लिए किसी भी उपयोग की आवश्यकता नहीं है।

इनपुट फ़ील्ड के ऊपर अपने लेबल लिखने से आपके लिए स्पष्ट और सार्थक फ़ील्ड लेबल लिखना बहुत आसान हो जाता है, क्योंकि आप एक या दो शब्दों तक सीमित नहीं होंगे।

03. टैप लक्ष्यों का उपयोग करें [2 9]
टैप लक्ष्य का उपयोग करना आसान होना चाहिए इससे कोई फर्क नहीं पड़ता कि वे किस डिवाइस पर प्रदर्शित होते हैं। बड़े लक्ष्यों (इनपुट फ़ील्ड और बटन) कम निपुणता वाले उपयोगकर्ताओं के लिए आसान हैं, चाहे वह एक स्थायी स्थिति या पर्यावरण के कारण अस्थायी हो।

फिलहाल, सबसे बड़ा लक्ष्य आकार स्पर्श उपकरणों के लिए है, इसलिए आपको टच-फर्स्ट डिज़ाइन करने की आवश्यकता है। यह सुनिश्चित करता है कि उपयोगकर्ताओं को टेक्स्ट दर्ज करने या विकल्प का चयन करने के लिए ज़ूम इन नहीं करना पड़ेगा। क्लिक करने योग्य क्षेत्रों को वसा उंगली नियम का पालन करना चाहिए और आसपास के क्षेत्रों पर अतिक्रमण नहीं करना चाहिए: औसत मानव फिंगर पैड 10 x 14 मिमी है और औसत उंगलियों 8-10 मिमी है, जिससे 10 x 10 मिमी एक अच्छा न्यूनतम स्पर्श लक्ष्य आकार हो जाता है।

लेकिन न केवल एक टैप लक्ष्य का उचित आकार नहीं होना चाहिए, आपको यह भी सुनिश्चित करना चाहिए कि एकाधिक टैप लक्ष्यों के बीच पर्याप्त स्थान है। वास्तव में, यदि आप मोबाइल एसईओ टूल्स पर 'टैप लक्ष्य आकार' त्रुटि प्राप्त कर रहे हैं, तो अक्सर यह होता है कि वास्तविक टैप लक्ष्य बहुत छोटे होने के बजाय, आपके टैप लक्ष्य बहुत करीब हैं।

मोबाइल उपकरणों पर सामग्री को पढ़ना मुश्किल हो सकता है, इसलिए इनपुट को 100% बनाना और पाठ को कम से कम 16px (1em) पर सेट करना एक बड़ा अंतर होगा। इस तरह, आवश्यक जानकारी को पढ़ने के लिए कोई चुटकी ज़ूमिंग या अतिरिक्त स्क्रॉल की आवश्यकता नहीं होगी।

04. एचटीएमएल 5 फॉर्म फ़ील्ड का उपयोग करें [2 9]

मोबाइल डिवाइस विभिन्न इनपुट प्रकारों के लिए कस्टम सॉफ्टवेयर कीबोर्ड प्रदान करते हैं, और एचटीएमएल 5 फॉर्म फ़ील्ड आपके फॉर्म के उपयोगकर्ता अनुभव को बेहतर बनाने का सबसे आसान तरीका है। ये इनपुट प्रकार ब्राउज़र को संकेत देते हैं कि ऑन-स्क्रीन कीबोर्ड के लिए किस प्रकार के कीबोर्ड लेआउट का प्रकार है।

के इनपुट प्रकार शामिल करें संख्या , ईमेल , टेलीफोन , यूआरएल तथा तारीख , और आपके मोबाइल उपकरणों पर कीबोर्ड इनपुट उपयोगकर्ता को फॉर्म भरने के लिए आसान बनाने के लिए अपडेट करेगा। इसे स्टाइल फॉर्म इनपुट में अतिरिक्त कक्षाएं जोड़ने की आवश्यकता नहीं है, आपको वैध HTML5 इनपुट प्रकारों का उपयोग करने की आवश्यकता है:

<input type="email" id="input-email">

05. फ्लेक्सबॉक्स का उपयोग करें [2 9]

आइए इसका सामना करते हैं - एचटीएमएल में एक उत्तरदायी लेआउट बनाना मुश्किल है। हम में से अधिकांश ने एक बिंदु या किसी अन्य पर इसके साथ संघर्ष किया है। यद्यपि विशेष तकनीकों का उपयोग करके अपेक्षित लेआउट व्यवहार करना हमेशा संभव रहा है, लेकिन प्रक्रिया कभी आसान नहीं रही है।

संरचित लेआउट से निपटने के लिए प्रौद्योगिकियां आ गई हैं और वर्षों से चली गई हैं: डेवलपर्स ने एचटीएमएल फ्रेम, एचटीएमएल टेबल, फ्लोट-आधारित लेआउट का उपयोग किया है, और, हाल ही में, सीएसएस ढांचे द्वारा लोकप्रिय विभिन्न ग्रिड सिस्टम जैसे कि बूटस्ट्रैप ।

लेकिन एचटीएमएल लचीला बॉक्स मॉडल के आगमन के साथ (या फ्लेक्सबॉक्स ), एचटीएमएल ने अंततः एक समृद्ध बॉक्स स्वरूपण इंजन प्राप्त किया है जो एचटीएमएल फॉर्म समेत जटिल लेआउट को संबोधित करता है।

फ्लेक्सबॉक्स हमें सुंदर रूपों के निर्माण के लिए बहुत लचीलापन देता है। फ्लेक्सबॉक्स के बारे में समझने की मुख्य बात यह है कि यह एक कंटेनर मैनिपुलेशन टूल है: इसका उद्देश्य एक कंटेनर में वस्तुओं के बीच जगह को बाहर करने, संरेखित करने और वितरित करने के लिए एक और अधिक कुशल तरीका प्रदान करना है, भले ही उनका आकार अज्ञात और / या गतिशील है (इसलिए शब्द 'फ्लेक्स')।

दिलचस्प बात यह है कि फ्लेक्सबॉक्स हमें किसी भी मीडिया क्वेरी का उपयोग किए बिना हमारे फॉर्म को जल्दी से बनाने के लिए बहुत लचीलापन देता है। इसके अलावा, सभी मौजूदा ब्राउज़र इसका समर्थन करते हैं।

हमारी फ्लेक्सबॉक्स के लिए वेब डिजाइनर गाइड लेख आपको और अधिक बताता है, लेकिन अब के लिए कुछ अभ्यास करते हैं और सीखते हैं कि एक उत्तरदायी रूप बनाने के लिए फ्लेक्सबॉक्स का लाभ कैसे लेना है। पहली चीजें पहले, आइए हमारे फॉर्म के लिए HTML संरचना को परिभाषित करें:

 & lt; फॉर्म & gt;
& lt; उल वर्ग = "फ्लेक्स" & gt;
& lit; li & gt; & lt; लेबल के लिए = "पहला-नाम" & gt; पहला नाम & lt; / लेबल & gt; & lt; इनपुट प्रकार = "टेक्स्ट" आईडी = "पहला-नाम" प्लेसहोल्डर = "अपना पहला नाम यहां दर्ज करें" & gt; & lt; / ली & gt;
& lit; li & gt; & lt; लेबल के लिए = "अंतिम-नाम" & gt; अंतिम नाम & lt; / लेबल & gt; & lt; इनपुट प्रकार = "पाठ" ID = "अंतिम-नाम" प्लेसहोल्डर = "अपना अंतिम नाम यहां दर्ज करें" & gt; & lt; / ली & gt;
& li; li & gt; & lt; के लिए लेबल = "ईमेल" & gt; ईमेल & lt; / लेबल & gt; & lt; इनपुट प्रकार = "ईमेल" id = "ईमेल" प्लेसहोल्डर = "यहां अपना ईमेल दर्ज करें" & gt; / li & gt;
& li; li & gt; & lt; लेबल के लिए = "फोन" & gt; फोन & lt; / लेबल & gt; & lt; इनपुट प्रकार = "Tel" ID = "फ़ोन" प्लेसहोल्डर = "अपने फोन को यहां दर्ज करें" & gt; & gt;
& li & gt; & lt; लेबल के लिए = "संदेश" & gt; संदेश & lt; / लेबल & gt; & lt; textarea पंक्तियों = "6" id = "संदेश" प्लेसहोल्डर = "यहां अपना संदेश दर्ज करें" & gt; & gt; & lt; / ली एंड जीटी;
& lit; li & gt; & lt; बटन प्रकार = "सबमिट करें" & gt; सबमिट करें & lt; / बटन & gt; & lt; / li & gt;
& lt; / उल & gt;
& lt; / फॉर्म & gt;

ध्यान दें कि हमारे फॉर्म में सूची में से प्रत्येक में एक वर्ग है फ्लेक्स । यह वर्ग हमारे फॉर्म में फ्लेक्स कंटेनर की पहचान करता है। फ्लेक्सबॉक्स के बड़े लाभों में से एक अपने कंटेनर और तत्वों को परिभाषित करने के लिए किसी भी HTML तत्व का उपयोग करने की क्षमता है।

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

आइए हमारे सीएसएस में फ्लेक्स कंटेनर की पहचान करें। इसके अतिरिक्त, हम क्रॉस-अक्ष में फ्लेक्स आइटम को लंबवत रूप से केंद्रित करना चाहते हैं। यह निर्दिष्ट करना बहुत आसान है कि, हमें बस एक साधारण सीएसएस नियम स्थापित करने की आवश्यकता है:

 .flex li {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-लपेटें: लपेटें;
संरेखित आइटम: केंद्र;
}

अगला कदम फ्लेक्स आइटम के लिए चौड़ाई निर्दिष्ट करना है। मुख्य आवश्यकताएँ:

[7 9] लेबल कम से कम 100px और अधिकांश 200px पर होना चाहिए

[7 9] लेबल के बाद आने वाले तत्व कम से कम 200px होना चाहिए

यह हमें क्या देता है? प्रत्येक लेबल और उसके संबंधित फॉर्म तत्व को एक क्षैतिज पंक्ति पर प्रदर्शित किया जाएगा जब फॉर्म की चौड़ाई कम से कम 300px (याद रखें, हम यहां दाएं गठबंधन लेबल का उपयोग कर रहे हैं)।

 .flex & gt; ली एंड जीटी; लेबल {
फ्लेक्स: 1 0 100 पीएक्स;
अधिकतम चौड़ाई: 200 पीएक्स;
}
.flex & gt; ली एंड जीटी; लेबल + * {
फ्लेक्स: 1 0 200 पीएक्स;
}

आखिरकार, सबमिट बटन के लिए, जो एक फ्लेक्स आइटम भी है, हम कुछ बुनियादी शैलियों को परिभाषित करते हैं:

 .flex ली बटन {
मार्जिन: ऑटो;
पैडिंग: 22 पीएक्स 46 पीएक्स;
}

जैसा कि आप देख सकते हैं, न्यूनतम मार्कअप और फ्लेक्सबॉक्स की शक्ति के साथ, हमने एक उत्तरदायी रूप बनाया है।

मोबाइल उपकरणों को ले जाने वाले अधिक उपयोगकर्ताओं के साथ, किसी भी डिवाइस पर उपयोगकर्ता के अनुकूल अनुभव प्रदान करना महत्वपूर्ण है। मुख्य बिंदु उपयोगकर्ता की आवश्यकताओं और डिवाइस की क्षमताओं दोनों को अनुकूलित करना है।

यह लेख मूल रूप से अंक 287 में प्रकाशित किया गया था नेट पत्रिका , पेशेवर वेब डिजाइनरों और डेवलपर्स के लिए पत्रिका - नवीनतम नए वेब रुझान, प्रौद्योगिकियों और तकनीकों की पेशकश। यहां नेट की सदस्यता लें।

संबंधित आलेख:

उत्तरदायी रूपें और तालिकाएँ बनाएं

[7 9] वेब अभिगम्यता के साथ शुरू करें [7 9] अपने उत्तरदायी वेब डिज़ाइनों का परीक्षण करने के लिए 7 महान उपकरण

How to design responsive and device-agnostic forms

कैसे करना है - सर्वाधिक लोकप्रिय लेख

मोबाइल डिजाइन के 8 गोल्डन नियम

Get started with Redux Thunk

What is a terminator line?

Cache in on the BBC's performance booster

The rules of responsive web typography

आपके रेंडर को बेहतर बनाने के लिए 4 आसान कदम

तेजी से वेबसाइटों का निर्माण कैसे करें

Combine traditional and digital skills to create a comic cover

श्रेणियाँ