ऐसा फ़ॉर्म कैसे डिज़ाइन किया जा सकता है जो अलग-अलग नामों और पते के फ़ॉर्मैट के लिए सही तरीके से काम करे? फ़ॉर्म में छोटी-मोटी गड़बड़ियां होने पर, उपयोगकर्ता परेशान हो जाते हैं. इससे वे आपकी साइट छोड़ सकते हैं या खरीदारी या साइन अप करने की प्रोसेस पूरी नहीं कर सकते.
इस कोडलैब में, आसानी से इस्तेमाल होने वाला और ऐक्सेस किया जा सकने वाला ऐसा फ़ॉर्म बनाने का तरीका बताया गया है जो ज़्यादातर उपयोगकर्ताओं के लिए सही काम करता है.
पहला चरण: एचटीएमएल एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा लेना
कोडलैब के इस हिस्से को खाली फ़ॉर्म से शुरू किया जाएगा. इसमें सिर्फ़ एक हेडिंग और एक बटन होगा. इसके बाद, इनपुट जोड़ना शुरू किया जा सकता है. (सीएसएस और थोड़ी सी 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" /> ब्लॉग पोस्ट में, देश चुनने वाले टूल को स्टैंडर्ड बनाने की जटिलता के बारे में बताया गया है. देश के नामों को स्थानीय भाषा में बदलने में भी समस्याएं आ सकती हैं. देशों की सूचियों में, कई भाषाओं और फ़ॉर्मैट में देश के कोड और नाम डाउनलोड करने के लिए एक टूल है.