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

सैम डटन

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

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

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

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

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

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

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

HTML के साथ अब तक कोई समस्या नहीं है, लेकिन आपको यह पक्का करना होगा कि आपका फ़ॉर्म, मोबाइल और डेस्कटॉप के कई उपयोगकर्ताओं के लिए ठीक से काम करे.

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

इन सभी सीएसएस को कॉपी करें और 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", टेक्स्ट डाले जाने पर उसे छिपा देता है. साथ ही, ब्राउज़र के Password Manager को मज़बूत पासवर्ड का सुझाव देने की सुविधा चालू करता है. * type="email" बुनियादी पुष्टि करता है. साथ ही, यह पक्का करता है कि मोबाइल उपयोगकर्ताओं को सही कीबोर्ड मिले. इसे आज़माकर देखें!

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

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

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

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

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

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

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

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 का इस्तेमाल करके फ़ॉर्म भर सकते हैं? अगर नहीं, तो क्या बदलाव किया जाएगा?

यहां बताया गया है कि इस समय आपका फ़ॉर्म कैसा दिखना चाहिए:

आगे बढ़ना

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

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

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

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

  • विश्लेषण और असली उपयोगकर्ताओं की निगरानी: इस सुविधा की मदद से, अपने फ़ॉर्म के डिज़ाइन की परफ़ॉर्मेंस और उपयोगिता की जांच की जा सकती है. साथ ही, इससे असली उपयोगकर्ताओं के लिए, फ़ॉर्म के डिज़ाइन की जांच की जा सकती है और उसकी निगरानी भी की जा सकती है.