Codelab praktik terbaik formulir pembayaran

Sam Dutton

Codelab ini menunjukkan cara membuat formulir pembayaran yang aman, dapat diakses, dan mudah digunakan.

Langkah 1: Gunakan HTML sebagaimana mestinya

Gunakan elemen yang dibuat untuk tugas:

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

Seperti yang akan Anda lihat, elemen ini mengaktifkan fungsi browser bawaan, meningkatkan aksesibilitas, dan memberikan makna pada markup Anda.

  • Klik Remix untuk Mengedit agar project dapat diedit.

Lihat HTML untuk formulir Anda di 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>

Terdapat <input> elemen untuk nomor kartu, nama pada kartu, tanggal habis masa berlaku, dan kode keamanan. Semuanya digabungkan dalam elemen <section>, dan masing-masing memiliki label. Tombol Selesaikan Pembayaran adalah HTML <button>. Nanti dalam codelab ini, Anda akan mempelajari fitur browser yang dapat diakses menggunakan elemen ini.

Klik Lihat Aplikasi untuk melihat pratinjau formulir pembayaran.

  • Apakah formulirnya berfungsi cukup baik?
  • Apakah ada sesuatu yang ingin Anda ubah untuk membuatnya berfungsi lebih baik?
  • Bagaimana kalau di perangkat seluler?

Klik View Source untuk kembali ke kode sumber Anda.

Langkah 2: Desain untuk perangkat seluler dan desktop

HTML yang Anda tambahkan valid, tetapi gaya visual browser default membuat formulir ini sulit digunakan, terutama di perangkat seluler. Itu juga tidak terlihat bagus.

Anda harus memastikan formulir berfungsi dengan baik di berbagai perangkat dengan menyesuaikan padding, margin, dan ukuran font.

Salin semua CSS di bawah dan tempelkan ke file css/main.css Anda.

Terlalu banyak CSS! Hal utama yang harus diperhatikan adalah perubahan ukuran:

  • padding dan margin ditambahkan ke input.
  • font-size dan nilai lainnya berbeda untuk ukuran area pandang yang berbeda.

Jika sudah siap, klik Lihat Aplikasi untuk melihat formulir yang telah ditata gayanya. Anda juga akan melihat bahwa batas telah disesuaikan, dan display: block; digunakan untuk label sehingga batas berada pada baris sendiri, dan input bisa memiliki lebar penuh. Praktik terbaik formulir login menjelaskan manfaat pendekatan ini secara lebih mendetail.

Pemilih :invalid digunakan untuk menunjukkan saat input memiliki nilai yang tidak valid. (Anda akan menggunakannya nanti di codelab.)

CSS mengutamakan seluler:

  • CSS default adalah untuk area pandang dengan lebar kurang dari 400px.
  • Kueri media digunakan untuk mengganti setelan default untuk area pandang yang lebarnya minimal 400px, lalu digunakan lagi untuk area pandang yang lebarnya minimal 500px. Ini akan berfungsi dengan baik untuk ponsel yang lebih kecil, perangkat seluler dengan layar yang lebih besar, dan pada desktop.

Setiap kali Anda membangun untuk web, Anda perlu mengujinya di berbagai perangkat dan ukuran area pandang. Hal ini terutama berlaku untuk formulir, karena satu kesalahan kecil dapat membuat formulir tidak dapat digunakan. Anda harus selalu menyesuaikan titik henti sementara CSS untuk memastikannya berfungsi dengan baik dengan konten dan perangkat target Anda.

  • Apakah seluruh formulir terlihat?
  • Apakah input formulir cukup besar?
  • Apakah semua teks dapat dibaca?
  • Apakah Anda melihat perbedaan antara menggunakan perangkat seluler sungguhan, dan melihat formulir dalam Mode Perangkat di Chrome DevTools?
  • Apakah Anda perlu menyesuaikan titik henti sementara?

Ada beberapa cara untuk menguji formulir Anda di berbagai perangkat:

Langkah 3: Tambahkan atribut untuk membantu pengguna memasukkan data

Aktifkan browser untuk menyimpan dan mengisi otomatis nilai input, serta memberikan akses ke fitur pembayaran dan validasi bawaan yang aman.

Tambahkan atribut ke formulir di file index.html Anda sehingga terlihat seperti ini:

<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>

Lihat aplikasi Anda lagi, lalu ketuk atau klik di kolom Nomor kartu. Bergantung pada perangkat dan platformnya, Anda mungkin melihat pemilih yang menampilkan metode pembayaran yang disimpan untuk browser, seperti di bawah ini.

