अलग-अलग नामों और पते के फ़ॉर्मैट के लिए, फ़ॉर्म को कैसे डिज़ाइन किया जा सकता है? फ़ॉर्म में छोटी-मोटी गड़बड़ियां होने पर, उपयोगकर्ता परेशान हो जाते हैं. इससे वे आपकी साइट छोड़ सकते हैं या खरीदारी या साइन अप करने की प्रोसेस पूरी नहीं कर सकते.
इस कोडलैब में, आसानी से इस्तेमाल होने वाला और ऐक्सेस किया जा सकने वाला ऐसा फ़ॉर्म बनाने का तरीका बताया गया है जो ज़्यादातर उपयोगकर्ताओं के लिए सही काम करता है.
पहला चरण: एचटीएमएल एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा लेना
कोडलैब के इस हिस्से को खाली फ़ॉर्म से शुरू किया जाएगा. इसमें सिर्फ़ एक हेडिंग और एक बटन होगा. इसके बाद, इनपुट जोड़ना शुरू किया जा सकता है. (सीएसएस और थोड़ी सी JavaScript पहले से ही शामिल है.)
प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
इस कोड की मदद से, अपने
<form>एलिमेंट में नाम फ़ील्ड जोड़ें:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
सिर्फ़ एक नाम फ़ील्ड के लिए, यह तरीका जटिल और बार-बार होने वाला लग सकता है. हालांकि, यह पहले से ही बहुत कुछ करता है.
आपने label के for एट्रिब्यूट को input के name या id एट्रिब्यूट से मैच करके, label को input से जोड़ा है. लेबल पर टैप या क्लिक करने से, फ़ोकस उसके इनपुट पर चला जाता है. इससे, इनपुट के मुकाबले टारगेट का साइज़ बहुत ज़्यादा हो जाता है. यह उंगलियों, अंगूठों, और माउस क्लिक के लिए अच्छा है! जब लेबल या लेबल के इनपुट पर फ़ोकस किया जाता है, तो स्क्रीन रीडर, लेबल टेक्स्ट को पढ़कर सुनाते हैं.
name="name" के बारे में क्या? यह इस इनपुट से मिले डेटा से जुड़ा नाम है, जो 'name' है! यह नाम, फ़ॉर्म सबमिट होने पर सर्वर पर भेजा जाता है. name एट्रिब्यूट को शामिल करने का मतलब यह भी है कि इस एलिमेंट का डेटा, FormData API से ऐक्सेस किया जा सकता है.
दूसरा चरण: उपयोगकर्ताओं को डेटा डालने में मदद करने के लिए एट्रिब्यूट जोड़ना
Chrome में नाम इनपुट पर टैप या क्लिक करने पर क्या होता है? आपको अपने-आप भरने के लिए, ब्राउज़र में सेव किए गए सुझाव दिखेंगे. ये सुझाव, इनपुट की name और id वैल्यू के हिसाब से सही होंगे.
अब अपने इनपुट कोड में autocomplete="name" जोड़ें, ताकि यह इस तरह दिखे:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Chrome में पेज को फिर से लोड करें और नाम इनपुट पर टैप या क्लिक करें. आपको क्या फ़र्क़ दिखता है?
आपको एक छोटा सा बदलाव दिखेगा: autocomplete="name" के साथ, अब सुझावों में ऐसी खास वैल्यू दिखेंगी जिनका इस्तेमाल पहले फ़ॉर्म इनपुट में किया गया था. इनमें भी autocomplete="name" था. ब्राउज़र, आपके लिए सही विकल्पों का अनुमान नहीं लगाता: आपके पास यह कंट्रोल होता है कि आपको क्या देखना है. आपको मैनेज करें… विकल्प भी दिखेगा. इसकी मदद से, ब्राउज़र में सेव किए गए नामों और पतों को देखा जा सकता है और उनमें बदलाव किया जा सकता है.
अब शर्त की पुष्टि करने वाले एट्रिब्यूट
maxlength, pattern, और required जोड़ें, ताकि आपका इनपुट कोड ऐसा दिखे:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"का मतलब है कि ब्राउज़र 100 से ज़्यादा वर्णों वाले किसी भी इनपुट की अनुमति नहीं देगा.pattern="[\p{L} \-\.]+", रेगुलर एक्सप्रेशन का इस्तेमाल करता है. इसमें यूनिकोड अक्षर, हाइफ़न, और पीरियड (फ़ुल स्टॉप) का इस्तेमाल किया जा सकता है. इसका मतलब है कि फ़्रांज़ोईस या जोर्ग जैसे नामों को 'अमान्य' के तौर पर नहीं माना जाता. हालांकि, अगर वैल्यू के तौर पर\wका इस्तेमाल किया जाता है, तो ऐसा नहीं होता. इस वैल्यू में सिर्फ़ लैटिन वर्णमाला के वर्ण इस्तेमाल किए जा सकते हैं.requiredका मतलब है कि यह जानकारी देना ज़रूरी है! ब्राउज़र, इस फ़ील्ड के लिए डेटा के बिना फ़ॉर्म सबमिट करने की अनुमति नहीं देगा. साथ ही, अगर आपने इसे सबमिट करने की कोशिश की, तो वह इनपुट को हाइलाइट करके चेतावनी देगा. इसके लिए, किसी अतिरिक्त कोड की ज़रूरत नहीं है!
इन एट्रिब्यूट के साथ और बिना इनके, फ़ॉर्म के काम करने का तरीका जानने के लिए, डेटा डालकर देखें:
- ऐसी वैल्यू डालें जो
patternएट्रिब्यूट के हिसाब से न हों. - खाली इनपुट के साथ फ़ॉर्म सबमिट करने की कोशिश करें. आपको ब्राउज़र में पहले से मौजूद सुविधा की चेतावनी दिखेगी. इसमें, ज़रूरी फ़ील्ड के खाली होने की जानकारी दी जाएगी और उस पर फ़ोकस सेट किया जाएगा.
तीसरा चरण: अपने फ़ॉर्म में पता डालने के लिए, ज़रूरत के मुताबिक फ़ील्ड जोड़ना
पता वाला फ़ील्ड जोड़ने के लिए, अपने फ़ॉर्म में यह कोड जोड़ें:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea, आपके उपयोगकर्ताओं के लिए अपना पता डालने का सबसे आसान तरीका है. साथ ही, इसे काटकर चिपकाया भी जा सकता है.
आपको अपने पते के फ़ॉर्म को सड़क का नाम और नंबर जैसे कॉम्पोनेंट में बांटने से बचना चाहिए. ऐसा तब ही करें, जब ज़रूरत हो. उपयोगकर्ताओं को ऐसे फ़ील्ड में अपना पता डालने के लिए न मजबूर करें जो काम के नहीं हैं.
अब पिन कोड और देश या इलाके के लिए फ़ील्ड जोड़ें. आसानी से समझने के लिए, यहां सिर्फ़ पहले पांच देशों के बारे में बताया गया है. पते का भरा हुआ फ़ॉर्म में पूरी सूची शामिल होती है.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
आपको पता चलेगा कि पिन कोड डालना ज़रूरी नहीं है. ऐसा इसलिए है, क्योंकि कई देश पिन कोड का इस्तेमाल नहीं करते.
(ग्लोबल सोर्सबुक में, 194 अलग-अलग देशों के पते के फ़ॉर्मैट के बारे में जानकारी दी गई है. इसमें पते के सैंपल भी शामिल हैं.) देश के बजाय, देश या क्षेत्र लेबल का इस्तेमाल किया जाता है. इसकी वजह यह है कि पूरी सूची में मौजूद कुछ विकल्प (जैसे, यूनाइटेड किंगडम) एक देश नहीं हैं. भले ही, उनमें autocomplete वैल्यू हो.
चौथा चरण: खरीदारों को शिपिंग और बिलिंग के पते आसानी से डालने की सुविधा देना
आपने पते का एक बेहतरीन फ़ॉर्म बनाया है, लेकिन अगर आपकी साइट को शिपिंग और बिलिंग के लिए एक से ज़्यादा पते की ज़रूरत है, तो क्या होगा? खरीदारों को शिपिंग और बिलिंग के पते डालने की सुविधा देने के लिए, अपना फ़ॉर्म अपडेट करें. डेटा एंट्री को ज़्यादा से ज़्यादा तेज़ और आसान कैसे बनाया जा सकता है,
खास तौर पर, जब दोनों पते एक जैसे हों? इस कोडलैब के साथ दिए गए लेख में, एक से ज़्यादा पतों को मैनेज करने की तकनीकों के बारे में बताया गया है.
कुछ भी करें, सही autocomplete वैल्यू का इस्तेमाल करना न भूलें!
पांचवां चरण: टेलीफ़ोन नंबर वाला फ़ील्ड जोड़ना
टेलीफ़ोन नंबर का इनपुट जोड़ने के लिए, फ़ॉर्म में यह कोड जोड़ें:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
फ़ोन नंबर के लिए, एक ही इनपुट का इस्तेमाल करें: नंबर को अलग-अलग हिस्सों में न बांटें. इससे उपयोगकर्ताओं के लिए, डेटा डालना या कॉपी करके चिपकाना आसान हो जाता है. साथ ही, पुष्टि करने की प्रोसेस भी आसान हो जाती है. साथ ही, ब्राउज़र में डेटा अपने-आप भरने की सुविधा भी चालू हो जाती है.
फ़ोन नंबर डालने के दौरान उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, दो एट्रिब्यूट का इस्तेमाल किया जा सकता है:
type="tel"से यह पक्का होता है कि मोबाइल इस्तेमाल करने वालों को सही कीबोर्ड मिलता है.enterkeyhint="done", मोबाइल कीबोर्ड के Enter बटन का लेबल सेट करता है, ताकि यह पता चल सके कि यह आखिरी फ़ील्ड है और फ़ॉर्म को सबमिट किया जा सकता है. डिफ़ॉल्ट रूप से, यहnextहोता है.
आपका पूरा पता वाला फ़ॉर्म अब ऐसा दिखेगा:
- अपने फ़ॉर्म को अलग-अलग डिवाइसों पर आज़माएं. आपको किन डिवाइसों और ब्राउज़र को टारगेट करना है? फ़ॉर्म को कैसे बेहतर बनाया जा सकता है?
अलग-अलग डिवाइसों पर अपने फ़ॉर्म की जांच करने के कई तरीके हैं:
- मोबाइल डिवाइसों को सिम्युलेट करने के लिए, Chrome DevTools के डिवाइस मोड का इस्तेमाल करें.
- अपने कंप्यूटर से फ़ोन पर यूआरएल भेजें.
- अलग-अलग डिवाइसों और ब्राउज़र पर जांच करने के लिए, BrowserStack जैसी सेवा का इस्तेमाल करें.
आगे बढ़ना
Analytics और रीयल यूज़र मॉनिटरिंग: अपने फ़ॉर्म डिज़ाइन की परफ़ॉर्मेंस और इस्तेमाल करने की सुविधा को चालू करें, ताकि रीयल यूज़र के लिए उसकी जांच की जा सके और उसे मॉनिटर किया जा सके. साथ ही, यह भी देखा जा सके कि किए गए बदलाव सही हैं या नहीं. आपको पेज के आंकड़ों (पेज को पूरा किए बिना कितने प्रतिशत उपयोगकर्ता आपके पते के फ़ॉर्म से बाउंस करते हैं? उपयोगकर्ता आपके पते के फ़ॉर्म वाले पेजों पर कितनी देर बिताते हैं?) और इंटरैक्शन के आंकड़ों (उपयोगकर्ता किन पेज कॉम्पोनेंट के साथ इंटरैक्ट करते हैं या नहीं?) के साथ-साथ, पेज लोड होने में लगने वाले समय और अन्य वेब विटल की निगरानी करनी चाहिए
आपके उपयोगकर्ता कहां से हैं? वे अपने पते को किस तरह फ़ॉर्मैट करते हैं? वे पते के कॉम्पोनेंट, जैसे कि ज़िप या पिन कोड के लिए कौनसे नाम इस्तेमाल करते हैं? Frank's Compulsive Guide to Postal Addresses में, 200 से ज़्यादा देशों के पते के फ़ॉर्मैट के बारे में ज़्यादा जानकारी देने वाले लिंक और दिशा-निर्देश मिलते हैं.
देश के सिलेक्टर, इस्तेमाल में आसान नहीं हैं. आइटम की लंबी सूची के लिए, चुनिंदा एलिमेंट इस्तेमाल करने से बचना सबसे अच्छा है. साथ ही, आईएसओ 3166 देश कोड स्टैंडर्ड में फ़िलहाल 249 देश शामिल हैं!
<select>के बजाय, Baymard Institute का देश चुनने वाला टूल जैसे किसी अन्य विकल्प का इस्तेमाल किया जा सकता है.क्या ज़्यादा आइटम वाली सूचियों के लिए, बेहतर सिलेक्टर डिज़ाइन किया जा सकता है? आपके डिज़ाइन को कई डिवाइसों और प्लैटफ़ॉर्म पर ऐक्सेस किया जा सकता है, यह कैसे पक्का किया जा सकता है? (
<select>एलिमेंट, बड़ी संख्या में आइटम के लिए ठीक से काम नहीं करता. हालांकि, कम से कम इसे सभी ब्राउज़र और सहायक डिवाइसों पर इस्तेमाल किया जा सकता है!)<input type="country" /> ब्लॉग पोस्ट में, देश चुनने वाले टूल को स्टैंडर्ड बनाने की जटिलता के बारे में बताया गया है. देश के नामों को स्थानीय भाषा में बदलने में भी समस्याएं आ सकती हैं. देशों की सूचियों में एक टूल है, जिसकी मदद से देशों के कोड और नामों को कई भाषाओं और फ़ॉर्मैट में डाउनलोड किया जा सकता है.