साइन-इन फ़ॉर्म के सबसे सही तरीके

साइन-इन फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र की सुविधाओं का इस्तेमाल करें. ये फ़ॉर्म सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल में आसान होते हैं.

Sam Dutton

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

इसे आज़माएं: अगर आपको ट्यूटोरियल की मदद से इन सबसे सही तरीकों के बारे में जानना है, तो साइन इन फ़ॉर्म के सबसे सही तरीकों के लिए कोडलैब देखें.

यहां एक आसान तरीके से साइन-इन करने के फ़ॉर्म का उदाहरण दिया गया है. इसमें साइन-इन करने के सभी सबसे सही तरीकों के बारे में बताया गया है:

चेकलिस्ट

• काम के एचटीएमएल एलिमेंट का इस्तेमाल करना: <form>, <input>, <label>, और <button>.
• हर इनपुट को <label> से लेबल करें.
• पहले से मौजूद ब्राउज़र को ऐक्सेस करने के लिए एलिमेंट एट्रिब्यूट का इस्तेमाल करना सुविधाएं: type, name, autocomplete, और required.
• इनपुट name और id एट्रिब्यूट की ऐसी स्थिर वैल्यू दें जो नहीं बदलतीं पेज लोड या वेबसाइट डिप्लॉयमेंट के बीच में.
• साइन-इन को उसके अपने <form> में रखें तत्व के रूप में सेट है.
• यह पक्का करें कि फ़ॉर्म सबमिट हो गया है.
• autocomplete="new-password" और id="new-password" का इस्तेमाल इसके लिए करें और नए पासवर्ड के लिए पासवर्ड रीसेट करें.
• autocomplete="current-password" और id="current-password" का इस्तेमाल करें का इस्तेमाल करें.
• पासवर्ड दिखाएं सुविधा दें.
• इसके लिए aria-label और aria-describedby का इस्तेमाल करें पासवर्ड इनपुट.
• इनपुट को दो बार न जोड़ें.
• फ़ॉर्म इस तरह डिज़ाइन करें कि मोबाइल कीबोर्ड इनपुट को धुंधला न करे या बटन.
• पक्का करें कि फ़ॉर्म, मोबाइल पर इस्तेमाल किए जा सकते हों: आसान टेक्स्ट का इस्तेमाल करें, साथ ही, पक्का करें कि इनपुट और बटन टच टारगेट के तौर पर काम करने के लिए इतने बड़े हों.
• अपने साइन-अप और साइन-इन पेजों पर ब्रैंडिंग और स्टाइल बनाए रखें.
• फ़ील्ड के साथ-साथ लैब में भी जांच करें: पेज के आंकड़े बनाना, और उपयोगकर्ता पर आधारित परफ़ॉर्मेंस का आकलन किया जा सकता है. साइन-अप और साइन-इन फ़्लो.
• सभी ब्राउज़र और डिवाइसों पर टेस्ट करना: डिवाइस के फ़ॉर्म का व्यवहार अलग-अलग होता है काफ़ी अहम है.

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

सही एचटीएमएल का इस्तेमाल करना

जॉब के लिए बनाए गए एलिमेंट का इस्तेमाल करें: <form>, <label>, और <button>. ये सुविधाएं चालू करती हैं पहले से मौजूद ब्राउज़र की सुविधाओं, सुलभता को बेहतर बनाएं, और अपने इस्तेमाल किया जा सकता है.

<form> का इस्तेमाल करें

हो सकता है कि आप <div> में इनपुट को रैप करना और इनपुट डेटा को मैनेज करना चाहें पूरी तरह से JavaScript के साथ सबमिशन. आमतौर पर सादे पुराने का उपयोग करना बेहतर होता है <form> एलिमेंट. इससे आपकी साइट, स्क्रीन-रीडर और अन्य सहायक डिवाइसों को ऐक्सेस कर पाएगी यह डिवाइसों में, ब्राउज़र में मौजूद कई तरह की सुविधाओं को चालू करता है. साथ ही, यह प्रोसेस को आसान बनाता है के लिए बुनियादी सुविधाओं JavaScript काम नहीं कर रहा है.

संपूर्ण वेब पेज को एक ही फ़ॉर्म में रैप कर देना एक सामान्य गलती है, लेकिन इससे ब्राउज़र पासवर्ड मैनेजर और ऑटोमैटिक भरने की सुविधा को समस्याएं हो सकती हैं. किसी दूसरे <form> का इस्तेमाल करें जिसे फ़ॉर्म की ज़रूरत होती है. उदाहरण के लिए, अगर आपने एक ही पेज पर साइन-इन और कुछ खोजा है, तो आपको दो फ़ॉर्म एलिमेंट का इस्तेमाल करना चाहिए.

