इस पेज का अनुवाद Cloud Translation API से किया गया है.

साइन इन फ़ॉर्म बनाने के लिए, अलग-अलग प्लैटफ़ॉर्म पर काम करने वाले ब्राउज़र की सुविधाओं का इस्तेमाल करना

Sam Dutton

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

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

नौकरी के लिए बनाए गए इन एलिमेंट का इस्तेमाल करें:

<form>
<section>
<label>
<button>

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

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

<body> एलिमेंट में यह कोड जोड़ें:

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

इस समय आपकी index.html फ़ाइल ऐसी दिखनी चाहिए:

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

2. उंगलियों और अंगूठे के लिए डिज़ाइन

पैडिंग, मार्जिन, और फ़ॉन्ट साइज़ में बदलाव करें, ताकि आपके इनपुट मोबाइल पर ठीक से काम करें.

नीचे दी गई सीएसएस को कॉपी करें और उसे अपनी style.css फ़ाइल में चिपकाएं:
नए स्टाइल वाला साइन-इन फ़ॉर्म देखने के लिए, ऐप्लिकेशन देखें पर क्लिक करें.
अपनी style.css फ़ाइल पर वापस जाने के लिए, सोर्स देखें पर क्लिक करें.

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

padding और margin को इनपुट में जोड़ा जाता है.
font-size, मोबाइल और डेस्कटॉप के लिए अलग-अलग होता है.

:invalid सिलेक्टर का इस्तेमाल यह दिखाने के लिए किया जाता है कि किसी इनपुट की वैल्यू अमान्य है. यह सुविधा अभी काम नहीं करती है.

सीएसएस लेआउट, मोबाइल के लिए पहले डिज़ाइन किया गया है:

डिफ़ॉल्ट सीएसएस, 450 पिक्सल से कम चौड़ाई वाले व्यूपोर्ट के लिए होती है.
मीडिया क्वेरी सेक्शन, कम से कम 450 पिक्सल चौड़े व्यूपोर्ट के लिए ओवरराइड सेट करता है.

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

क्या लेबल और इनपुट टेक्स्ट पढ़ा जा सकता है? खास तौर पर, कम दृष्टि वाले लोगों के लिए?
क्या इनपुट और साइन इन करें बटन इतने बड़े हैं कि उन्हें अंगूठे से टच किया जा सके?

3. ब्राउज़र में पहले से मौजूद सुविधाओं को चालू करने के लिए, इनपुट एट्रिब्यूट जोड़ना

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

अपने फ़ॉर्म एचटीएमएल में एट्रिब्यूट जोड़ें, ताकि यह इस तरह दिखे:

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

अपने ऐप्लिकेशन को फिर से देखें. इसके बाद, ईमेल पर क्लिक करें.

ध्यान दें कि फ़ोकस, ईमेल डालने के फ़ील्ड पर कैसे जाता है. ऐसा इसलिए होता है, क्योंकि लेबल को for="email" एट्रिब्यूट के ज़रिए इनपुट से जोड़ा जाता है. जब लेबल या लेबल से जुड़े इनपुट पर फ़ोकस किया जाता है, तब स्क्रीन रीडर लेबल का टेक्स्ट भी बोलते हैं.
मोबाइल डिवाइस पर ईमेल डालने के फ़ील्ड पर फ़ोकस करें.

ध्यान दें कि ईमेल पता टाइप करने के लिए, कीबोर्ड को कैसे ऑप्टिमाइज़ किया गया है. उदाहरण के लिए, @ और . वर्ण, प्राइमरी कीबोर्ड पर दिखाए जा सकते हैं. साथ ही, ऑपरेटिंग सिस्टम, कीबोर्ड के ऊपर सेव किए गए ईमेल दिखा सकता है. यह सब इसलिए होता है, क्योंकि type="email" एट्रिब्यूट को <input> एलिमेंट पर लागू किया जाता है.
पासवर्ड डालने वाले फ़ील्ड में कुछ टेक्स्ट टाइप करें.

टेक्स्ट डिफ़ॉल्ट रूप से छिपा होता है, क्योंकि एलिमेंट पर type="password" एट्रिब्यूट लागू किया गया है.

