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