साइन-अप फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब

Sam Dutton

इस कोडलैब से आपको साइन-अप करने के लिए ऐसा फ़ॉर्म बनाने का तरीका पता चलता है जो सुरक्षित, इस्तेमाल में आसान, और इस्तेमाल करने में आसान हो.

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

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

  • प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

index.html में मौजूद अपने फ़ॉर्म का एचटीएमएल देखें. आपको नाम और ईमेल पते के लिए, इनपुट दिखेंगे और पासवर्ड डालें. हर एक सेक्शन में है और हर एक पर एक लेबल है. साइन अप करें बटन... एक <button>! बाद में इस कोडलैब में, आपको इन सभी एलिमेंट की खास शक्तियों के बारे में पता चलेगा.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

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

  • क्या डिफ़ॉल्ट स्टाइल ठीक दिखते हैं? फ़ॉर्म को बेहतर बनाने के लिए, आपको क्या बदलाव करने चाहिए?
  • क्या डिफ़ॉल्ट स्टाइल ठीक काम करती हैं? आपके फ़ॉर्म का इस्तेमाल करने में क्या समस्याएं आ सकती हैं? क्या फ़ायदे दें के बारे में? स्क्रीनरीडर या अन्य असिस्टिव टेक्नोलॉजी का क्या होगा?
  • आपके उपयोगकर्ता कौन हैं और आपने किन डिवाइसों और ब्राउज़र को टारगेट किया है?

अपने फ़ॉर्म की जांच करें

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

साइन-अप फ़ॉर्म की झलक देखने के लिए, ऐप्लिकेशन देखें पर क्लिक करें.

  • Chrome DevTools डिवाइस मोड का इस्तेमाल करके, अलग-अलग डिवाइसों पर अपना फ़ॉर्म आज़माएं.
  • अब फ़ोन या अन्य वास्तविक डिवाइसों पर फ़ॉर्म खोलें. आपको क्या अंतर दिखा?

दूसरा चरण: फ़ॉर्म के काम करने के तरीके को बेहतर बनाने के लिए सीएसएस जोड़ना

अपने सोर्स कोड पर वापस लौटने के लिए, सोर्स देखें पर क्लिक करें.

एचटीएमएल में अब तक कोई गलती नहीं है, लेकिन आपको यह पक्का करना होगा कि आपका फ़ॉर्म उपयोगकर्ताओं की संख्या कैसे बढ़ानी है.

इस चरण में, फ़ॉर्म को इस्तेमाल करना आसान बनाने के लिए, आपको सीएसएस जोड़ना होगा.

इन सभी सीएसएस को कॉपी करके css/main.css फ़ाइल में चिपकाएं:

अपनी स्टाइल वाला साइन-अप फ़ॉर्म देखने के लिए, ऐप्लिकेशन देखें पर क्लिक करें. इसके बाद, वापस आने के लिए सोर्स देखें पर क्लिक करें css/main.css.

  • क्या यह सीएसएस, अलग-अलग ब्राउज़र और स्क्रीन साइज़ के साथ काम करती है?

  • अपने टेस्ट डिवाइसों के हिसाब से padding, margin, और font-size को अडजस्ट करें.

  • सीएसएस को मोबाइल पर प्राथमिकता दी जाती है. मीडिया क्वेरी का इस्तेमाल कम से कम 400px चौड़ाई वाले व्यूपोर्ट के लिए किया जाता है. इसके बाद, ऐसे व्यूपोर्ट जिनकी चौड़ाई कम से कम 500px है. क्या ये ब्रेकपॉइंट हैं काफ़ी है? आपको फ़ॉर्म के लिए ब्रेकपॉइंट कैसे चुनने चाहिए?

तीसरा चरण: डेटा डालने में उपयोगकर्ताओं की मदद करने के लिए एट्रिब्यूट जोड़ना

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

अपनी index.html फ़ाइल अपडेट करें, ताकि फ़ॉर्म कोड कुछ ऐसा दिखे:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type वैल्यू बहुत कुछ करती हैं: * type="password", डाले गए टेक्स्ट को छिपा देता है और ब्राउज़र के मज़बूत पासवर्ड का सुझाव देने के लिए, पासवर्ड मैनेजर. * type="email" बुनियादी पुष्टि करता है और यह पक्का करता है कि मोबाइल उपयोगकर्ताओं को सही कीबोर्ड मिले. आज़माएँ CANNOT TRANSLATE

