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

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 और रीयल यूज़र मॉनिटरिंग: अपने फ़ॉर्म डिज़ाइन की परफ़ॉर्मेंस और इस्तेमाल करने की सुविधा को चालू करें, ताकि असली उपयोगकर्ताओं के लिए उसकी जांच की जा सके और उसे मॉनिटर किया जा सके.