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

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

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

चेतावनी: एसएमएस, पुष्टि करने का सबसे सुरक्षित तरीका नहीं है. ऐसा इसलिए, क्योंकि फ़ोन नंबरों को रीसाइकल किया जा सकता है और हैक किया जा सकता है. दो तरीकों से पुष्टि करने के दूसरे तरीकों या कई चरणों में पुष्टि करने की सुविधा का इस्तेमाल करें.

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

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

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

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

देखें कि आपको कितना समझ आया

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

संसाधन

• autocomplete एट्रिब्यूट.
  • पेमेंट और पते की जानकारी देने वाले फ़ॉर्म को भरने के सबसे सही तरीके