पते वाले फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब

Sam Dutton

ऐसा फ़ॉर्म कैसे डिज़ाइन किया जा सकता है जो कई तरह के नामों और पते के फ़ॉर्मैट के साथ अच्छी तरह काम करे? छोटी-मोटी समस्याएं उपयोगकर्ताओं को परेशान करती हैं और उनकी वजह से वे आपकी साइट छोड़कर जा सकती हैं. इसके अलावा, वे खरीदारी या साइन-अप की प्रक्रिया पूरी न कर सकते हैं.

यह कोडलैब आपको एक ऐसा फ़ॉर्म बनाने का तरीका बताता है जिसे आसानी से इस्तेमाल किया जा सके और वह ज़्यादातर उपयोगकर्ताओं के लिए आसानी से काम करे.

पहला चरण: एचटीएमएल एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना

कोडलैब के इस हिस्से की शुरुआत आपको एक खाली फ़ॉर्म से करनी होगी. आपको बस एक हेडिंग और बटन उपलब्ध कराना होगा. इसके बाद, इनपुट जोड़ना शुरू किया जा सकता है. (सीएसएस और कुछ JavaScript पहले से ही शामिल हैं.)

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

• अपने <form> एलिमेंट में, इस कोड के साथ नाम वाला फ़ील्ड जोड़ें:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

यह सिर्फ़ एक नाम फ़ील्ड के लिए मुश्किल और दोहराव वाला लग सकता है, लेकिन यह पहले से ही बहुत कुछ करता है.

आपने label के for एट्रिब्यूट का मिलान input के name या id से करके, label को input से जोड़ा है. किसी लेबल पर टैप या क्लिक करने से फ़ोकस उसके इनपुट पर ले जाता है, जिससे इनपुट के मुकाबले उसका टारगेट बहुत बड़ा होता है—यह उंगलियों, अंगूठों, और माउस के क्लिक के लिए अच्छा होता है! जब लेबल या लेबल के इनपुट पर फ़ोकस होता है, तब स्क्रीन रीडर लेबल के टेक्स्ट के बारे में बताता है.

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} \-\.]+" ऐसे रेगुलर एक्सप्रेशन का इस्तेमाल करता है जो यूनिकोड अक्षर वाले वर्ण, हाइफ़न, और पीरियड (फ़ुल स्टॉप) का इस्तेमाल करने की अनुमति देता है. इसका मतलब है कि Françoise या Jörg जैसे नाम को 'अमान्य' की कैटगरी में नहीं रखा जाता. ऐसा तब नहीं होता है, जब \w वैल्यू का इस्तेमाल किया जाता है, जिसमें [सिर्फ़ लैटिन अक्षरों के वर्णों को इस्तेमाल करने की अनुमति होती है.

• required का मतलब है... ज़रूरी है! ब्राउज़र इस फ़ील्ड के लिए, डेटा के बिना फ़ॉर्म को सबमिट करने की अनुमति नहीं देगा. साथ ही, अगर आपने इनपुट सबमिट करने की कोशिश की, तो उसे चेतावनी दी जाएगी और उसे हाइलाइट किया जाएगा. अलग से किसी कोड की ज़रूरत नहीं है!

यह पता लगाने के लिए कि फ़ॉर्म इन एट्रिब्यूट के साथ और उनके बिना कैसे काम करता है, डेटा डालकर देखें:

• ऐसी वैल्यू डालें जो pattern एट्रिब्यूट के लिए सही न हों.
• खाली इनपुट के साथ फ़ॉर्म सबमिट करने की कोशिश करें. आपको पहले से मौजूद ब्राउज़र की सुविधाओं के इस्तेमाल से जुड़ी चेतावनी दिखेगी. इस चेतावनी में, खाली ज़रूरी फ़ील्ड और उस पर फ़ोकस सेट करने के बारे में बताया जाएगा.

चरण 3: अपने फ़ॉर्म में ज़रूरत के हिसाब से पता फ़ील्ड जोड़ें

पते का फ़ील्ड जोड़ने के लिए, अपने फ़ॉर्म में यह कोड जोड़ें:

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

• आपके उपयोगकर्ता कहां रहते हैं? वे अपना पता कैसे फ़ॉर्मैट करते हैं? वे ज़िप या पिन कोड जैसे पते कॉम्पोनेंट के लिए किन नामों का इस्तेमाल करते हैं? डाक पते के लिए फ़्रैंक की कंपल्सिव गाइड में 200 से ज़्यादा देशों के पते के फ़ॉर्मैट के बारे में काम के लिंक और ज़रूरी दिशा-निर्देश दिए गए हैं.

• देश चुनने के टूल खराब उपयोगिता के लिए बदनाम हैं. आइटम की लंबी सूची के लिए चुनिंदा एलिमेंट का इस्तेमाल न करना ही सबसे सही तरीका है. ISO 3166 देश के कोड वाले स्टैंडर्ड में फ़िलहाल, 249 देशों की सूची दी गई है! <select> के बजाय, बेमार्ड इंस्टिट्यूट के देश चुनने का विकल्प चुना जा सकता है.

  क्या आप कई आइटम वाली सूचियों के लिए एक बेहतर सिलेक्टर बना सकते हैं? यह कैसे पक्का किया जा सकता है कि आपके डिज़ाइन को अलग-अलग डिवाइसों और प्लैटफ़ॉर्म पर ऐक्सेस किया जा सके? (<select> एलिमेंट बड़ी संख्या में आइटम के लिए ठीक से काम नहीं करता है, लेकिन कम से कम इसका इस्तेमाल करीब-करीब सभी ब्राउज़र और सहायक डिवाइसों पर किया जा सकता है!)

  ब्लॉग पोस्ट <input type="country" /> में देश चुनने के लिए स्टैंडर्ड तय करने की जटिलता पर चर्चा की गई है. देशों के नामों को स्थानीय भाषा में लिखना भी समस्या भरा हो सकता है. देशों की सूची में एक टूल है, जिससे देश के कोड और नाम कई भाषाओं में, कई फ़ॉर्मैट में डाउनलोड किए जा सकते हैं.