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

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

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

आगे बढ़ते रहें

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

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