Dua screenshot formulir pembayaran di Chrome pada ponsel Android. Satu menampilkan pemilih kartu pembayaran browser bawaan; sementara yang lain menampilkan nilai placeholder yang diisi otomatis.
Isi otomatis dan pemilih pembayaran browser bawaan.

Setelah Anda memilih metode pembayaran dan memasukkan kode keamanan, browser akan mengisi otomatis formulir menggunakan nilai autocomplete kartu pembayaran yang Anda tambahkan ke formulir:

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

Banyak browser juga memeriksa dan mengonfirmasi validitas nomor kartu kredit dan kode keamanan.

Pada perangkat seluler, Anda juga akan melihat bahwa Anda mendapatkan keyboard numerik segera setelah mengetuk kolom Nomor kartu. Hal ini terjadi karena Anda menggunakan inputmode="numeric". Untuk kolom numerik, hal ini memudahkan memasukkan angka dan tidak mungkin memasukkan karakter non-numerik, serta mendorong pengguna untuk mengingat jenis data yang mereka masukkan.

Anda harus menambahkan semua nilai autocomplete yang tersedia ke formulir pembayaran dengan benar. Situs biasanya kehilangan nilai autocomplete untuk tanggal habis masa berlaku kartu dan kolom lainnya. Jika satu nilai autofill salah atau tidak ada, pengguna harus mengambil kartu yang sebenarnya untuk memasukkan data kartu secara manual, dan Anda bisa kehilangan penjualan. Jika isi otomatis di formulir pembayaran tidak berfungsi dengan baik, pengguna juga dapat memutuskan untuk menyimpan data detail kartu pembayaran di ponsel atau komputer mereka, dan hal ini sangat tidak aman.

Coba kirimkan formulir pembayaran dengan kolom kosong. Browser meminta untuk melengkapi data yang hilang. Sekarang, tambahkan huruf ke nilai di kolom Nomor kartu dan coba kirimkan formulir. Browser memperingatkan bahwa nilai tidak valid. Hal ini terjadi karena Anda menggunakan atribut pattern untuk menentukan nilai yang valid untuk kolom. Hal yang sama berlaku untuk maxlength dan batasan validasi lainnya Tidak perlu JavaScript.

Formulir pembayaran Anda sekarang akan terlihat seperti ini:

  • Coba hapus nilai autocomplete dan isi formulir pembayaran. Kesulitan apa yang Anda hadapi?
  • Coba formulir pembayaran di toko online. Pertimbangkan apa yang berhasil dan mana yang salah. Apakah ada masalah umum atau praktik terbaik yang harus Anda ikuti?

Langkah 4: Nonaktifkan tombol pembayaran setelah formulir dikirimkan

Sebaiknya nonaktifkan tombol kirim setelah pengguna mengetuk atau mengkliknya—terutama saat pengguna melakukan pembayaran. Banyak pengguna mengetuk atau mengklik tombol berulang kali, meskipun berfungsi dengan baik. Hal tersebut dapat menyebabkan masalah pada pemrosesan pembayaran dan menambah beban server.

Tambahkan JavaScript berikut ke file js/main.js Anda:

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);
  }
}

Coba kirimkan formulir pembayaran dan lihat apa yang terjadi.

Berikut adalah tampilan kode Anda pada tahap ini, dengan penambahan beberapa komentar dan fungsi validate():

  • Anda akan melihat bahwa JavaScript menyertakan kode yang diberi komentar untuk validasi data. Kode ini menggunakan Constraint Validation API (yang didukung secara luas) untuk menambahkan validasi kustom, yang mengakses UI browser bawaan untuk menetapkan fokus dan menampilkan perintah. Hapus tanda komentar pada kode dan cobalah. Anda harus menetapkan nilai yang sesuai untuk someregex dan message, serta menetapkan nilai untuk someField.

  • Data analisis dan Real User Monitoring apa yang akan Anda pantau untuk mengidentifikasi cara meningkatkan kualitas formulir?

Formulir pembayaran lengkap Anda akan terlihat seperti ini:

Melangkah lebih jauh

Pertimbangkan fitur formulir penting berikut yang tidak dibahas dalam codelab ini:

  • Link ke Persyaratan Layanan dan dokumen kebijakan privasi Anda: jelaskan kepada pengguna cara Anda mengamankan data mereka.

  • Gaya dan branding: pastikan semuanya cocok dengan keseluruhan situs Anda. Saat memasukkan nama dan alamat serta melakukan pembayaran, pengguna harus merasa nyaman, percaya bahwa mereka masih di tempat yang tepat.

  • Analytics dan Pemantauan Pengguna Nyata: memungkinkan performa dan kegunaan desain formulir diuji dan dipantau untuk pengguna sungguhan.