بهترین شیوه‌های کدهای فرم پرداخت

سم داتون

این آزمایشگاه کد به شما نشان می‌دهد که چگونه یک فرم پرداخت امن، در دسترس و آسان برای استفاده بسازید.

مرحله ۱: از HTML به صورت مورد نظر استفاده کنید

از عناصر ساخته شده برای کار استفاده کنید:

  • <form>
  • <section>
  • <label>
  • <input> ، <select> ، <textarea>
  • <button>

همانطور که خواهید دید، این عناصر قابلیت‌های داخلی مرورگر را فعال می‌کنند، دسترسی‌پذیری را بهبود می‌بخشند و به نشانه‌گذاری شما معنا می‌بخشند.

  • برای قابل ویرایش کردن پروژه، روی «Remix to Edit» کلیک کنید.

به کد HTML فرم خود در 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> HTML است. بعداً در این آزمایشگاه کد، درباره ویژگی‌های مرورگری که می‌توانید با استفاده از این عناصر به آنها دسترسی داشته باشید، خواهید آموخت.

برای پیش‌نمایش فرم پرداخت خود، روی «مشاهده برنامه» کلیک کنید.

  • آیا فرم به همین شکلی که هست به اندازه کافی خوب کار می‌کند؟
  • آیا چیزی هست که بخواهید تغییر دهید تا عملکرد بهتری داشته باشد؟
  • روی موبایل چطور؟

برای بازگشت به کد منبع خود، روی مشاهده منبع کلیک کنید.

مرحله ۲: طراحی برای موبایل و دسکتاپ

کد HTML که اضافه کردید معتبر است، اما استایل پیش‌فرض مرورگر، استفاده از فرم را، به خصوص در موبایل، دشوار می‌کند. ظاهر خیلی خوبی هم ندارد.

شما باید با تنظیم فاصله بین خطوط، حاشیه‌ها و اندازه فونت‌ها، مطمئن شوید که فرم‌هایتان در طیف وسیعی از دستگاه‌ها به خوبی کار می‌کنند.

تمام CSS را کپی کرده و در فایل css/main.css خود قرار دهید.

این مقدار CSS خیلی زیاد است! نکات اصلی که باید از آنها آگاه باشید، تغییرات در اندازه‌ها است:

  • padding و margin به ورودی‌ها اضافه می‌شوند.
  • font-size و سایر مقادیر برای اندازه‌های مختلف نمایشگر متفاوت است.

وقتی آماده شدید، روی «مشاهده برنامه» کلیک کنید تا فرم استایل‌بندی‌شده را ببینید. حاشیه‌ها تنظیم شده‌اند و display: block; برای برچسب‌ها استفاده می‌شود تا خودشان روی یک خط قرار بگیرند و ورودی‌ها می‌توانند تمام عرض باشند. بهترین شیوه‌های فرم ورود، مزایای این رویکرد را با جزئیات بیشتری توضیح می‌دهد.

انتخابگر :invalid برای نشان دادن زمانی که یک ورودی مقدار نامعتبر دارد استفاده می‌شود. (شما بعداً در codelab از این استفاده خواهید کرد.)

CSS برای موبایل اولویت دارد:

  • CSS پیش‌فرض برای نمایشگرهایی با عرض کمتر از 400px است.
  • کوئری‌های رسانه‌ای برای نادیده گرفتن پیش‌فرض برای نماهایی که حداقل 400px عرض دارند و سپس دوباره برای نماهایی که حداقل 500px عرض دارند، استفاده می‌شوند. این باید برای تلفن‌های کوچک‌تر، دستگاه‌های تلفن همراه با صفحه نمایش بزرگتر و روی دسکتاپ به خوبی کار کند.

هر زمان که برای وب چیزی می‌سازید، باید آن را روی دستگاه‌ها و اندازه‌های مختلف نمایشگر آزمایش کنید. این امر به ویژه در مورد فرم‌ها صادق است، زیرا یک اشکال کوچک می‌تواند آنها را غیرقابل استفاده کند. شما همیشه باید نقاط شکست CSS را تنظیم کنید تا مطمئن شوید که آنها با محتوای شما و دستگاه‌های هدف شما به خوبی کار می‌کنند.

  • آیا کل فرم قابل مشاهده است؟
  • آیا ورودی‌های فرم به اندازه کافی بزرگ هستند؟
  • آیا تمام متن قابل خواندن است؟
  • آیا متوجه تفاوتی بین استفاده از یک دستگاه تلفن همراه واقعی و مشاهده فرم در حالت دستگاه در Chrome DevTools شدید؟
  • آیا نیاز به تنظیم نقاط شکست داشتید؟

روش‌های مختلفی برای آزمایش فرم شما در دستگاه‌های مختلف وجود دارد:

مرحله ۳: اضافه کردن ویژگی‌ها برای کمک به کاربران در وارد کردن داده‌ها

مرورگر را قادر به ذخیره و تکمیل خودکار مقادیر ورودی کنید و دسترسی به ویژگی‌های پرداخت و اعتبارسنجی داخلی امن را فراهم کنید.

ویژگی‌هایی را به فرم در فایل 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>

دوباره برنامه خود را مشاهده کنید و سپس روی فیلد شماره کارت ضربه بزنید یا کلیک کنید. بسته به دستگاه و پلتفرم، ممکن است یک انتخابگر را ببینید که روش‌های پرداخت ذخیره شده برای مرورگر را نشان می‌دهد.

