इस पेज का अनुवाद 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> एलिमेंट में क्लोज़िंग टैग नहीं होते हैं. ऐसा इसलिए, क्योंकि वे void (खाली) एलिमेंट होते हैं: उनका खुद में कोई कॉन्टेंट नहीं होता. अमान्य एलिमेंट के आखिर में "/" वर्ण डालना ज़रूरी नहीं है: <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 और असली उपयोगकर्ता की निगरानी: इस सुविधा की मदद से, अपने फ़ॉर्म डिज़ाइन की परफ़ॉर्मेंस और उपयोगिता की जांच की जा सकती है. साथ ही, इससे असली उपयोगकर्ताओं के लिए, फ़ॉर्म के डिज़ाइन की जांच की जा सकती है और उस पर नज़र रखी जा सकती है.