<label> का इस्तेमाल करें

किसी इनपुट को लेबल करने के लिए, <label> का इस्तेमाल करें!

<label for="email">Email</label>
<input id="email" …>

दो वजहें:

• लेबल पर टैप या क्लिक करने से फ़ोकस, उसके इनपुट पर ले जाता है. लेबल को किसी लेबल के for एट्रिब्यूट का इस्तेमाल करके, इनपुट के name या id के साथ डालें.
• स्क्रीन रीडर, लेबल या लेबल का इनपुट मिलने पर, लेबल टेक्स्ट को सूचना देता है फ़ोकस.

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

अपने इनपुट के ऊपर लेबल लगाना बेहतर होता है. इससे, लगातार विज्ञापन दिखाने की सुविधा चालू यह सुविधा Google के एआई से जनरेट होती है. रिसर्च, उपयोगकर्ताओं को तेज़ी से स्कैन करने की सुविधा देता है. आपको पूरी चौड़ाई वाले लेबल और इनपुट मिलते हैं, और लेबल और इनपुट की चौड़ाई को लेबल टेक्स्ट में फ़िट करने के लिए, उन्हें अडजस्ट करने की ज़रूरत नहीं होती.

लेबल और इनपुट की चौड़ाई, दोनों एक ही लाइन में होने पर सीमित होती है.

किसी इमेज में लेबल-पोज़िशन ग्लिच मोबाइल डिवाइस पर देख सकते हैं.

<button> का इस्तेमाल करें

<button> का इस्तेमाल करें बटन के लिए! बटन के एलिमेंट, ऐक्सेस करने लायक व्यवहार और ऐप्लिकेशन में पहले से मौजूद होने की सुविधा देते हैं सबमिट करने की सुविधा उपलब्ध कराता है. साथ ही, उन्हें आसानी से स्टाइल किया जा सकता है. कोई बात नहीं <div> या किसी बटन होने का दिखावा करने वाले किसी दूसरे एलिमेंट का इस्तेमाल करना.

पक्का करें कि 'सबमिट करें' बटन से पता चलता हो कि वह क्या करता है. उदाहरण के लिए, खाता बनाना या सबमिट करें या शुरू करें के बजाय, साइन इन करें.

पक्का करें कि फ़ॉर्म सबमिट हो गया हो

पासवर्ड मैनेजर को यह समझने में मदद करें कि फ़ॉर्म सबमिट कर दिया गया है. दो इस बारे में ज़्यादा जानें:

• किसी दूसरे पेज पर जाएं.
• History.pushState() या History.replaceState() की मदद से नेविगेशन को एम्युलेट करें, और पासवर्ड फ़ॉर्म को हटा दें.

XMLHttpRequest या fetch का अनुरोध करके, पक्का करें कि साइन इन किया जा चुका है जवाब में रिपोर्ट की जाती है और फ़ॉर्म को डीओएम से बाहर रखकर उसे भी हैंडल किया जाता है जिससे उपयोगकर्ता की सफलता का पता चलता है.

उपयोगकर्ता के टैप करने या क्लिक करने के बाद, साइन इन करें बटन को बंद करें इसे. कई उपयोगकर्ता कई बार बटन पर क्लिक करते हैं उन साइटों पर भी काम करती है जो तेज़ और रिस्पॉन्सिव हैं. इससे इंटरैक्शन धीमा हो जाता है और सर्वर लोड में जोड़ता है.

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

चेतावनी: फ़ॉर्म में बटन का डिफ़ॉल्ट टाइप submit है. अगर आपको किसी फ़ॉर्म में एक और बटन जोड़ना है (उदाहरण के लिए, पासवर्ड दिखाएं के लिए), तो type="button" जोड़ें. अगर ऐसा नहीं है, तो बटन पर क्लिक या टैप करने से फ़ॉर्म सबमिट हो जाएगा. किसी फ़ॉर्म फ़ील्ड में फ़ोकस होने के दौरान Enter कुंजी दबाने से, फ़ॉर्म में पहले submit बटन पर होने वाले क्लिक की नकल होती है. अगर फ़ॉर्म में सबमिट करें बटन से पहले कोई बटन शामिल किया जाता है और टाइप नहीं बताया जाता है, तो उस बटन पर फ़ॉर्म (submit) में मौजूद बटन का टाइप डिफ़ॉल्ट रूप से सेट हो जाएगा. साथ ही, फ़ॉर्म सबमिट होने से पहले, आपको क्लिक इवेंट मिल जाएगा. उदाहरण के लिए, हमारा डेमो देखें: फ़ॉर्म भरें, फिर Enter दबाएं.

इनपुट का दो बार इस्तेमाल न करें

