साइन-अप फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र की सुविधाओं का इस्तेमाल करें. इससे, सुरक्षित, सुलभ, और इस्तेमाल करने में आसान फ़ॉर्म बनाए जा सकते हैं.
अगर उपयोगकर्ताओं को कभी आपकी साइट पर साइन अप करना पड़े, तो साइन-अप फ़ॉर्म का डिज़ाइन अच्छा होना ज़रूरी है. यह बात खास तौर पर उन लोगों के लिए सही है जो खराब इंटरनेट कनेक्शन का इस्तेमाल कर रहे हैं, मोबाइल पर हैं, जल्दी में हैं या तनाव में हैं. खराब तरीके से डिज़ाइन किए गए साइन-अप फ़ॉर्म पर बाउंस रेट ज़्यादा होता है. हर बाउंस का मतलब है कि आपने एक ग्राहक खो दिया और एक उपयोगकर्ता को निराश किया. इसका मतलब सिर्फ़ यह नहीं है कि आपने साइन-अप करने का एक मौका गंवा दिया.
इन्हें कैसे लागू करें
साइन-अप फ़ॉर्म बनाने के लिए, सबसे ज़रूरी दिशा-निर्देश यहां दिए गए हैं.
सही और मान्य एचटीएमएल का इस्तेमाल करना
फ़ॉर्म बनाने के लिए, एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा इस्तेमाल करें:
<form>,<input>,<label>, और<button>type,autocomplete, औरinputmode
इनसे ब्राउज़र में पहले से मौजूद सुविधाएं चालू होती हैं, सुलभता बेहतर होती है, और मार्कअप को बेहतर तरीके से समझा जा सकता है.
डेटा डालने के लिए, फ़ॉर्म फ़ील्ड को लेबल करने के लिए <label> एलिमेंट का इस्तेमाल करना
किसी <input>, <select> या <textarea> को लेबल करने के लिए, <label> का इस्तेमाल करें. लेबल के for एट्रिब्यूट को इनपुट के id एट्रिब्यूट की वैल्यू के बराबर वैल्यू देकर, लेबल को इनपुट से जोड़ें.
एचटीएमएल एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना
उपयोगकर्ताओं के लिए डेटा डालना आसान बनाएं. इसके लिए, सही <input> एलिमेंट <type> एट्रिब्यूट का इस्तेमाल करें, ताकि मोबाइल पर सही कीबोर्ड उपलब्ध कराया जा सके. साथ ही, ब्राउज़र से पहले से मौजूद बुनियादी पुष्टि की सुविधा चालू करें.
ईमेल पतों के लिए हमेशा type="email" और फ़ोन नंबर के लिए type="tel" का इस्तेमाल करें.
हर <input>, <select>, और <textarea> एलिमेंट में सही autocomplete एट्रिब्यूट होना चाहिए. इससे सुलभता को बेहतर बनाने और उपयोगकर्ताओं को डेटा फिर से डालने से बचने में मदद मिलती है.
उपयोगकर्ता नाम और ईमेल इनपुट में आइडेंटिफ़ायर होते हैं, न कि टेक्स्ट. spellcheck="false" जोड़ें, ताकि ब्राउज़र उन्हें किसी ऐसी चीज़ में फिर से न लिखे जो खाते से मैच न हो. input type="email" के लिए, autocorrect और autocapitalize हमेशा बंद रहते हैं. हालांकि, ईमेल के अलावा अन्य उपयोगकर्ता नामों के लिए इनकी ज़रूरत होती है.
बटनों को मददगार बनाएं
बटन के लिए <button> का इस्तेमाल करें. <input type="submit"> का भी इस्तेमाल किया जा सकता है. हालांकि, बटन के तौर पर div या किसी अन्य एलिमेंट का इस्तेमाल न करें. बटन एलिमेंट, सुलभता से जुड़ी सुविधाएं देते हैं. इनमें फ़ॉर्म सबमिट करने की सुविधा पहले से मौजूद होती है. साथ ही, इन्हें आसानी से स्टाइल किया जा सकता है.
फ़ॉर्म सबमिट करने वाले हर बटन को एक ऐसी वैल्यू दें जिससे पता चले कि वह क्या करता है. साफ़ तौर पर समझ में आने वाले लेबल का इस्तेमाल करें. उदाहरण के लिए, जारी रखें या सबमिट करें के बजाय, खाता बनाएं या साइन अप करें का इस्तेमाल करें.
जहां हो सके वहां नाम के लिए एक ही इनपुट फ़ील्ड का इस्तेमाल करें
अपने उपयोगकर्ताओं को एक ही इनपुट का इस्तेमाल करके अपना नाम डालने की अनुमति दें. हालांकि, अगर आपके पास नाम, सरनेम, सम्मानसूचक शब्द या नाम के अन्य हिस्सों को अलग-अलग सेव करने की कोई ठोस वजह है, तो ऐसा किया जा सकता है. नाम के लिए एक ही फ़ील्ड का इस्तेमाल करने से, फ़ॉर्म भरना आसान हो जाता है. इससे कट-ऐंड-पेस्ट करने की सुविधा चालू हो जाती है और ऑटोमैटिक तरीके से भरने की सुविधा का इस्तेमाल करना आसान हो जाता है.
अंतरराष्ट्रीय नामों को अनुमति दें. पुष्टि करने के लिए, ऐसे रेगुलर एक्सप्रेशन का इस्तेमाल करने से बचें जो सिर्फ़ लैटिन वर्णों से मैच करते हों. 'सिर्फ़ लैटिन' विकल्प चुनने पर, उन उपयोगकर्ताओं को शामिल नहीं किया जाता जिनके नाम या पते में ऐसे वर्ण शामिल होते हैं जो लैटिन वर्णमाला में नहीं हैं. इसके बजाय, यूनिकोड लेटर मैचिंग की अनुमति दें. साथ ही, पक्का करें कि आपका बैकएंड, इनपुट और आउटपुट, दोनों के तौर पर यूनिकोड को सुरक्षित तरीके से इस्तेमाल करता हो. मॉडर्न ब्राउज़र, रेगुलर एक्सप्रेशन में यूनिकोड का इस्तेमाल करने की सुविधा देते हैं.
साइन-अप की प्रोग्रेस दिखाना
साइन-अप के हर चरण के लिए, पेज की हेडिंग और बटन की जानकारी देने वाली वैल्यू का इस्तेमाल करें. इससे यह साफ़ तौर पर पता चलता है कि अब क्या करना है और अगला चरण क्या है.
मोबाइल कीबोर्ड के Enter बटन का लेबल सेट करने के लिए, फ़ॉर्म इनपुट पर enterkeyhint एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, कई पेजों वाले फ़ॉर्म में enterkeyhint="previous" और enterkeyhint="next" का इस्तेमाल करें. फ़ॉर्म में आखिरी इनपुट के लिए enterkeyhint="done" और खोज इनपुट के लिए enterkeyhint="search" का इस्तेमाल करें.
उपयोगकर्ताओं को साइन-अप डेटा फिर से डालने से बचाना
साइन-अप फ़ॉर्म में autocomplete की सही वैल्यू जोड़ें.
इससे ब्राउज़र, उपयोगकर्ताओं की मदद कर पाते हैं. इसके लिए, वे साइन-अप की जानकारी को सुरक्षित तरीके से सेव करते हैं और फ़ॉर्म डेटा को सही तरीके से डालते हैं. ऑटोकंप्लीट की सुविधा के बिना, उपयोगकर्ता साइन-अप की जानकारी को किसी कागज़ पर लिखकर रख सकते हैं या साइन-अप डेटा को अपने डिवाइस पर असुरक्षित तरीके से सेव कर सकते हैं.
ध्यान से पुष्टि करें
रीयलटाइम में और फ़ॉर्म सबमिट करने से पहले, डेटा एंट्री की पुष्टि करें. ईमेल इनपुट के लिए type="email" का इस्तेमाल करें — ब्राउज़र, फ़ॉर्मैट की पुष्टि अपने-आप कर देगा. पासवर्ड के लिए, pattern एट्रिब्यूट का इस्तेमाल करें. इससे पासवर्ड को मज़बूत बनाने की ज़रूरी शर्तें लागू की जा सकती हैं. साथ ही, पुष्टि न होने पर गड़बड़ी के मैसेज साफ़ तौर पर दिखाए जा सकते हैं. ज़रूरी फ़ील्ड में required एट्रिब्यूट जोड़ें, ताकि फ़ॉर्म को खाली सबमिट न किया जा सके.
साइन-अप को उसके <form> एलिमेंट में डालें
जब उपयोगकर्ताओं से डेटा डालने के लिए कहा जाए, तो हमेशा <form> एलिमेंट का इस्तेमाल करें
इनपुट को <div> में रैप न करें और इनपुट डेटा सबमिशन को पूरी तरह से JavaScript की मदद से मैनेज करें. आम तौर पर, <form> एलिमेंट का इस्तेमाल करना बेहतर होता है. इससे आपकी साइट को स्क्रीन रीडर और अन्य सहायक डिवाइसों के लिए ऐक्सेस किया जा सकता है. साथ ही, ब्राउज़र में पहले से मौजूद कई सुविधाएं चालू हो जाती हैं. इसके अलावा, पुराने ब्राउज़र के लिए बुनियादी फ़ंक्शन वाला साइन-अप बनाना आसान हो जाता है. साथ ही, JavaScript के काम न करने पर भी यह काम कर सकता है.
इनपुट को दोहराएं नहीं
कुछ साइटें, उपयोगकर्ताओं को ईमेल या पासवर्ड दो बार डालने के लिए मजबूर करती हैं. इससे कुछ उपयोगकर्ताओं के लिए गड़बड़ियां कम हो सकती हैं. हालांकि, इससे सभी उपयोगकर्ताओं को ज़्यादा काम करना पड़ता है और सेशन बीच में छोड़ने की दर बढ़ जाती है. जिन ब्राउज़र में ईमेल पते ऑटोमैटिक तरीके से भरने या मज़बूत पासवर्ड सुझाने की सुविधा होती है उनमें दो बार पासवर्ड डालने के लिए कहना सही नहीं है. बेहतर होगा कि आप उपयोगकर्ताओं को उनके ईमेल पते की पुष्टि करने की सुविधा दें. आपको ऐसा करना ही होगा. साथ ही, ज़रूरत पड़ने पर उनके लिए पासवर्ड रीसेट करना आसान बनाएं.
पासवर्ड निजी रखें—हालांकि, उपयोगकर्ताओं को पासवर्ड देखने की अनुमति दें
पासवर्ड इनपुट में type="password" होना चाहिए, ताकि पासवर्ड टेक्स्ट को छिपाया जा सके. साथ ही, ब्राउज़र को यह समझने में मदद मिल सके कि इनपुट, पासवर्ड के लिए है. (ध्यान दें कि ब्राउज़र, इनपुट फ़ील्ड की भूमिकाओं को समझने और पासवर्ड सेव करने का विकल्प देने या न देने का फ़ैसला लेने के लिए, कई तरह की तकनीकों का इस्तेमाल करते हैं.)
आपको पासवर्ड दिखाएं टॉगल जोड़ना चाहिए, ताकि उपयोगकर्ता अपने डाले गए टेक्स्ट की जांच कर सकें. साथ ही, पासवर्ड भूल गए लिंक जोड़ना न भूलें.
मोबाइल उपयोगकर्ताओं को सही कीबोर्ड उपलब्ध कराना
मोबाइल उपयोगकर्ताओं को सही कीबोर्ड देने के लिए, <input type="email"> का इस्तेमाल करें. साथ ही, ब्राउज़र से ईमेल पते की पुष्टि करने की बुनियादी सुविधा चालू करें… इसके लिए, JavaScript की ज़रूरत नहीं है!
अगर आपको ईमेल पते के बजाय टेलीफ़ोन नंबर का इस्तेमाल करना है, तो <input type="tel"> मोबाइल पर टेलीफ़ोन कीपैड चालू करता है. ज़रूरत पड़ने पर, inputmode एट्रिब्यूट का भी इस्तेमाल किया जा सकता है: पिन नंबर के लिए, inputmode="numeric" सबसे सही है.
मोबाइल कीबोर्ड को साइन अप बटन को छिपाने से रोकना
अगर सावधानी न बरती जाए, तो मोबाइल कीबोर्ड आपके फ़ॉर्म को कवर कर सकते हैं या साइन अप बटन को कुछ हद तक छिपा सकते हैं. हो सकता है कि उपयोगकर्ता, समस्या को समझने से पहले ही ऐप्लिकेशन का इस्तेमाल करना बंद कर दें.
जहां तक हो सके, साइन-अप पेज पर सबसे ऊपर सिर्फ़ ईमेल (या फ़ोन नंबर), पासवर्ड डालने के लिए फ़ील्ड, और साइन अप बटन दिखाएं. अन्य कॉन्टेंट को इसके नीचे रखें.
उपयोगकर्ताओं को डेटा फिर से डालने से बचाना
आप ब्राउज़र स्टोरेज में डेटा को सही तरीके से सेव करने और इनपुट को ऑटोमैटिक तरीके से भरने में मदद कर सकते हैं, ताकि उपयोगकर्ताओं को ईमेल और पासवर्ड डालने की ज़रूरत न पड़े. यह मोबाइल पर खास तौर पर ज़रूरी है. साथ ही, ईमेल इनपुट के लिए भी ज़रूरी है, क्योंकि इनमें सेशन बीच में छोड़ने की दर ज़्यादा होती है. इसके दो हिस्से हैं:
autocomplete,name,id, औरtypeएट्रिब्यूट की मदद से, ब्राउज़र को इनपुट की भूमिका समझने में मदद मिलती है. इससे डेटा को सेव किया जा सकता है, ताकि बाद में उसे ऑटोमैटिक तरीके से भरने के लिए इस्तेमाल किया जा सके. जानकारी अपने-आप भरने की सुविधा के लिए डेटा सेव करने की अनुमति देने के लिए, मॉडर्न ब्राउज़र को इनपुट कीnameयाidवैल्यू को स्टेबल रखना ज़रूरी है. यह वैल्यू, हर पेज लोड या साइट डिप्लॉयमेंट पर रैंडम तरीके से जनरेट नहीं होनी चाहिए. साथ ही, यह वैल्यूsubmitबटन वाले<form>एलिमेंट में होनी चाहिए.autocompleteएट्रिब्यूट की मदद से, ब्राउज़र सेव किए गए डेटा का इस्तेमाल करके, इनपुट को सही तरीके से ऑटोमैटिक भरते हैं.
ईमेल इनपुट के लिए autocomplete="username" का इस्तेमाल करें, क्योंकि username को मॉडर्न ब्राउज़र में पासवर्ड मैनेजर पहचानते हैं. हालांकि, आपको type="email" का इस्तेमाल करना चाहिए. इसके अलावा, id="email" और name="email" का इस्तेमाल भी किया जा सकता है. पासवर्ड इनपुट के लिए, सही autocomplete वैल्यू का इस्तेमाल करें. इससे ब्राउज़र को नए और मौजूदा पासवर्ड के बीच अंतर करने में मदद मिलती है.
नए पासवर्ड के लिए, autocomplete="new-password" का इस्तेमाल करें
ज़रूरी: साइन-अप फ़ॉर्म के लिए, autocomplete="new-password" का इस्तेमाल करें.
<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>
ब्राउज़र को मज़बूत पासवर्ड का सुझाव देने की अनुमति देना
मॉडर्न ब्राउज़र, ह्यूरिस्टिक का इस्तेमाल करके यह तय करते हैं कि पासवर्ड मैनेजर का यूज़र इंटरफ़ेस (यूआई) कब दिखाना है और मज़बूत पासवर्ड का सुझाव कब देना है.
ब्राउज़र में पहले से मौजूद पासवर्ड जनरेटर की मदद से, उपयोगकर्ताओं और डेवलपर को "मज़बूत पासवर्ड" बनाने की ज़रूरत नहीं पड़ती. ब्राउज़र, पासवर्ड को सुरक्षित तरीके से सेव कर सकते हैं और ज़रूरत पड़ने पर उन्हें ऑटोमैटिक तरीके से भर सकते हैं. इसलिए, उपयोगकर्ताओं को पासवर्ड याद रखने या डालने की ज़रूरत नहीं पड़ती. उपयोगकर्ताओं को ब्राउज़र में पहले से मौजूद पासवर्ड जनरेटर का इस्तेमाल करने के लिए बढ़ावा देने का मतलब है कि वे आपकी साइट पर एक यूनीक और मज़बूत पासवर्ड का इस्तेमाल करेंगे. साथ ही, वे ऐसे पासवर्ड का दोबारा इस्तेमाल नहीं करेंगे जो कहीं और हैक हो सकता है.
उपयोगकर्ताओं को गलती से इनपुट छूटने से बचाने में मदद करना
ईमेल और पासवर्ड, दोनों फ़ील्ड में required एट्रिब्यूट जोड़ें. मॉडर्न ब्राउज़र, छूटे हुए डेटा के लिए अपने-आप प्रॉम्प्ट देते हैं और फ़ोकस सेट करते हैं.
पासवर्ड चिपकाने की अनुमति दें
कुछ साइटें, पासवर्ड डालने वाले फ़ील्ड में टेक्स्ट चिपकाने की अनुमति नहीं देती हैं.
पासवर्ड चिपकाने की अनुमति न देने से, उपयोगकर्ताओं को परेशानी होती है. इससे, वे ऐसे पासवर्ड बनाते हैं जिन्हें याद रखना आसान हो. हालांकि, ऐसे पासवर्ड को हैक करना भी आसान होता है. यूके नैशनल साइबर सिक्योरिटी सेंटर जैसे संगठनों के मुताबिक, इससे सुरक्षा कम हो सकती है. उपयोगकर्ताओं को पासवर्ड चिपकाने की अनुमति न होने के बारे में तब पता चलता है, जब वे अपना पासवर्ड चिपकाने की कोशिश करते हैं. इसलिए, पासवर्ड चिपकाने की अनुमति न देने से, क्लिपबोर्ड की कमज़ोरियों से नहीं बचा जा सकता.
तीसरे पक्ष की मदद से लॉगिन करने की सुविधा देना
कई उपयोगकर्ता, ईमेल पते और पासवर्ड वाले साइन-अप फ़ॉर्म का इस्तेमाल करके, वेबसाइटों में साइन इन करना पसंद करते हैं. हालांकि, आपको उपयोगकर्ताओं को तीसरे पक्ष के आइडेंटिटी प्रोवाइडर का इस्तेमाल करके भी साइन इन करने की सुविधा देनी चाहिए. इसे फ़ेडरेटेड लॉगिन भी कहा जाता है.
इस तरीके के कई फ़ायदे हैं. फ़ेडरेटेड लॉगिन का इस्तेमाल करके खाता बनाने वाले उपयोगकर्ताओं से पासवर्ड मांगने, उन्हें पासवर्ड बताने या उनके पासवर्ड सेव करने की ज़रूरत नहीं होती.
फ़ेडरेटेड लॉगिन की मदद से, प्रोफ़ाइल की पुष्टि की गई अतिरिक्त जानकारी को भी ऐक्सेस किया जा सकता है. जैसे, ईमेल पता. इसका मतलब है कि उपयोगकर्ता को वह डेटा डालने की ज़रूरत नहीं है और आपको खुद पुष्टि करने की ज़रूरत नहीं है. फ़ेडरेटेड लॉगिन की सुविधा से, उपयोगकर्ताओं को नए डिवाइस पर साइन इन करने में भी आसानी होती है.
उपयोगकर्ता नाम चुनते समय सावधानी बरतें
जब तक आपको उपयोगकर्ता नाम की ज़रूरत न हो, तब तक उसे सेट करने की कोशिश न करें. उपयोगकर्ताओं को सिर्फ़ ईमेल पते (या फ़ोन नंबर) और पासवर्ड का इस्तेमाल करके, साइन अप और साइन इन करने की सुविधा दें. इसके अलावा, अगर वे चाहें, तो फ़ेडरेटेड लॉगिन की सुविधा भी दें. उन्हें कोई उपयोगकर्ता नाम चुनने और उसे याद रखने के लिए मजबूर न करें.
अगर आपकी साइट पर उपयोगकर्ता नाम की ज़रूरत है, तो उन पर बेवजह के नियम न लगाएं. साथ ही, उपयोगकर्ताओं को अपना उपयोगकर्ता नाम अपडेट करने से न रोकें. आपको अपने बैकएंड पर हर उपयोगकर्ता खाते के लिए एक यूनीक आईडी जनरेट करना चाहिए. यह आईडी, उपयोगकर्ता नाम जैसे निजी डेटा पर आधारित नहीं होना चाहिए.
साथ ही, उपयोगकर्ता नामों के लिए autocomplete="username" का इस्तेमाल करना न भूलें.
फ़ॉलबैक रणनीतियां
जानकारी अपने-आप भरने की सुविधा, परतदार वृद्धि है. ऑटोमैटिक तरीके से भरने की सुविधा के साथ काम न करने वाले ब्राउज़र में, उपयोगकर्ताओं को साइन-अप क्रेडेंशियल मैन्युअल तरीके से डालने होंगे. सिमैंटिक एचटीएमएल की पाबंदियां (जैसे कि type, inputmode, और required) अब भी सही तरीके से काम करेंगी. इससे उपयोगकर्ता के इनपुट की पुष्टि की जा सकेगी और सही वर्चुअल कीबोर्ड उपलब्ध कराए जा सकेंगे.