ऐसा फ़ॉर्म बनाएं जिससे उपयोगकर्ताओं के लिए, डेस्कटॉप और मोबाइल पर पते का डेटा डालना आसान हो. पक्का करें कि फ़ॉर्म में, ब्राउज़र में पहले से मौजूद सुविधाओं का ज़्यादा से ज़्यादा इस्तेमाल किया गया हो. जैसे, ऑटोमैटिक तरीके से भरने, पुष्टि करने, और डेटा डालने से जुड़ी पाबंदियां.
इन्हें कैसे लागू करें
पते के फ़ॉर्म को सही तरीके से बनाने के लिए, सबसे ज़रूरी दिशा-निर्देश यहां दिए गए हैं.
सही और मान्य एचटीएमएल का इस्तेमाल करना
फ़ॉर्म बनाने के लिए, एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा इस्तेमाल करें:
<form>,<input>,<label>, और<button>type,autocomplete, औरinputmode
इनसे ब्राउज़र में पहले से मौजूद सुविधाएं चालू होती हैं, सुलभता बेहतर होती है, और मार्कअप को बेहतर तरीके से समझा जा सकता है.
डेटा डालने के लिए, फ़ॉर्म फ़ील्ड को लेबल करने के लिए <label> एलिमेंट का इस्तेमाल करना
किसी <input>, <select> या <textarea> को लेबल करने के लिए, <label> का इस्तेमाल करें. लेबल के for एट्रिब्यूट को इनपुट के id एट्रिब्यूट की वैल्यू के बराबर वैल्यू देकर, लेबल को इनपुट से जोड़ें.
एचटीएमएल एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना
उपयोगकर्ताओं के लिए डेटा डालना आसान बनाएं. इसके लिए, सही <input> एलिमेंट <type> एट्रिब्यूट का इस्तेमाल करें, ताकि मोबाइल पर सही कीबोर्ड उपलब्ध कराया जा सके. साथ ही, ब्राउज़र से पहले से मौजूद बुनियादी पुष्टि की सुविधा चालू करें.
ईमेल पतों के लिए हमेशा type="email" और फ़ोन नंबर के लिए type="tel" का इस्तेमाल करें.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
हर <input>, <select>, और <textarea> एलिमेंट में सही autocomplete एट्रिब्यूट होना चाहिए. इससे सुलभता को बेहतर बनाने और उपयोगकर्ताओं को डेटा फिर से डालने से बचने में मदद मिलती है.
बटनों को मददगार बनाएं
बटन के लिए <button> का इस्तेमाल करें. <input type="submit"> का भी इस्तेमाल किया जा सकता है. हालांकि, बटन के तौर पर div या किसी अन्य एलिमेंट का इस्तेमाल न करें. बटन एलिमेंट, सुलभता से जुड़ी सुविधाएं देते हैं. इनमें फ़ॉर्म सबमिट करने की सुविधा पहले से मौजूद होती है. साथ ही, इन्हें आसानी से स्टाइल किया जा सकता है.
फ़ॉर्म सबमिट करने वाले हर बटन को एक ऐसी वैल्यू दें जिससे पता चले कि वह क्या करता है. चेकआउट के हर चरण के लिए, जानकारी देने वाले कॉल-टू-ऐक्शन का इस्तेमाल करें. इससे प्रोग्रेस दिखती है और अगला चरण साफ़ तौर पर पता चलता है. उदाहरण के लिए, डिलीवरी के पते वाले फ़ॉर्म पर मौजूद 'सबमिट करें' बटन को जारी रखें या सेव करें के बजाय, पेमेंट के लिए आगे बढ़ें के तौर पर लेबल करें.
जहां हो सके वहां नाम के लिए एक ही इनपुट फ़ील्ड का इस्तेमाल करें
अपने उपयोगकर्ताओं को एक ही इनपुट का इस्तेमाल करके अपना नाम डालने की अनुमति दें. हालांकि, अगर आपके पास नाम, सरनेम, सम्मानसूचक शब्द या नाम के अन्य हिस्सों को अलग-अलग सेव करने की कोई ठोस वजह है, तो ऐसा किया जा सकता है. नाम के लिए एक ही फ़ील्ड का इस्तेमाल करने से, फ़ॉर्म भरना आसान हो जाता है. इससे कट-ऐंड-पेस्ट करने की सुविधा चालू हो जाती है और ऑटोमैटिक तरीके से भरने की सुविधा का इस्तेमाल करना आसान हो जाता है.
अंतरराष्ट्रीय नामों को अनुमति दें. पुष्टि करने के लिए, ऐसे रेगुलर एक्सप्रेशन का इस्तेमाल करने से बचें जो सिर्फ़ लैटिन वर्णों से मैच करते हों. 'सिर्फ़ लैटिन' विकल्प चुनने पर, उन उपयोगकर्ताओं को शामिल नहीं किया जाता जिनके नाम या पते में ऐसे वर्ण शामिल होते हैं जो लैटिन वर्णमाला में नहीं हैं. इसके बजाय, यूनिकोड लेटर मैचिंग की अनुमति दें. साथ ही, पक्का करें कि आपका बैकएंड, इनपुट और आउटपुट, दोनों के तौर पर यूनिकोड को सुरक्षित तरीके से इस्तेमाल करता हो. मॉडर्न ब्राउज़र, रेगुलर एक्सप्रेशन में यूनिकोड का इस्तेमाल करने की सुविधा देते हैं.
अलग-अलग फ़ॉर्मैट में पते डालने की अनुमति दें
पते का फ़ॉर्म बनाते समय, पते के अलग-अलग फ़ॉर्मैट का ध्यान रखें. ऐसा तब भी करें, जब फ़ॉर्म किसी एक देश के लिए बनाया जा रहा हो. "सामान्य" पतों के बारे में अनुमान न लगाएं.
अगर हो सके, तो मोहल्ले के पते के लिए एक ही <textarea> एलिमेंट का इस्तेमाल करें.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
यह स्थानीय और अंतरराष्ट्रीय पतों के अलग-अलग फ़ॉर्मैट के लिए सबसे सही विकल्प है.
अगर आपके डेटा मॉडल को पते की अलग-अलग लाइनों की ज़रूरत है, तो हर लाइन के लिए एक <input> का इस्तेमाल करें. साथ ही, address-line1, address-line2 (और ज़रूरत पड़ने पर, address-line3) autocomplete टोकन का इस्तेमाल करें, ताकि जानकारी अपने-आप भरने की सुविधा अब भी काम करे. मोहल्ले के पते को ऐसे इनपुट में न बांटें जिनमें ये टोकन न हों. साथ ही, सिर्फ़ पहली लाइन को ज़रूरी बनाएं.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
उपयोगकर्ताओं को गलती से डेटा फ़ील्ड छूटने से बचाने में मदद करना
ज़रूरी फ़ील्ड में required एट्रिब्यूट जोड़ें.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
फ़ॉलबैक रणनीतियां
जानकारी अपने-आप भरने की सुविधा, परतदार वृद्धि है. जिन ब्राउज़र में जानकारी अपने-आप भरने की सुविधा काम नहीं करती है उनमें उपयोगकर्ताओं को अपने पते की जानकारी मैन्युअल तरीके से डालनी होगी. सिमेंटिक एचटीएमएल की पाबंदियां (जैसे, type, inputmode, और required), स्टैंडर्ड फ़ॉर्म की पुष्टि के तौर पर सही तरीके से काम करती रहेंगी.