इस पेज का अनुवाद 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" का इस्तेमाल भी किया जा सकता है.

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

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

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

यहां बताया गया है कि 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;
}
```
इससे पासवर्ड दिखाएं बटन सामान्य टेक्स्ट जैसा दिखता है और पासवर्ड सेक्शन के सबसे ऊपर दाएं कोने में दिखता है.

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

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 इमेज के साथ लागू करें. मटीरियल डिज़ाइन अच्छी क्वालिटी के आइकॉन उपलब्ध कराता है, जिन्हें मुफ़्त में डाउनलोड किया जा सकता है.

इस पॉइंट पर आपका कोड कुछ इस तरह दिखना चाहिए:

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