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

पेमेंट फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब

Sam Dutton

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

पहला चरण: एचटीएमएल का सही तरीके से इस्तेमाल करना

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

<form>
<section>
<label>
<input>, <select>, <textarea>
<button>

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

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

index.html में अपने फ़ॉर्म के एचटीएमएल को देखें.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

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

ध्यान दें: <input> एलिमेंट के लिए क्लोज़िंग टैग नहीं होते. ऐसा इसलिए होता है, क्योंकि ये खाली एलिमेंट होते हैं: इनमें कोई कॉन्टेंट नहीं होता. किसी खाली एलिमेंट के आखिर में "/" वर्ण डालना ज़रूरी नहीं है: <input> या <input /> में से कोई भी वर्ण डाला जा सकता है.

पेमेंट फ़ॉर्म की झलक देखने के लिए, ऐप्लिकेशन देखें पर क्लिक करें.

क्या फ़ॉर्म ठीक से काम कर रहा है?
क्या आपको इसे बेहतर बनाने के लिए कुछ बदलना है?
मोबाइल पर क्या होगा?

अपने सोर्स कोड पर वापस जाने के लिए, सोर्स देखें पर क्लिक करें.

दूसरा चरण: मोबाइल और डेस्कटॉप के लिए डिज़ाइन करना

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

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

यहां दी गई सभी सीएसएस को कॉपी करें और अपनी css/main.css फ़ाइल में चिपकाएं.

यह बहुत सीएसएस है! साइज़ में हुए बदलावों के बारे में जानना ज़रूरी है:

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

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

:invalid सिलेक्टर का इस्तेमाल, यह बताने के लिए किया जाता है कि किसी इनपुट की वैल्यू अमान्य है. (इसका इस्तेमाल, कोडलैब में बाद में किया जाएगा.)

सीएसएस, मोबाइल-फ़र्स्ट है:

डिफ़ॉल्ट सीएसएस, 400px से कम चौड़ाई वाले व्यूपोर्ट के लिए है.
मीडिया क्वेरी का इस्तेमाल, कम से कम 400px चौड़ाई वाले व्यूपोर्ट के लिए डिफ़ॉल्ट वैल्यू को बदलने के लिए किया जाता है. इसके बाद, कम से कम 500px चौड़ाई वाले व्यूपोर्ट के लिए भी ऐसा किया जाता है. यह छोटे फ़ोन, बड़ी स्क्रीन वाले मोबाइल डिवाइसों, और डेस्कटॉप पर अच्छी तरह से काम करना चाहिए.

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

क्या पूरा फ़ॉर्म दिख रहा है?
क्या फ़ॉर्म के इनपुट का साइज़ काफ़ी बड़ा है?
क्या सारा टेक्स्ट पढ़ा जा सकता है?
क्या आपको किसी असली मोबाइल डिवाइस का इस्तेमाल करने और Chrome DevTools में डिवाइस मोड में फ़ॉर्म देखने के बीच कोई अंतर दिख रहा है?
क्या आपको ब्रेकपॉइंट में बदलाव करने की ज़रूरत है?

अलग-अलग डिवाइसों पर अपने फ़ॉर्म की जांच करने के कई तरीके हैं:

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

तीसरा चरण: उपयोगकर्ताओं को डेटा डालने में मदद करने के लिए एट्रिब्यूट जोड़ना

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

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

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

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

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

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

cc-number
cc-name
cc-exp
cc-csc

कई ब्राउज़र, क्रेडिट कार्ड नंबर और सुरक्षा कोड की पुष्टि भी करते हैं.

मोबाइल डिवाइस पर, कार्ड नंबर फ़ील्ड पर टैप करने के बाद, आपको अंकों वाला कीबोर्ड दिखेगा. ऐसा इसलिए हुआ, क्योंकि आपने inputmode="numeric" का इस्तेमाल किया था. इससे संख्या वाले फ़ील्ड में संख्याएं डालना आसान हो जाता है और ग़ैर-संख्या वाले वर्ण डालना असंभव हो जाता है. साथ ही, उपयोगकर्ताओं को यह याद रखने में मदद मिलती है कि वे किस तरह का डेटा डाल रहे हैं.