कुछ साइटें उपयोगकर्ताओं को दो बार ईमेल या पासवर्ड डालने के लिए मजबूर करती हैं. इससे कम हो सकता है कुछ उपयोगकर्ताओं के लिए गड़बड़ियां होती हैं, लेकिन इसकी वजह से सभी उपयोगकर्ताओं के लिए ज़्यादा काम होता है और बढ़ोतरी होती है सेशन छोड़ना दरें. दो बार पूछने से भी कोई मतलब नहीं है कि ब्राउज़र में ईमेल पते अपने-आप कहां भरे जाते हैं या आपको मज़बूत पासवर्ड का सुझाव देना चाहिए. बेहतर होगा कि उपयोगकर्ताओं को उनके ईमेल की पुष्टि करने की सुविधा दें पता (आपको ऐसा फिर भी करना होगा) और उनके लिए अपने पासवर्ड डालें.

एलिमेंट एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना

असल में यहां काम होता है! ब्राउज़र में इनपुट एलिमेंट एट्रिब्यूट का इस्तेमाल करने वाली, पहले से मौजूद कई मददगार सुविधाएं होती हैं.

पासवर्ड निजी रखें—लेकिन अगर उपयोगकर्ता चाहें, तो उन्हें देखने की सुविधा दें

पासवर्ड टेक्स्ट छिपाने औरtype="password" आपके ब्राउज़र को पता चलता है कि इनपुट में पासवर्ड का इस्तेमाल किया गया है. (ध्यान दें कि ब्राउज़र इनपुट भूमिकाओं को समझने और तय करने के लिए अलग-अलग तरह की तकनीकों कि पासवर्ड सेव करने की सुविधा दी जाए या नहीं.)

आपको पासवर्ड दिखाएं टॉगल जोड़ना चाहिए, ताकि उपयोगकर्ता टेक्स्ट डालें—और पासवर्ड याद नहीं है लिंक जोड़ना न भूलें. यहां जाएं: पासवर्ड दिखाने की सुविधा चालू करें.

'Google साइन-इन' फ़ॉर्म में दिया गया पासवर्ड डालें: पासवर्ड दिखाएं आइकॉन और पासवर्ड याद नहीं है लिंक का इस्तेमाल करें.

मोबाइल उपयोगकर्ताओं को उनकी ज़रूरत के हिसाब से कीबोर्ड इस्तेमाल करना

मोबाइल उपयोगकर्ताओं को सही कीबोर्ड उपलब्ध कराने के लिए <input type="email"> का इस्तेमाल करें और ब्राउज़र के ज़रिए बुनियादी तौर पर पहले से मौजूद ईमेल पते की पुष्टि करने की सुविधा चालू करें... कोई JavaScript नहीं आवश्यक!

अगर आपको ईमेल पते के बजाय टेलीफ़ोन नंबर का इस्तेमाल करना है, तो <input type="tel">, मोबाइल पर टेलीफ़ोन कीपैड चालू करता है. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए जहां ज़रूरी हो वहां inputmode एट्रिब्यूट: पिन के लिए inputmode="numeric" सबसे अच्छा रहता है नंबर. वह सब कुछ जिसके बारे में आप जानना चाहते थे inputmode में और जानकारी है.

चेतावनी: type="number" संख्या बढ़ाने के लिए अप/डाउन ऐरो जोड़ता है. इसलिए, इसका इस्तेमाल आईडी और खाता नंबर जैसे उन नंबर के लिए न करें जिन्हें बढ़ाया नहीं जाना चाहिए.

मोबाइल कीबोर्ड को साइन इन करें बटन की रुकावट डालने से रोकें

माफ़ करें, अगर आप सावधान नहीं हैं, तो मोबाइल कीबोर्ड आपके फ़ॉर्म को कवर कर सकते हैं या इससे साइन इन बटन में कुछ रुकावट आ सकती है. उपयोगकर्ता पहले ही छोड़ सकते हैं जाना जा रहा है कि क्या हुआ है.

साइन इन करें बटन: अब आपको यह दिख रहा है, लेकिन अब नहीं.

जहां भी हो सके, साइन-इन पेज में सबसे ऊपर ईमेल/फ़ोन और पासवर्ड इनपुट और साइन इन करें बटन दिखाएं. अन्य कॉन्टेंट नीचे डालें.

कीबोर्ड आपके साइन इन करें बटन के काम में रुकावट न डालता हो.

अलग-अलग तरह के डिवाइसों पर टेस्ट करें

अपनी टारगेट ऑडियंस के लिए, आपको कई तरह के डिवाइसों पर टेस्ट करना होगा और इनमें बदलाव करना होगा भुगतान करते हैं. ब्राउज़र स्टैक ओपन सोर्स के लिए मुफ़्त परीक्षण को सक्षम करता है प्रोजेक्ट करने की सुविधा मिलती है. और ब्राउज़र में भी जाना जा सकता है.