ऐप्लिकेशन देखें पर क्लिक करें. इसके बाद, ईमेल लेबल पर क्लिक करें. इस दिन क्या होगा? फ़ोकस, ईमेल पर ले जाता है क्योंकि लेबल में for की वैल्यू है, जो ईमेल के इनपुट के id से मेल खाती है. अन्य लेबल और इनपुट भी इसी तरह से काम करते हैं. स्क्रीनरीडर, लेबल (या लेबल की फ़ोकस करने लगता है. इसे आज़माने के लिए, ChromeVox एक्सटेंशन का इस्तेमाल करें.

फ़ॉर्म को खाली फ़ील्ड में सबमिट करने की कोशिश करें. ब्राउज़र फ़ॉर्म सबमिट नहीं करेगा और यह मौजूद डेटा को पूरा करता है और फ़ोकस सेट करता है. ऐसा इसलिए है क्योंकि आपने सभी में require विशेषता जोड़ी है इनपुट. अब ऐसे पासवर्ड से सबमिट करें जिसमें आठ से कम वर्ण हों. ब्राउज़र चेतावनी देता है कि पासवर्ड काफ़ी लंबा नहीं है और minlength="8" की वजह से पासवर्ड इनपुट पर फ़ोकस सेट करता है एट्रिब्यूट की वैल्यू सबमिट करें. यही बात pattern (नाम इनपुट के लिए इस्तेमाल होता है) और दूसरे आइटम के लिए काम करती है पुष्टि करने के तरीके. ब्राउज़र यह सब अपने आप कर देता है, इसके लिए किसी अतिरिक्त कोड की आवश्यकता नहीं होती.

पूरा नाम इनपुट के लिए, autocomplete वैल्यू name का इस्तेमाल करना सही है, लेकिन अन्य इनपुट? * ईमेल इनपुट के लिए autocomplete="username" का मतलब है कि ब्राउज़र का पासवर्ड मैनेजर सेव हो जाएगा 'नाम' के रूप में ईमेल पता इस उपयोगकर्ता (उपयोगकर्ता नाम!) को पासवर्ड के साथ जाने के लिए. * पासवर्ड के लिए autocomplete="new-password", पासवर्ड मैनेजर का एक संकेत है कि इसे इस वैल्यू को मौजूदा साइट के पासवर्ड के रूप में सेव करने का विकल्प देता है. इसके बाद, इनका इस्तेमाल किया जा सकता है: साइन-इन फ़ॉर्म में ऑटोमैटिक भरने की सुविधा चालू करने के लिए, autocomplete="current-password" (ध्यान रखें कि यह साइन-अप फ़ॉर्म).

चौथा चरण: सुरक्षित पासवर्ड डालने में उपयोगकर्ताओं की मदद करना

फ़ॉर्म में दी गई जानकारी के मुताबिक, क्या आपको पासवर्ड इनपुट में कुछ गलत दिखा?

इसमें दो समस्याएं हैं: * पासवर्ड वैल्यू पर कोई पाबंदी है या नहीं, यह जानने का कोई तरीका नहीं है. * पासवर्ड सही है या नहीं, यह पता करने के लिए आपको पासवर्ड नहीं दिखेगा.

उपयोगकर्ताओं को अनुमान न लगाने दें!

इस कोड की मदद से, index.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="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

पासवर्ड डालने में उपयोगकर्ताओं की मदद करने के लिए, नई सुविधाएं जोड़ी गई हैं:

  • पासवर्ड डिसप्ले को टॉगल करने के लिए एक बटन (असल में सिर्फ़ टेक्स्ट). ( बटन की सुविधाओं को JavaScript के साथ जोड़ा जाएगा.)
  • पासवर्ड-टॉगल बटन के लिए एक aria-label एट्रिब्यूट.
  • पासवर्ड डालने के लिए aria-describedby एट्रिब्यूट. स्क्रीनरीडर लेबल टेक्स्ट, इनपुट टाइप (पासवर्ड), और फिर ब्यौरा पढ़ें.

पासवर्ड-टॉगल बटन चालू करने और पासवर्ड कंस्ट्रेंट के बारे में उपयोगकर्ताओं को जानकारी दिखाने के लिए, नीचे दी गई सभी JavaScript को कॉपी करें और इसे अपनी js/main.js फ़ाइल में चिपकाएं.

(सीएसएस पहले से ही दूसरे चरण से मौजूद है. पासवर्ड-टॉगल बटन कैसा है, यह जानने के लिए एक नज़र डालें स्टाइल और पोज़िशन के हिसाब से.)

  • क्या टेक्स्ट के मुकाबले आइकॉन बेहतर काम करता है पासवर्ड प्रदर्शन टॉगल करें? डिस्काउंट यूज़ेबिलिटी टेस्टिंग आज़माएं दोस्तों या साथ काम करने वाले लोगों का ग्रुप.

  • स्क्रीनरीडर, फ़ॉर्म के साथ किस तरह काम करते हैं, यह जानने के लिए ChromeVox एक्सटेंशन इंस्टॉल करें और फ़ॉर्म में नेविगेट करें. क्या आप सिर्फ़ ChromeVox का इस्तेमाल करके फ़ॉर्म पूरा कर सकते हैं? अगर नहीं, तो आपको क्या बदलना चाहिए?

इस पॉइंट पर आपका फ़ॉर्म कुछ ऐसा दिखना चाहिए:

आगे बढ़ते रहें

इस कोडलैब में कई अहम सुविधाएं शामिल नहीं हैं:

  • यह पता लगाया जा रहा है कि पासवर्ड हैक या चोरी तो नहीं हुए हैं. आपको कभी भी हैक या चोरी हुए पासवर्ड को अनुमति नहीं देनी चाहिए. हैक या चोरी हुए पासवर्ड का पता लगाने के लिए, पासवर्ड की जांच करने वाली सेवा का इस्तेमाल भी किया जा सकता है. किसी मौजूदा सेवा का इस्तेमाल किया जा सकता है या अपने सर्वर पर खुद भी सेवा चलाई जा सकती है. इसे आज़माएं! पासवर्ड जोड़ें आपका फ़ॉर्म देखा जा रहा है.

  • अपनी सेवा की शर्तों और निजता नीति के दस्तावेज़ों का लिंक: उपयोगकर्ताओं को साफ़ तौर पर बताएं कि उनके डेटा की सुरक्षा कर सकते हैं.

  • स्टाइल और ब्रैंडिंग: पक्का करें कि ये आपकी साइट के बाकी हिस्सों से मेल खाती हों. नाम और पते डालते समय और पेमेंट करते समय, उपयोगकर्ताओं को इस बात का भरोसा होना चाहिए कि वे अब भी सही जगह पर हैं.

  • आंकड़े और असली उपयोगकर्ता की निगरानी: आपके फ़ॉर्म के डिज़ाइन की परफ़ॉर्मेंस और उपयोगिता को चालू करेगा. इससे असली उपयोगकर्ताओं के लिए, आपके फ़ॉर्म की जांच और निगरानी की जा सकेगी.