autocomplete, name, id, और type एट्रिब्यूट की मदद से, ब्राउज़र को इनपुट की भूमिका के बारे में पता चलता है. इससे वे ऐसे डेटा को सेव कर पाते हैं जिसका इस्तेमाल बाद में ऑटोमैटिक भरने की सुविधा के लिए किया जा सकता है.

डेस्कटॉप डिवाइस पर ईमेल इनपुट पर फ़ोकस करें और कुछ टेक्स्ट टाइप करें. फ़ुलस्क्रीन पर क्लिक करके, अपने ऐप्लिकेशन का यूआरएल देखा जा सकता है. अगर आपने अपने ब्राउज़र में कोई ईमेल पता सेव किया है, तो आपको एक डायलॉग दिखेगा. इसमें सेव किए गए ईमेल पतों में से किसी एक को चुनने का विकल्प होगा. ऐसा इसलिए होता है, क्योंकि autocomplete="username" एट्रिब्यूट, ईमेल इनपुट पर लागू होता है.

autocomplete="username" और autocomplete="current-password" की मदद से, ब्राउज़र सेव की गई वैल्यू का इस्तेमाल करके इनपुट फ़ील्ड को अपने-आप भर सकते हैं.

ध्यान दें: ईमेल इनपुट के लिए, autocomplete="username" का इस्तेमाल करें, क्योंकि username को आधुनिक ब्राउज़र में पासवर्ड मैनेजर पहचानते हैं. हालांकि, आपको type="email" का इस्तेमाल करना चाहिए. साथ ही, id="email" और name="email" का इस्तेमाल भी किया जा सकता है.

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

इसे खुद आज़माने के लिए, एट्रिब्यूट जोड़ें और हटाएं.

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

इस समय आपकी index.html फ़ाइल ऐसी दिखनी चाहिए:

4. पासवर्ड दिखाने की सुविधा को टॉगल करने के लिए यूज़र इंटरफ़ेस (यूआई) जोड़ें

इस्तेमाल में आसानी से जुड़ी समस्याओं को हल करने वाले विशेषज्ञों का सफ़ तौर पर सुझाव है कि एक ऐसा आइकॉन या बटन जोड़ा जाए जिससे लोग, पासवर्ड फ़ील्ड में डाला गया टेक्स्ट देख सकें. ऐसा करने के लिए, कोई इन-बिल्ट तरीका उपलब्ध नहीं है. इसलिए, आपको इसे JavaScript की मदद से खुद लागू करना होगा.

इस सुविधा को जोड़ने के लिए कोड आसान है. इस उदाहरण में आइकॉन के बजाय टेक्स्ट का इस्तेमाल किया गया है.

index.html, style.css, और script.js फ़ाइलों को इस तरह अपडेट करें.

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="current-password" required>
</section>

style.css फ़ाइल के सबसे नीचे, यह सीएसएस जोड़ें:
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
इससे पासवर्ड दिखाएं बटन, सामान्य टेक्स्ट की तरह दिखता है. साथ ही, यह पासवर्ड सेक्शन के सबसे ऊपर दाएं कोने में दिखता है.

पासवर्ड दिखाने की सुविधा को टॉगल करने और सही aria-label सेट करने के लिए, script.js फ़ाइल में यह JavaScript जोड़ें:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

अब पासवर्ड दिखाने की सुविधा आज़माएं.
1. अपना ऐप्लिकेशन देखें.
2. पासवर्ड फ़ील्ड में कुछ टेक्स्ट डालें.
3. पासवर्ड दिखाएं पर क्लिक करें.
अलग-अलग ऑपरेटिंग सिस्टम पर मौजूद कई ब्राउज़र में चौथा चरण दोहराएं.

UX डिज़ाइन के बारे में सोचें: क्या लोगों को पासवर्ड दिखाएं विकल्प दिखेगा और क्या वे इसे समझ पाएंगे? क्या इस सुविधा को बेहतर तरीके से उपलब्ध कराया जा सकता है? यह डिस्काउंट यूज़ेबिलिटी टेस्टिंग करने का सही समय है. इसे दोस्तों या साथ काम करने वाले लोगों के छोटे ग्रुप के साथ आज़माएं.

