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

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", बुनियादी पुष्टि करता है और यह पक्का करता है कि मोबाइल इस्तेमाल करने वालों को सही कीबोर्ड मिल जाए. इसे आज़माएं!

ऐप्लिकेशन देखें पर क्लिक करें. इसके बाद, ईमेल लेबल पर क्लिक करें. इस दिन क्या होगा? फ़ोकस, ईमेल के इनपुट पर ले जाता है, क्योंकि लेबल में 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 का इस्तेमाल करके फ़ॉर्म भरा है? अगर नहीं, तो आपको क्या बदलना चाहिए?

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

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

इस कोडलैब में कई ज़रूरी सुविधाओं के बारे में नहीं बताया गया है:

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

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

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

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