دو اسکرین‌شات از فرم پرداخت در کروم روی گوشی اندروید. یکی انتخابگر کارت پرداخت داخلی مرورگر را نشان می‌دهد؛ دیگری مقادیر خودکار پر شده در جای‌نگهدارنده را نشان می‌دهد.
انتخابگر پرداخت و تکمیل خودکار فرم در مرورگر داخلی

پس از انتخاب روش پرداخت و وارد کردن کد امنیتی، مرورگر با استفاده از مقادیر autocomplete کارت پرداخت که به فرم اضافه کرده‌اید، فرم را به صورت خودکار پر می‌کند:

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

بسیاری از مرورگرها همچنین اعتبار شماره کارت‌های اعتباری و کدهای امنیتی را بررسی و تأیید می‌کنند.

در دستگاه تلفن همراه، متوجه خواهید شد که به محض اینکه روی فیلد شماره کارت ضربه بزنید، یک صفحه کلید عددی نمایش داده می‌شود. این به این دلیل است که inputmode="numeric" استفاده کرده‌اید. برای فیلدهای عددی، این کار وارد کردن اعداد را آسان‌تر و وارد کردن کاراکترهای غیرعددی را غیرممکن می‌کند و به کاربران یادآوری می‌کند که نوع داده‌ای که وارد می‌کنند چیست.

بسیار مهم است که تمام مقادیر autocomplete موجود را به درستی به فرم‌های پرداخت اضافه کنید. کاملاً رایج است که سایت‌ها مقدار autocomplete برای تاریخ انقضای کارت و سایر فیلدها را از قلم بیندازند. اگر یک مقدار autofill اشتباه یا مفقود باشد، کاربران باید کارت واقعی خود را برای وارد کردن دستی اطلاعات کارت بازیابی کنند و ممکن است فروش را از دست بدهید. اگر تکمیل خودکار فرم‌های پرداخت به درستی کار نکند، کاربران ممکن است تصمیم بگیرند که سابقه‌ای از جزئیات کارت پرداخت را در تلفن یا رایانه خود نگه دارند که بسیار ناامن است.

فرم پرداخت را با یک فیلد خالی ارسال کنید. مرورگر از شما می‌خواهد داده‌های ناقص را تکمیل کنید. حالا یک حرف به مقدار فیلد شماره کارت اضافه کنید و فرم را ارسال کنید. مرورگر هشدار می‌دهد که مقدار نامعتبر است. این اتفاق می‌افتد زیرا شما از ویژگی pattern برای تعیین مقادیر معتبر برای یک فیلد استفاده کرده‌اید. همین امر برای maxlength و سایر محدودیت‌های اعتبارسنجی نیز صدق می‌کند. نیازی به جاوا اسکریپت نیست.

فرم پرداخت شما اکنون باید به این شکل باشد:

  • سعی کنید مقادیر autocomplete را حذف کرده و فرم پرداخت را پر کنید. با چه مشکلاتی روبرو می‌شوید؟
  • فرم‌های پرداخت فروشگاه‌های آنلاین را امتحان کنید. در نظر بگیرید که چه چیزی خوب کار می‌کند و چه چیزی اشتباه پیش می‌رود. آیا مشکلات رایج یا بهترین شیوه‌هایی وجود دارد که باید دنبال کنید؟

مرحله ۴: غیرفعال کردن دکمه پرداخت پس از ارسال فرم

شما باید غیرفعال کردن دکمه ارسال را پس از لمس یا کلیک کاربر - به خصوص هنگام پرداخت - در نظر بگیرید. بسیاری از کاربران بارها و بارها دکمه‌ها را لمس یا کلیک می‌کنند ، حتی اگر به خوبی کار کنند. این می‌تواند باعث ایجاد مشکل در پردازش پرداخت و افزایش بار سرور شود.

کد جاوا اسکریپت زیر را به فایل js/main.js خود اضافه کنید:

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() ، باید به این شکل باشد:

  • متوجه خواهید شد که جاوا اسکریپت شامل کد کامنت‌گذاری شده برای اعتبارسنجی داده‌ها است. این کد از API اعتبارسنجی محدودیت (که به طور گسترده پشتیبانی می‌شود) برای افزودن اعتبارسنجی سفارشی استفاده می‌کند و به رابط کاربری داخلی مرورگر برای تنظیم فوکوس و نمایش اعلان‌ها دسترسی دارد. کد را از حالت کامنت خارج کرده و آن را امتحان کنید. باید مقادیر مناسبی را برای someregex و message تنظیم کنید و مقداری را برای someField تنظیم کنید.

  • برای شناسایی راه‌های بهبود فرم‌هایتان، چه داده‌های تحلیلی و نظارت بر کاربر واقعی را رصد می‌کنید؟

فرم پرداخت کامل شما اکنون باید به شکل زیر باشد:

ادامه بده

ویژگی‌های مهم فرم زیر را که در این آزمایشگاه کد پوشش داده نشده‌اند، در نظر بگیرید:

  • به اسناد شرایط خدمات و سیاست حفظ حریم خصوصی خود پیوند دهید: برای کاربران روشن کنید که چگونه از داده‌های آنها محافظت می‌کنید.

  • سبک و برندسازی: مطمئن شوید که این موارد با بقیه سایت شما مطابقت دارند. هنگام وارد کردن نام و آدرس و پرداخت، کاربران باید احساس راحتی کنند و اعتماد داشته باشند که هنوز در جای درست هستند.

  • تجزیه و تحلیل و نظارت بر کاربر واقعی : امکان آزمایش و نظارت بر عملکرد و قابلیت استفاده طراحی فرم شما برای کاربران واقعی را فراهم می‌کند.