साइन इन करें बटन: यह iPhone 7 और 8 पर साफ़ नहीं दिखता, लेकिन iPhone 11 पर नहीं दिखता.

दो पेजों का इस्तेमाल करें

कुछ साइटों (इनमें Amazon और eBay शामिल हैं) पर, समस्या से बचने के लिए, दो पेजों पर ईमेल/फ़ोन और पासवर्ड. इस तरीके से, विज्ञापन देने वाले लोग या कंपनियां अनुभव: उपयोगकर्ता को एक बार में केवल एक ही चीज़ के लिए निर्देश दिया जाता है.

दो चरणों में साइन इन करने की सुविधा: ईमेल या फ़ोन नंबर और फिर पासवर्ड.

आम तौर पर, इस पैरामीटर को एक ही <form> के साथ लागू किया जाना चाहिए. JavaScript का इस्तेमाल करना डालें. शुरुआत में सिर्फ़ ईमेल इनपुट दिखाएं. इसके बाद, इसे छिपाएं और पासवर्ड इनपुट दिखाएं. अगर आपको उपयोगकर्ता को उसका ईमेल पता डालने और नए पेज पर जाने के लिए मजबूर करना पड़ता है तो दूसरे पेज पर मौजूद फ़ॉर्म में छिपा हुआ इनपुट एलिमेंट होना चाहिए, जिसमें ईमेल मान, ताकि पासवर्ड मैनेजर सही मान स्टोर कर सकें. पासवर्ड फ़ॉर्म के ऐसे स्टाइल जिन्हें Chromium समझता है कोड का उदाहरण देता है.

इससे लोगों को डेटा दोबारा डालने की ज़रूरत नहीं पड़ती

डेटा को सही तरीके से सेव करने और इनपुट को ऑटोमैटिक भरने में ब्राउज़र की मदद की जा सकती है. इससे उपयोगकर्ताओं को ईमेल और पासवर्ड की वैल्यू डालने की बात याद रखनी पड़ती है. यह बहुत ज़रूरी है साथ ही, यह ईमेल इनपुट के लिए बेहद ज़रूरी है. इसमें सेशन को बीच में छोड़ने की दर ज़्यादा है.

इसके दो हिस्से हैं:

1. autocomplete, name, id, और type एट्रिब्यूट से ब्राउज़र को यह समझने में मदद मिलती है डेटा को स्टोर करने के लिए इनपुट की भूमिका, जिसका इस्तेमाल बाद में ऑटोमैटिक भरने की सुविधा के लिए किया जा सकता है. डेटा को ऑटोमैटिक भरने की सुविधा के लिए, मॉडर्न ब्राउज़र को इनका name या id वैल्यू स्थिर है. यह हर पेज के लोड होने पर रैंडम तरीके से जनरेट नहीं होता या साइट डिप्लॉयमेंट) और <form> में होना चाहिए submit बटन का इस्तेमाल करें.

2. autocomplete एट्रिब्यूट, इनपुट को सही तरीके से ऑटोमैटिक भरने में ब्राउज़र की मदद करता है सेव किया गया डेटा शामिल है.

ईमेल इनपुट के लिए, autocomplete="username" का इस्तेमाल करें, क्योंकि username की पहचान की गई है पासवर्ड मैनेजर से मॉडर्न ब्राउज़र में जा सकते हैं—हालांकि, आपको type="email" का इस्तेमाल करना चाहिए और id="email" और name="email" का इस्तेमाल किया जा सकता है.

पासवर्ड डालने के लिए, autocomplete और id की सही वैल्यू का इस्तेमाल करें, ताकि ब्राउज़र को मदद मिल सके नए और मौजूदा पासवर्ड के बीच अंतर करें.

नया पासवर्ड बनाने के लिए, autocomplete="new-password" और id="new-password" का इस्तेमाल करें

• साइन अप करते समय पासवर्ड डालने के लिए autocomplete="new-password" और id="new-password" का इस्तेमाल करें फ़ॉर्म या पासवर्ड बदलने के लिए फ़ॉर्म में नया पासवर्ड डालें.

मौजूदा पासवर्ड के लिए autocomplete="current-password" और id="current-password" का इस्तेमाल करें

• इसमें पासवर्ड डालने के लिए autocomplete="current-password" और id="current-password" का इस्तेमाल करें: साइन-इन फ़ॉर्म या पासवर्ड बदलने के लिए उपयोगकर्ता के पुराने पासवर्ड का इनपुट. इससे पता चलता है कि ब्राउज़र में सेव किया जाएगा, जिसे आप चाहते हैं कि वह मौजूदा पासवर्ड का इस्तेमाल करे.