यह सुविधा स्क्रीन रीडर के लिए कैसे काम करती है, यह समझने के लिए ChromeVox Classic एक्सटेंशन इंस्टॉल करें और फ़ॉर्म में नेविगेट करें. क्या aria-label की वैल्यू उम्मीद के मुताबिक काम कर रही हैं?

कुछ वेबसाइटें, जैसे कि Gmail, पासवर्ड दिखाने की सुविधा को टॉगल करने के लिए, टेक्स्ट के बजाय आइकॉन का इस्तेमाल करती हैं. इस कोडलैब को पूरा करने के बाद, इसे SVG इमेज के साथ लागू करें. Material Design में अच्छी क्वालिटी के आइकॉन उपलब्ध हैं. इन्हें बिना किसी शुल्क के डाउनलोड किया जा सकता है.

इस समय आपका कोड ऐसा दिखना चाहिए:

5. फ़ॉर्म की पुष्टि करने की सुविधा जोड़ना

फ़ॉर्म सबमिट करने से पहले, उपयोगकर्ताओं को अपने डेटा की पुष्टि करने की सुविधा देकर, उन्हें सही डेटा डालने में मदद की जा सकती है. साथ ही, उन्हें यह भी बताया जा सकता है कि उन्हें क्या बदलाव करने हैं.

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

इस चरण में, Constraint Validation API का इस्तेमाल किया जाता है. यह एपीआई, ज़्यादातर ब्राउज़र के साथ काम करता है. इसकी मदद से, ब्राउज़र के बिल्ट-इन यूज़र इंटरफ़ेस (यूआई) के साथ कस्टम पुष्टि जोड़ने में मदद मिलती है. यह यूज़र इंटरफ़ेस (यूआई), फ़ोकस सेट करता है और प्रॉम्प्ट दिखाता है.

उपयोगकर्ताओं को पासवर्ड और अन्य इनपुट के लिए ज़रूरी शर्तों के बारे में बताएं. उन्हें अंदाज़ा लगाने का मौका न दें!

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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

इससे दो नई सुविधाएं मिलती हैं:

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

style.css फ़ाइल के सबसे नीचे, यह सीएसएस जोड़ें:
```
div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}
```

script.js फ़ाइल में यह JavaScript जोड़ें:

passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

इसे आज़माएं!

हाल ही के सभी ब्राउज़र में, फ़ॉर्म की पुष्टि करने की सुविधाएं पहले से मौजूद होती हैं. साथ ही, ये JavaScript की मदद से पुष्टि करने की सुविधा के साथ काम करते हैं.
1. कोई अमान्य ईमेल पता डालें और साइन इन करें पर क्लिक करें. ब्राउज़र एक चेतावनी दिखाता है—JavaScript की ज़रूरत नहीं है!
2. कोई मान्य ईमेल पता डालें. इसके बाद, पासवर्ड की वैल्यू डाले बिना साइन इन करें पर क्लिक करें. ब्राउज़र आपको चेतावनी देता है कि आपने कोई ज़रूरी वैल्यू नहीं डाली है. साथ ही, वह पासवर्ड डालने वाले फ़ील्ड पर फ़ोकस सेट करता है.
3. कोई अमान्य पासवर्ड डालें और साइन इन करें पर क्लिक करें. अब आपको गड़बड़ी के हिसाब से अलग-अलग मैसेज दिखते हैं.
लोगों को ईमेल पते और पासवर्ड डालने में मदद करने के लिए, अलग-अलग तरीके आज़माएं. पासवर्ड फ़ॉर्म फ़ील्ड को बेहतर बनाने से जुड़े सुझावों को लागू करें.

इस समय आपका कोड ऐसा दिखना चाहिए:

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

इन्हें इस कोडलैब में नहीं दिखाया गया है. हालांकि, आपको साइन-इन फ़ॉर्म की इन चार ज़रूरी सुविधाओं की ज़रूरत होगी:

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