Codelab praktik terbaik formulir pembayaran

Sam Dutton

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

Langkah 1: Gunakan HTML sebagaimana mestinya

Gunakan elemen yang dibuat untuk pekerjaan:

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

Seperti yang akan Anda lihat, elemen ini memungkinkan fungsi browser bawaan, meningkatkan aksesibilitas, dan menambahkan makna ke markup Anda.

• Klik Remix to Edit 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>

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

Klik Lihat Aplikasi untuk melihat pratinjau formulir pembayaran Anda.

• Apakah formulir sudah berfungsi dengan baik?
• Apakah ada yang ingin Anda ubah untuk membuatnya berfungsi lebih baik?
• Bagaimana dengan perangkat seluler?

Klik Lihat Sumber untuk kembali ke kode sumber Anda.

Langkah 2: Buat desain untuk perangkat seluler dan desktop

HTML yang Anda tambahkan valid, tetapi gaya visual browser default membuat formulir sulit digunakan, terutama di perangkat seluler. Tampilannya juga tidak terlalu 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 dalam file css/main.css Anda sendiri.

CSS-nya banyak sekali! Hal utama yang perlu diperhatikan adalah perubahan ukuran:

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

Jika sudah siap, klik Lihat Aplikasi untuk melihat formulir bergaya. Anda juga akan melihat bahwa batas telah disesuaikan, dan display: block; digunakan untuk label sehingga terlihat sesuai barisnya sendiri, dan inputnya bisa memiliki lebar penuh. Praktik terbaik formulir login menjelaskan manfaat pendekatan ini secara lebih mendetail.

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

CSS mengutamakan perangkat seluler:

• CSS default ditujukan untuk area pandang dengan lebar kurang dari 400px.
• Kueri media digunakan untuk mengganti setelan default untuk area pandang yang lebarnya minimal 400px, lalu lagi untuk area pandang yang lebarnya minimal 500px. Cara ini cocok untuk ponsel kecil, perangkat seluler dengan layar lebih besar, dan desktop.

Setiap kali mem-build untuk web, Anda perlu menguji di berbagai perangkat dan ukuran area pandang. Hal ini terutama berlaku untuk formulir, karena satu gangguan kecil dapat membuatnya 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 ada perbedaan antara menggunakan perangkat seluler sungguhan, dan menampilkan formulir dalam Mode Perangkat di Chrome DevTools?
• Apakah Anda perlu menyesuaikan titik henti sementara?

Ada beberapa cara untuk menguji formulir Anda di berbagai perangkat:

• Gunakan Mode Perangkat Chrome DevTools untuk menyimulasikan perangkat seluler.
• Kirim URL dari komputer ke ponsel.
• Gunakan layanan seperti BrowserStack untuk menguji pada berbagai perangkat dan browser.

Langkah 3: Tambahkan atribut untuk membantu pengguna memasukkan data

Mengaktifkan 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 kembali aplikasi Anda, lalu ketuk atau klik kolom Nomor kartu. Bergantung pada perangkat dan platform, Anda mungkin melihat pemilih yang menampilkan metode pembayaran yang disimpan untuk browser, seperti di bawah ini.

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.

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

Sangat penting untuk menambahkan semua nilai autocomplete yang tersedia ke formulir pembayaran dengan benar. Sangat umum bagi situs kehilangan nilai autocomplete untuk tanggal habis masa berlaku kartu dan kolom lainnya. Jika satu nilai autofill salah atau tidak ada, pengguna harus mengambil kartu sebenarnya untuk memasukkan data kartu secara manual, dan Anda mungkin kehilangan penjualan. Jika isi otomatis pada formulir pembayaran tidak berfungsi dengan benar, pengguna juga dapat memutuskan untuk menyimpan catatan detail kartu pembayaran di ponsel atau komputer mereka, yang sangat tidak aman.

Coba kirim formulir pembayaran dengan kolom kosong. Browser akan meminta untuk melengkapi data yang hilang. Sekarang, tambahkan huruf ke nilai di kolom Nomor kartu dan coba kirim formulir. Browser akan 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. JavaScript tidak diperlukan.

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 hal yang berhasil dan yang tidak. Apakah ada masalah umum atau praktik terbaik yang harus Anda ikuti?

Langkah 4: Nonaktifkan tombol pembayaran setelah formulir dikirimkan

Anda harus mempertimbangkan untuk menonaktifkan tombol kirim setelah pengguna mengetuk atau mengkliknya—terutama saat pengguna melakukan pembayaran. Banyak pengguna mengetuk atau mengklik tombol berulang kali, meskipun tombol tersebut berfungsi dengan baik. Hal ini 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 kirim 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 dikomentari untuk validasi data. Kode ini menggunakan Constraint Validation API (yang didukung secara luas) untuk menambahkan validasi kustom, mengakses UI browser bawaan untuk menetapkan fokus dan menampilkan perintah. Hapus tanda komentar pada kode dan coba. 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 sekarang akan terlihat seperti ini:

• Coba formulir Anda di berbagai perangkat. Perangkat dan browser apa yang Anda targetkan? Bagaimana formulir dapat ditingkatkan?

Lebih lanjut

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

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

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

• Analytics dan Real User Monitoring: memungkinkan performa dan kegunaan desain formulir Anda diuji dan dipantau untuk pengguna sungguhan.