साइन-अप फ़ॉर्म के लिए:

<input type="password" autocomplete="new-password" id="new-password" …>

साइन-इन करने के लिए:

<input type="password" autocomplete="current-password" id="current-password" …>

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

पासवर्ड मैनेजर की मदद करें

ईमेल की जानकारी ऑटोमैटिक भरने की सुविधा और पासवर्ड के सुझाव को अलग-अलग ब्राउज़र में प्रोसेस किया जाता है लेकिन असर काफ़ी हद तक एक जैसा है. डेस्कटॉप पर, Safari 11 और उसके बाद के वर्शन पर, उदाहरण के लिए, पासवर्ड मैनेजर दिखाया गया है और फिर बायोमेट्रिक दिखाया गया है फ़िंगरप्रिंट या चेहरे की पहचान जैसी पुष्टि करने का विकल्प उपलब्ध होने पर, इसका इस्तेमाल किया जाता है.

अपने-आप पूरा होने की सुविधा का इस्तेमाल करके साइन इन करें—टेक्स्ट डालने की ज़रूरत नहीं है!

डेस्कटॉप पर Chrome, ईमेल के सुझाव दिखाता है, Password Manager दिखाता है, और पासवर्ड को ऑटोमैटिक भरता है.

Chrome 84 में, साइन-इन करने के दौरान अपने-आप पूरा होने वाला फ़्लो.

ब्राउज़र पासवर्ड और ऑटोमैटिक भरने वाले सिस्टम आसान नहीं हैं. एल्गोरिदम की स्थिति वैल्यू का अनुमान लगाने, उन्हें सेव करने, और दिखाने का स्टैंडर्ड तरीका नहीं है. ये वैल्यू अलग-अलग हो सकती हैं प्लैटफ़ॉर्म टू प्लैटफ़ॉर्म. उदाहरण के लिए, जैसा कि Hidde de) में बताया गया है Vries: "Firefox का पासवर्ड मैनेजर अपने अनुभव को बेहतर बनाने के लिए रेसिपी सिस्टम."

ऑटोमैटिक भरना: वेब डेवलपर को क्या पता होना चाहिए नहीं में name और autocomplete का इस्तेमाल करने के बारे में बहुत ज़्यादा जानकारी है. HTML खास जानकारी सभी 59 संभावित वैल्यू की सूची बनाता है.

ध्यान दें: आप form एलिमेंट के साथ ही input, select, और textarea एलिमेंट के लिए, साइन-अप और साइन-इन फ़ॉर्म में name और id की अलग-अलग वैल्यू का इस्तेमाल करके, पासवर्ड मैनेजर की मदद कर सकते हैं.

मज़बूत पासवर्ड का सुझाव देने के लिए, ब्राउज़र को चालू करें

मॉडर्न ब्राउज़र ह्यूरिस्टिक्स का इस्तेमाल करके यह तय करते हैं कि पासवर्ड मैनेजर का यूज़र इंटरफ़ेस (यूआई) कब दिखाया जाए और मज़बूत पासवर्ड का सुझाव दें.

डेस्कटॉप पर Safari इस तरह से काम करता है.

Safari में पासवर्ड के सुझाव का फ़्लो.

(सफ़ारी में वर्शन 12.0 से, मज़बूत यूनीक पासवर्ड का सुझाव उपलब्ध है.)

बिल्ट-इन ब्राउज़र पासवर्ड जनरेटर का मतलब है कि उपयोगकर्ताओं और डेवलपर को कि "मज़बूत पासवर्ड" क्या है और है. क्योंकि ब्राउज़र सुरक्षित तरीके से और उन्हें ऑटोमैटिक भरना, उपयोगकर्ताओं को याद रखने की ज़रूरत नहीं या पासवर्ड डालें. उपयोगकर्ताओं को, पहले से मौजूद ब्राउज़र का फ़ायदा लेने के लिए बढ़ावा देना पासवर्ड जनरेट करने वाले टूल का यह भी मतलब है कि वे अपने मौजूदा और पासवर्ड का दोबारा इस्तेमाल करने की संभावना कम होती है, जो हैक किया गया है.

ध्यान दें: इस तरीके में समस्या यह है कि अलग-अलग प्लैटफ़ॉर्म पर पासवर्ड शेयर करने का कोई तरीका नहीं है. उदाहरण के लिए, कोई उपयोगकर्ता अपने iPhone पर Safari और Windows लैपटॉप पर Chrome का इस्तेमाल कर सकता है.

गलती से इनपुट न मिलने से उपयोगकर्ताओं को बचाने में मदद करें

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

