ऑटोमैटिक भरना

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

जानकारी ऑटोमैटिक भरने की सुविधा कैसे काम करती है?

ऑटोमैटिक भरने की सुविधा के बारे में जानकारी वाले सेशन में, आपने ऑटोमैटिक भरने की सुविधा की बुनियादी बातें जान ली हैं. लेकिन ब्राउज़र, ऑटोमैटिक भरने की सुविधा क्यों देते हैं?

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

ब्राउज़र को कैसे पता चलता है कि किस डेटा को ऑटोमैटिक भरना है? पता लगाने के लिए फ़ॉर्म फ़ील्ड का एक उदाहरण देखें.

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

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

मान लें, हफ़्तों बाद, आप किसी दूसरी वेबसाइट पर दूसरा फ़ॉर्म भरते हैं. इस साइट में name="name" के साथ एक फ़ॉर्म फ़ील्ड भी शामिल है. आपका ब्राउज़र अब ऑटोमैटिक भरने की सुविधा दे सकता है, क्योंकि नाम के लिए एक वैल्यू पहले से ही सेव होती है.

ऑटोमैटिक भरने की सुविधा, खास तौर पर उन फ़ॉर्म में काम आती है जिनका इस्तेमाल अक्सर किया जाता है. जैसे, साइन अप और साइन इन, पेमेंट, चेकआउट, और ऐसे फ़ॉर्म जिनमें आपको अपना नाम या पता डालना होता है.

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

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

पते के हर फ़ॉर्म में एक जैसे फ़ील्ड नहीं होते. साथ ही, फ़ील्ड का क्रम भी अलग-अलग होता है. autocomplete के लिए सही वैल्यू का इस्तेमाल करने से, यह पक्का होता है कि ब्राउज़र, फ़ॉर्म के लिए सही वैल्यू भरे. इसमें country, postal-code, और कई और चीज़ों के लिए वैल्यू होती हैं.

पक्का करें कि लोग तेज़ी से साइन इन कर सकें और सुरक्षित पासवर्ड इस्तेमाल कर सकें

कई लोगों को पासवर्ड याद रखने की अच्छी आदत नहीं होती. सबसे ज़्यादा इस्तेमाल होने वाला पासवर्ड '123456' है. इसके बाद, याद रखने में आसान और भी कई कॉम्बिनेशन इस्तेमाल होते हैं. कोई पासवर्ड याद रखे बिना, सुरक्षित और यूनीक पासवर्ड का इस्तेमाल कैसे किया जा सकता है?

ब्राउज़र में पासवर्ड मैनेजर पहले से मौजूद होते हैं, ताकि वे आपके लिए पासवर्ड जनरेट कर सकें, उन्हें सेव कर सकें, और भर सकें. जानें कि ईमेल ऑटोमैटिक भरने और पासवर्ड मैनेज करने में ब्राउज़र की मदद कैसे की जा सकती है.

ईमेल फ़ील्ड के लिए autocomplete="email" का इस्तेमाल किया जा सकता है. इससे उपयोगकर्ताओं को ईमेल पते के लिए, ऑटोमैटिक भरने की सुविधा मिलती है.

यह एक साइन-अप फ़ॉर्म है, इसलिए उपयोगकर्ताओं को पहले इस्तेमाल किए गए पासवर्ड भरने का विकल्प नहीं मिलना चाहिए. autocomplete="new-password" का इस्तेमाल करके यह पक्का किया जा सकता है कि ब्राउज़र, नया पासवर्ड जनरेट करने का विकल्प देते हों.

साइन-इन फ़ॉर्म पर, autocomplete="current-password" का इस्तेमाल करके ब्राउज़र को यह बताया जा सकता है कि वे इस वेबसाइट के लिए, पहले से सेव किए गए पासवर्ड भरने का विकल्प दें.

कई वेबसाइटों पर, दो तरीकों से पुष्टि करने की सुविधा सेट अप की जा सकती है. पासवर्ड के अलावा, एसएमएस या दो तरीकों से पुष्टि करने वाले ऐप्लिकेशन के साथ, एक बार इस्तेमाल होने वाला कोड भेजा जाता है.

क्या यह बढ़िया नहीं होगा कि मैसेज (एसएमएस) में आपको मिला कोड ऑन-स्क्रीन कीबोर्ड से सुझाया गया हो और आप वैल्यू भरने के लिए सीधे उस कोड को चुन सकें? Safari 14 या उसके बाद के वर्शन पर, ऐसा करने के लिए autocomplete="one-time-code" का इस्तेमाल किया जा सकता है. Android पर Chrome में, JavaScript की मदद से इसे पाने के लिए WebOTP एपीआई का इस्तेमाल किया जा सकता है.

एसएमएस ओटीपी फ़ॉर्म भेजने के सबसे सही तरीकों की मदद से, वेब पर फ़ोन नंबर की पुष्टि करने के तरीके के बारे में ज़्यादा जानें.

क्रेडिट कार्ड की जानकारी भरने में उपयोगकर्ताओं की मदद करना

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

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

क्रेडिट कार्ड नंबर cc-number, क्रेडिट कार्ड की समयसीमा खत्म होने की तारीख cc-exp, और क्रेडिट कार्ड से किए गए पेमेंट के लिए ज़रूरी जानकारी देने वाली वैल्यू भी दी गई हैं.

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

पेमेंट से जुड़ा डेटा दोबारा डालने से बचने में उपयोगकर्ताओं की मदद करने के बारे में ज़्यादा जानें.

पक्का करें कि आपके सभी फ़ील्ड के लिए, ऑटोमैटिक भरने की सुविधा काम कर रही हो

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

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

autocomplete एट्रिब्यूट के लिए सही वैल्यू इस्तेमाल करने से, ब्राउज़र को जानकारी ऑटोमैटिक भरने का सबसे अच्छा विकल्प मिलता है. साथ ही, इससे उपयोगकर्ताओं को तेज़ी से फ़ॉर्म भरने में मदद मिलती है.

ब्राउज़र को यह समझने में मदद करें कि किसी फ़ील्ड को अपने-आप नहीं भरना चाहिए

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

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

एक बार की जाने वाली यूनीक वैल्यू, जैसे कि एक बार इस्तेमाल होने वाला कोड फ़ील्ड, ऐसी जगह पर डाला जा सकता है जहां ऑटोमैटिक भरने की सुविधा काम की नहीं है. वैल्यू हर बार अलग होती है और ब्राउज़र को न तो वैल्यू सेव करनी चाहिए और न ही ऑटोमैटिक भरने की सुविधा का विकल्प देना चाहिए. ऑटोमैटिक भरने की सुविधा को रोकने के लिए, ऐसे फ़ील्ड के लिए autocomplete="off" का इस्तेमाल किया जा सकता है.

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

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

जांचें कि आपको कितना समझ आया

जानकारी ऑटोमैटिक भरने की सुविधा के बारे में अपनी जानकारी की जांच करें

रिसॉर्स

• ऑटोकंप्लीट एट्रिब्यूट.
  • पेमेंट और पते के फ़ॉर्म से जुड़े सबसे सही तरीके