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

Sam Dutton

सुरक्षित, सुलभ, और इस्तेमाल में आसान साइन-अप फ़ॉर्म बनाने का तरीका जानें. फ़ाइनल फ़ॉर्म, CodePen में उपलब्ध है.

1. सही एचटीएमएल का इस्तेमाल करना

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

नया पेन बनाएं.

यहां दिए गए कोड को कॉपी करके, एचटीएमएल एडिटर में चिपकाएं.

<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>

एचटीएमएल फ़ॉर्म देखने के लिए, लाइव झलक पर क्लिक करें. इसमें नाम, ईमेल, और पासवर्ड डालने के लिए इनपुट फ़ील्ड होते हैं. यह फ़ॉर्म सिर्फ़ डिफ़ॉल्ट ब्राउज़र सीएसएस का इस्तेमाल करता है.

हर इनपुट एक सेक्शन में होता है और हर सेक्शन का एक लेबल होता है. साइन अप बटन, <button> है. इस कोडलैब में आगे, आपको इन सभी एलिमेंट की खास सुविधाओं के बारे में जानकारी मिलेगी.

खुद से ये सवाल पूछें:

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

अपने फ़ॉर्म को टेस्ट करना

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

मोबाइल डिवाइसों को सिम्युलेट करने के लिए, Chrome DevTools के डिवाइस मोड का इस्तेमाल करें.
अपने कंप्यूटर से फ़ोन पर यूआरएल भेजें.
अलग-अलग डिवाइसों और ब्राउज़र पर जांच करने के लिए, BrowserStack जैसी किसी सेवा का इस्तेमाल करें.
ChromeVox Chrome एक्सटेंशन जैसे स्क्रीन रीडर टूल का इस्तेमाल करके, फ़ॉर्म को आज़माएं.

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

अब फ़ोन या अन्य असली डिवाइसों पर फ़ॉर्म खोलें. आपको क्या अंतर दिखे?

2. फ़ॉर्म को बेहतर तरीके से काम करने के लिए, सीएसएस जोड़ना

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

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

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

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

अपने टेस्ट डिवाइसों के हिसाब से, padding, margin, और font-size में बदलाव करें.
सीएसएस, मोबाइल वर्शन को पहले इंडेक्स करने की सुविधा के हिसाब से है. कम से कम 400px चौड़े व्यूपोर्ट के लिए सीएसएस के नियम लागू करने के लिए, मीडिया क्वेरी का इस्तेमाल करें. इसके बाद, कम से कम 500px चौड़े व्यूपोर्ट के लिए फिर से इनका इस्तेमाल करें. क्या ये ब्रेकपॉइंट सही हैं? आपको फ़ॉर्म के लिए ब्रेकपॉइंट कैसे चुनने चाहिए?

3. उपयोगकर्ताओं को डेटा डालने में मदद करने के लिए एट्रिब्यूट जोड़ना

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

अपने एचटीएमएल को अपडेट करें, ताकि फ़ॉर्म कोड ऐसा दिखे:

<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 से मेल खाती है. अन्य लेबल और इनपुट भी इसी तरह काम करते हैं. जब लेबल (या लेबल से जुड़ा इनपुट) पर फ़ोकस किया जाता है, तब स्क्रीन रीडर लेबल टेक्स्ट भी बोलते हैं.

किसी फ़ील्ड को खाली छोड़कर फ़ॉर्म सबमिट करने की कोशिश करें. ब्राउज़र, फ़ॉर्म सबमिट नहीं करेगा. साथ ही, यह छूटे हुए डेटा को पूरा करने के लिए कहेगा और फ़ोकस सेट करेगा. ऐसा इसलिए हुआ, क्योंकि हमने सभी इनपुट में require एट्रिब्यूट जोड़ा है.

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

पूरा नाम के लिए autocomplete वैल्यू name का इस्तेमाल करना सही है, लेकिन अन्य इनपुट के बारे में क्या?

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

4. उपयोगकर्ताओं को सुरक्षित पासवर्ड डालने में मदद करना

क्या आपको पासवर्ड डालने में कोई गड़बड़ी दिखी? दो समस्याएं हैं:

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

उपयोगकर्ताओं को अनुमान लगाने के लिए मजबूर न करें. index.html के पासवर्ड सेक्शन को इस कोड से अपडेट करें:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button"
  aria-label="Show password as plain text. Warning: this displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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

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

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

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

ज़्यादा जानकारी

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

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