डेस्कटॉप के लिए Firefox (वर्शन 76) में डेटा मौजूद न होने पर प्रॉम्प्ट और फ़ोकस करें और Android के लिए Chrome (वर्शन 83).

उंगलियों और अंगूठे के लिए डिज़ाइन करें

इनपुट एलिमेंट से जुड़ी सभी चीज़ों के लिए ब्राउज़र का डिफ़ॉल्ट साइज़ और बटन बहुत छोटे हों, खासकर मोबाइल पर. यह आम बात लग सकती है, लेकिन यह कई साइटों पर साइन-इन फ़ॉर्म के साथ एक सामान्य समस्या है.

पक्का करें कि इनपुट और बटन का साइज़ तय सीमा के मुताबिक हो

इनपुट और बटन का डिफ़ॉल्ट साइज़ और पैडिंग, डेस्कटॉप और तो वह भी मोबाइल पर खराब हो जाता है.

Android सुलभता के मुताबिक दिशा-निर्देश टचस्क्रीन ऑब्जेक्ट के लिए सुझाया गया टारगेट साइज़ 7 से 10 मिलीमीटर है. Apple इंटरफ़ेस दिशा-निर्देश में 48x48 पिक्सल और W3C का सुझाव कम से कम 44x44 पिक्सल का है पिक्सल डालें. उस पर इसके आधार पर, इनपुट एलिमेंट और बटन में करीब 15 पिक्सल पैडिंग (जगह) जोड़ें और डेस्कटॉप पर करीब 10 पिक्सल रिज़ॉल्यूशन में होगा. इसे किसी असली मोबाइल डिवाइस पर आज़माएं और उंगली या अंगूठा दिखाया जा सकता है. आप आसानी से अपने हर एक कार्ड पर टैप कर सकते हैं इनपुट और बटन शामिल हैं.

टैप वाले टारगेट का साइज़ सही नहीं है लाइटहाउस ऑडिट की मदद से, इनपुट एलिमेंट का पता लगाने की प्रोसेस को ऑटोमेट किया जा सकता है जो बहुत छोटे हों.

अंगूठे के लिए डिज़ाइन करें

टच टारगेट खोजें और तो आपको तर्जनी ऊँगलियों की बहुत सारी तस्वीरें दिखेंगी. हालांकि, वास्तविक दुनिया में, फ़ोन से इंटरैक्ट करने के लिए लोग अपने अंगूठे का इस्तेमाल करते हैं. अंगूठे इससे बड़े होते हैं तर्जनी उंगलियां और नियंत्रण कम सटीक है. इसकी और भी वजह है, छोटे साइज़ के टच टारगेट.

टेक्स्ट को इतना बड़ा बनाएं

साइज़ और पैडिंग की तरह, इनपुट एलिमेंट के लिए डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट साइज़ और बटन बहुत छोटे होते हैं, विशेष रूप से मोबाइल पर.

डेस्कटॉप और मोबाइल पर डिफ़ॉल्ट स्टाइल: इनपुट टेक्स्ट बहुत छोटा है, इसलिए कई उपयोगकर्ताओं को इसे पढ़ा नहीं जा सकता.

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

इसका मतलब है कि आपको मोबाइल पर बड़े पिक्सल साइज़ का इस्तेमाल करना होगा: Chrome पर 16px डेस्कटॉप को आसानी से पढ़ा जा सकता है, लेकिन दिखने में अच्छा होने पर भी इसे पढ़ना मुश्किल है 16px लेख पढ़ें. अलग-अलग इमेज के लिए, अलग-अलग फ़ॉन्ट पिक्सल साइज़ सेट किए जा सकते हैं मीडिया के हिसाब से, व्यूपोर्ट का साइज़ क्वेरी शामिल करें. 20px का इस्तेमाल मोबाइल पर करने के लिए किया जा सकता है—लेकिन आपको इसे दोस्तों से आज़माकर देखना चाहिए या साथ में काम करने वाले ऐसे लोग जिनकी नज़र कमज़ोर है.

दस्तावेज़ पढ़ने लायक फ़ॉन्ट साइज़ का इस्तेमाल नहीं करता लाइटहाउस ऑडिट की मदद से, उस टेक्स्ट का अपने-आप पता लगाने की प्रोसेस को ऑटोमेट किया जा सकता है छोटा.

इनपुट के बीच काफ़ी स्पेस रखें

टच टारगेट के साथ इनपुट के काम करने के लिए ज़रूरी मार्जिन जोड़ें. अन्य शब्दों में, करीब एक उंगली के मार्जिन पर.

पक्का करें कि आपके इनपुट साफ़ तौर पर दिख रहे हों

