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

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

सैम डटन

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

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

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

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. पासवर्ड दिखाएं पर क्लिक करें.
अलग-अलग ऑपरेटिंग सिस्टम पर कई ब्राउज़र पर चौथा चरण दोहराएं.

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

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