पेमेंट फ़ॉर्म में, autocomplete की सभी उपलब्ध वैल्यू सही तरीके से जोड़ना बेहद ज़रूरी है. कार्ड की समयसीमा खत्म होने की तारीख और अन्य फ़ील्ड के लिए, autocomplete वैल्यू को शामिल न करना साइटों के लिए आम बात है. अगर autofill एट्रिब्यूट की कोई वैल्यू गलत है या मौजूद नहीं है, तो उपयोगकर्ताओं को कार्ड का डेटा मैन्युअल तरीके से डालने के लिए, अपना असल कार्ड वापस लाना होगा. इससे, आपको बिक्री में कमी आ सकती है. अगर पेमेंट फ़ॉर्म में ऑटोमैटिक भरने की सुविधा ठीक से काम नहीं करती है, तो उपयोगकर्ता अपने फ़ोन या कंप्यूटर पर पेमेंट कार्ड की जानकारी का रिकॉर्ड भी रख सकते हैं. हालांकि, यह तरीका काफ़ी असुरक्षित है.

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

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

आपका पेमेंट फ़ॉर्म अब ऐसा दिखेगा:

autocomplete वैल्यू हटाकर, पेमेंट फ़ॉर्म भरकर देखें. आपको क्या समस्याएं आ रही हैं?
ऑनलाइन स्टोर पर पेमेंट फ़ॉर्म आज़माएं. देखें कि कौनसी चीज़ें अच्छी तरह से काम करती हैं और कौनसी नहीं. क्या आपको कोई सामान्य समस्या आ रही है या आपको कोई सबसे सही तरीका अपनाना चाहिए?

चौथा चरण: फ़ॉर्म सबमिट होने के बाद, पेमेंट बटन बंद करना

उपयोगकर्ता के टैप या क्लिक करने के बाद, सबमिट बटन को बंद कर देना चाहिए. ऐसा खास तौर पर तब करना चाहिए, जब उपयोगकर्ता पेमेंट कर रहा हो. कई उपयोगकर्ता बटन पर बार-बार टैप या क्लिक करते हैं, भले ही वे ठीक से काम कर रहे हों. इससे पेमेंट प्रोसेस करने में समस्याएं आ सकती हैं और सर्वर पर लोड बढ़ सकता है.

अपनी js/main.js फ़ाइल में यह JavaScript जोड़ें:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

पेमेंट फ़ॉर्म सबमिट करके देखें कि क्या होता है.

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

कुछ टिप्पणियों और validate() फ़ंक्शन के साथ, इस समय आपका कोड ऐसा दिखेगा:

आपको पता चलेगा कि JavaScript में डेटा की पुष्टि करने के लिए, टिप्पणी वाला कोड शामिल है. यह कोड, Constraint Validation API का इस्तेमाल करके, कस्टम पुष्टि करने की सुविधा जोड़ता है. यह एपीआई काफ़ी लोकप्रिय है. यह फ़ोकस सेट करने और प्रॉम्प्ट दिखाने के लिए, ब्राउज़र के पहले से मौजूद यूज़र इंटरफ़ेस (यूआई) को ऐक्सेस करता है. कोड से टिप्पणी हटाएं और इसे आज़माएं. आपको someregex और message के लिए सही वैल्यू सेट करनी होंगी. साथ ही, someField के लिए भी वैल्यू सेट करनी होगी.
अपने फ़ॉर्म को बेहतर बनाने के तरीकों की पहचान करने के लिए, आपको किस Analytics और रीयल यूज़र मॉनिटरिंग डेटा पर नज़र रखनी होगी?

आपका पूरा पेमेंट फ़ॉर्म अब ऐसा दिखेगा:

अपने फ़ॉर्म को अलग-अलग डिवाइसों पर आज़माएं. किन डिवाइसों और ब्राउज़र को टारगेट किया जा रहा है? फ़ॉर्म को कैसे बेहतर बनाया जा सकता है?

आगे बढ़ना

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

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