इनपुट के लिए डिफ़ॉल्ट बॉर्डर स्टाइलिंग की वजह से उन्हें देखने में दिक्कत होती है. उन्होंने करीब-करीब कुछ प्लेटफ़ॉर्म पर दिखाई नहीं देता है, जैसे Android के लिए Chrome.

पैडिंग के साथ, एक बॉर्डर जोड़ें: सफ़ेद बैकग्राउंड पर, एक अच्छा सामान्य नियम यह है #ccc या गहरे रंग की थीम इस्तेमाल करने के लिए.

पढ़ने लायक टेक्स्ट, दिखने वाले इनपुट बॉर्डर, ज़रूरत के मुताबिक पैडिंग (जगह) और मार्जिन.

अमान्य इनपुट वैल्यू के बारे में चेतावनी देने के लिए, ब्राउज़र में पहले से मौजूद सुविधाओं का इस्तेमाल करें

इनपुट के साथ बुनियादी फ़ॉर्म की पुष्टि करने के लिए, ब्राउज़र में पहले से ही कुछ सुविधाएं मौजूद होती हैं type एट्रिब्यूट की वैल्यू सबमिट करें. जब अमान्य वैल्यू वाला फ़ॉर्म सबमिट किया जाता है, तो ब्राउज़र चेतावनी देते हैं, और समस्या वाले इनपुट पर फ़ोकस सेट करें.

ब्राउज़र में पहले से मौजूद बुनियादी पुष्टि करना.

अमान्य डेटा को हाइलाइट करने के लिए, :invalid सीएसएस सिलेक्टर का इस्तेमाल किया जा सकता है. इस्तेमाल की जाने वाली चीज़ें बिना कॉन्टेंट वाले इनपुट चुनने से बचने के लिए, :not(:placeholder-shown).

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

अमान्य वैल्यू वाले इनपुट को हाइलाइट करने के अलग-अलग तरीके आज़माएं.

जहां ज़रूरी हो वहां JavaScript का इस्तेमाल करें

पासवर्ड दिखाने के लिए टॉगल करें

आपको पासवर्ड दिखाएं टॉगल जोड़ना चाहिए, ताकि उपयोगकर्ता का टेक्स्ट डालें. उपयोगिता तब प्रभावित होता है जब उपयोगकर्ता उनके द्वारा डाला गया टेक्स्ट नहीं देख सकते. वर्तमान में ऐसा कोई अंतर्निहित तरीका नहीं है हालांकि, ऐसी रणनीतियाँ लागू करना. आपको इसके बजाय, JavaScript का इस्तेमाल करना ज़रूरी है.

Google साइन-इन फ़ॉर्म: पासवर्ड दिखाएं टॉगल और पासवर्ड याद नहीं है लिंक के साथ.

नीचे दिया गया कोड, पासवर्ड दिखाएं फ़ंक्शन को जोड़ने के लिए, टेक्स्ट बटन का इस्तेमाल करता है.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

बटन को सादे टेक्स्ट जैसा बनाने के लिए, सीएसएस यहां दी गई है:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

और पासवर्ड दिखाने के लिए JavaScript:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

यह रहा आखिरी नतीजा:

Mac और iPhone 7 पर Safari में, पासवर्ड दिखाएं टेक्स्ट 'बटन' के साथ साइन-इन फ़ॉर्म.

पासवर्ड इनपुट को ऐक्सेस करने लायक बनाएं

पासवर्ड के नियमों को आउटलाइन करने के लिए, aria-describedby का इस्तेमाल करें. इसके लिए, एलिमेंट जो कंस्ट्रेंट के बारे में बताता है. स्क्रीनरीडर लेबल टेक्स्ट, इनपुट प्रकार (पासवर्ड) और फिर विवरण डालें.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

पासवर्ड दिखाएं सुविधा जोड़ते समय, पक्का करें कि पासवर्ड दिखाए जाने की चेतावनी देने के लिए aria-label. ऐसा न करने पर, लोग जिससे अनजाने में पासवर्ड पता चल जाए.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

आप नीचे दिए गए Glitch में काम करते हुए, दोनों ARIA सुविधाओं को देख सकते हैं:

इस्तेमाल किए जा सकने वाले फ़ॉर्म बनाने में, कुछ और सलाह दी गई हैं. इनकी मदद से, फ़ॉर्म को आसानी से ऐक्सेस किया जा सकता है.

रीयल टाइम में और सबमिट करने से पहले पुष्टि करें

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

चेतावनी: क्लाइंट-साइड से पुष्टि करने की सुविधा से, उपयोगकर्ताओं को डेटा डालने में मदद मिलती है. साथ ही, इससे सर्वर पर बेवजह लोड नहीं पड़ेगा. हालांकि, आपको हमेशा अपने बैकएंड पर डेटा की पुष्टि करनी होगी और उसे सैनिटाइज़ करना होगा.

