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