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

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 में पेज को फिर से लोड करें और नाम इनपुट में टैप या क्लिक करें. आपको क्या अंतर दिख रहा है?

ध्यान दें: क्या आपने कभी सोचा है कि Chrome में, ऑटोमैटिक भरने की सुविधा के सुझावों को कैसे मिटाया जाता है? * Windows: Shift + delete * Mac: Shift + fn + delete

आपको एक मामूली बदलाव दिखेगा: autocomplete="name" से, सुझाव अब खास वैल्यू हैं. इनका इस्तेमाल पहले ऐसे फ़ॉर्म इनपुट में किया जाता था जिसमें autocomplete="name" भी शामिल होता था. ब्राउज़र सिर्फ़ यह अनुमान नहीं लगाता कि क्या उचित हो सकता है: आप उसे नियंत्रित कर सकते हैं. आपको अपने ब्राउज़र में सेव किए गए नाम और पतों को देखने और उनमें बदलाव करने के लिए, मैनेज करें... का विकल्प भी दिखेगा.

अनुमानित वैल्यू या ऑटोकंप्लीट की सुविधा के साथ, ऑटोमैटिक भरने की सुविधा के लिए यूज़र इंटरफ़ेस (यूआई).

ध्यान दें: अगर input, select या textarea के लिए, अपने-आप पूरा होने वाली सही वैल्यू उपलब्ध है, तो आपको उसका इस्तेमाल करना चाहिए!

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

चेतावनी: यह कोडलैब, स्थानीय भाषा के अनुसार या अंतरराष्ट्रीय स्तर पर दिखाने की प्रक्रिया में कोई बदलाव नहीं करता है. आपके उपयोगकर्ता कहां रहते हैं, इसके आधार पर आपको पते के फ़ॉर्मैट के साथ-साथ, पते के कॉम्पोनेंट के लिए इस्तेमाल किए जाने वाले अलग-अलग नाम को भी ध्यान में रखना होगा. भले ही, वे एक ही भाषा में हों: ZIP, पिन कोड, आयरकोड या पिन? आपकी साइट के लिए, एक से ज़्यादा स्थान-भाषाओं को पसंद के मुताबिक बनाना ज़रूरी हो सकता है. हालांकि, इस कोडलैब में मौजूद पते के फ़ॉर्म को इस तरह डिज़ाइन किया गया है कि वह ज़रूरत के हिसाब से काम करे. साथ ही, यह कई पतों के लिए "अच्छी तरह" काम करेगा.

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

• ऐसी वैल्यू डालें जो 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 होता है).

Enter बटन लेबल सेट करने के लिए, enterkeyhint एट्रिब्यूट का इस्तेमाल करें: 'next' और 'edone'.

type="number" का इस्तेमाल करने से, नंबर बढ़ाने के लिए अप/डाउन ऐरो जुड़ जाता है. इससे टेलीफ़ोन, पेमेंट कार्ड या खाता नंबर जैसे डेटा का कोई फ़ायदा नहीं होता. इसके बजाय, आपको टेलीफ़ोन नंबर के लिए type="tel" का इस्तेमाल करना चाहिए. दूसरे नंबरों के लिए, type="text" का इस्तेमाल करें (या एट्रिब्यूट को छोड़ दें, क्योंकि text डिफ़ॉल्ट है) और मोबाइल पर अंकों वाला कीबोर्ड पाने के लिए, inputmode="numeric" जोड़ें.

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

आपका पूरा पता फ़ॉर्म अब कुछ ऐसा दिखेगा:

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

अलग-अलग डिवाइसों पर अपने फ़ॉर्म की जांच करने के कई तरीके हैं:

• मोबाइल डिवाइसों को सिम्युलेट करने के लिए, Chrome DevTools डिवाइस मोड का इस्तेमाल करें.
• अपने कंप्यूटर से अपने फ़ोन पर यूआरएल भेजें.
• कई तरह के डिवाइस और ब्राउज़र पर टेस्ट करने के लिए, BrowserStack जैसी किसी सेवा का इस्तेमाल करें.

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

आगे बढ़ना

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

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

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

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

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