साइन-इन फ़ॉर्म का पांचवां चरण कोडलैब, कंस्ट्रेंट की पुष्टि करने की सुविधा का इस्तेमाल करता है एपीआई (जो पूरी तरह से काम करता है) जोड़ने के लिए कस्टम पुष्टि करने की सुविधा मिलती है. इसमें पहले से मौजूद ब्राउज़र यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके, फ़ोकस सेट करने और प्रॉम्प्ट दिखाने के लिए किया जाता है.

ज़्यादा जानकारी पाएं: ज़्यादा मुश्किल रीयल-टाइम के लिए JavaScript का इस्तेमाल करना पुष्टि की प्रक्रिया के बारे में ज़्यादा जानें.

Analytics और RUM

"आप जिसे माप नहीं सकते, आप उसे बेहतर नहीं बना सकते" खास तौर पर, साइन-अप करने पर और साइन-इन फ़ॉर्म का इस्तेमाल करें. आपको लक्ष्य तय करने होंगे, सफलता का आकलन करना होगा, अपनी साइट में सुधार करना होगा—और दोहराएं.

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

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

इसे आज़माने के लिए, A/B टेस्टिंग का इस्तेमाल किया जा सकता है साइन-अप और साइन-इन करने के अलग-अलग तरीके दिखते हैं. साथ ही, कुछ लोगों के लिए रिलीज़ करने की सुविधा का इस्तेमाल करके, सभी उपयोगकर्ताओं के लिए बदलाव रिलीज़ करने से पहले किसी सबसेट में बदलाव.

सामान्य दिशा-निर्देश

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

• उपयोगकर्ताओं को साइन-इन के लिए खोज करने से न रोकें! सबसे ऊपर मौजूद साइन-इन फ़ॉर्म का लिंक डालें पेज के लिए, साइन इन करें, खाता बनाएं जैसे आसान शब्दों का इस्तेमाल करें या रजिस्टर करें.
• फ़ोकस बनाए रखें! साइन-अप फ़ॉर्म की मदद से, ऑफ़र और साइट की अन्य सुविधाओं के बारे में बात करते हैं.
• साइन-अप करने में आने वाली दिक्कतों को कम करें. अन्य उपयोगकर्ता का डेटा इकट्ठा करना. जैसे, पते या क्रेडिट कार्ड विवरण) केवल तभी दिखाई देगा, जब उपयोगकर्ताओं को डेटा शामिल है.
• इससे पहले कि उपयोगकर्ता आपके साइन-अप फ़ॉर्म को भरना शुरू करें, उन्हें यह साफ़ तौर पर बताएं कि खास बात है. उन्हें साइन इन करने से कैसे फ़ायदा मिलता है? उपयोगकर्ताओं को सटीक जानकारी देना साइन-अप पूरा करने के लिए इंसेंटिव.
• अगर हो सके, तो उपयोगकर्ताओं को मोबाइल फ़ोन नंबर से अपनी पहचान की पुष्टि करने की अनुमति दें के बजाय ईमेल पते का उपयोग कर सकते हैं, क्योंकि हो सकता है कुछ उपयोगकर्ता ईमेल का उपयोग न करें.
• उपयोगकर्ताओं के लिए अपना पासवर्ड रीसेट करना आसान बनाएं और अपना पासवर्ड भूल गए पासवर्ड? आसान लिंक है.
• अपनी सेवा की शर्तों और निजता नीति के दस्तावेज़ों का लिंक: यह जानकारी किस तरह से उपयोगकर्ताओं के डेटा की सुरक्षा का काम किया जा रहा है.
• साइनअप करते समय, अपनी कंपनी या संगठन का लोगो और नाम शामिल करें और साइन-इन पेज पर जा सकते हैं और पक्का कर सकते हैं कि भाषा, फ़ॉन्ट और स्टाइल, बाकी के फ़ॉन्ट से मेल खाते हों आपकी साइट. कुछ फ़ॉर्म को ऐसा नहीं लगता कि वे अन्य फ़ॉर्म की तरह उसी साइट के हैं कॉन्टेंट के बारे में बात करते हैं, खासकर तब, जब उनके यूआरएल काफ़ी अलग हों.

सीखते रहें

• शानदार फ़ॉर्म बनाएं
• मोबाइल फ़ॉर्म डिज़ाइन करने के सबसे सही तरीके
• फ़ॉर्म के लिए बेहतर कंट्रोल
• इस्तेमाल किए जा सकने वाले फ़ॉर्म बनाना
• क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, साइन इन करने की प्रोसेस को आसान बनाना
• WebOTP API की मदद से, वेब पर फ़ोन नंबर की पुष्टि करना

Unस्प्लैश पर मेगन शियरैक की फ़ोटो.