Codelab ini menunjukkan cara membuat metode 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-elemen ini mengaktifkan fungsionalitas {i>built-in browser<i}, meningkatkan aksesibilitas, dan memberikan makna pada 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. Mereka semua adalah
digabungkan dalam <section>
elemen, 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-elemen ini.
Klik Lihat Aplikasi untuk melihat pratinjau formulir pembayaran.
- Apakah formulirnya cukup berfungsi sebagaimana mestinya?
- Apakah ada yang ingin Anda ubah untuk membuatnya berfungsi lebih baik?
- Bagaimana kalau di perangkat seluler?
Klik Lihat Sumber untuk kembali ke kode sumber Anda.
Langkah 2: Desain untuk perangkat seluler dan desktop
HTML yang Anda tambahkan valid, tetapi gaya browser default membuat formulir sulit digunakan, terutama di perangkat seluler. Itu juga tidak terlihat bagus.
Anda perlu 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 sendiri.
Terlalu banyak CSS. Hal utama yang harus diperhatikan adalah perubahan ukuran:
padding
danmargin
ditambahkan ke input.font-size
dan nilai lainnya berbeda untuk ukuran area pandang yang berbeda.
Setelah Anda siap, klik View App untuk melihat gaya formulir. Anda juga akan melihat bahwa
{i>border <i}memiliki
telah disesuaikan, dan display: block;
digunakan untuk label sehingga diletakkan dalam baris sendiri, dan
inputnya bisa berupa lebar penuh. Praktik terbaik formulir login
menjelaskan manfaat pendekatan ini
secara lebih rinci.
Pemilih :invalid
digunakan untuk menunjukkan saat input memiliki nilai yang tidak valid. (Anda akan menggunakan
nanti di codelab.)
CSS mengutamakan perangkat seluler:
- CSS default ditujukan untuk area pandang dengan lebar kurang dari
400px
. - Kueri media adalah
digunakan untuk mengganti default untuk area pandang yang lebarnya minimal
400px
, lalu sekali lagi untuk area pandang yang lebarnya minimal500px
. Ini akan berfungsi dengan baik untuk ponsel yang lebih kecil dan perangkat seluler dengan layar yang lebih besar, dan juga di {i>desktop<i}.
Setiap kali membangun aplikasi untuk web, Anda perlu melakukan pengujian di berbagai perangkat dan ukuran area pandang. Itu adalah terutama untuk formulir, karena satu gangguan kecil dapat membuatnya tidak dapat digunakan. Anda harus selalu menyesuaikan Titik henti sementara CSS untuk memastikan titik henti sementara berfungsi baik dengan dan perangkat target Anda.
- Apakah seluruh formulir terlihat?
- Apakah {i>input<i} formulirnya cukup besar?
- Apakah semua teks dapat dibaca?
- Apakah Anda melihat adanya perbedaan antara menggunakan perangkat seluler sungguhan, dan melihat formulir di Mode Perangkat di Chrome DevTools?
- Apakah Anda perlu menyesuaikan titik henti sementara?
Ada beberapa cara untuk menguji formulir Anda di berbagai perangkat:
- Menggunakan Mode Perangkat Chrome DevTools untuk melakukan simulasi perangkat seluler.
- Kirim URL dari komputer ke ponsel Anda.
- Gunakan layanan seperti BrowserStack untuk melakukan pengujian pada rentang perangkat dan browser.
Langkah 3: Tambahkan atribut untuk membantu pengguna memasukkan data
Aktifkan browser untuk menyimpan dan mengisi otomatis nilai input, serta memberikan akses ke keamanan bawaan pembayaran, dan fitur validasi.
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 kolom Nomor kartu. Tergantung pada perangkat dan 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 Anda, browser akan mengisi otomatis formulir menggunakan
nilai kartu pembayaran autocomplete
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 menyadari bahwa ada keyboard numerik segera setelah Anda mengetuk
Nomor kartu. Hal itu karena Anda menggunakan inputmode="numeric"
. Untuk isian numerik,
ini membuat
lebih mudah untuk memasukkan angka dan tidak mungkin memasukkan
karakter non-numerik, dan mendorong pengguna untuk
mengingat jenis data yang mereka masukkan.
Anda harus menambahkan semua nilai autocomplete
yang tersedia dengan benar ke formulir pembayaran. Penting
cukup umum bagi situs kehilangan nilai autocomplete
untuk tanggal habis masa berlaku kartu dan
kolom. Jika satu nilai autofill
salah atau tidak ada, pengguna harus mengambil nilai sebenarnya
untuk memasukkan data kartu secara manual, dan Anda bisa kehilangan penjualan. Jika isi otomatis pada formulir pembayaran
tidak berfungsi dengan baik, pengguna juga dapat memutuskan untuk menyimpan catatan detail kartu pembayaran di ponsel
atau komputer, yang sangat tidak aman.
Coba kirimkan formulir pembayaran dengan kolom kosong. Permintaan browser untuk menyelesaikan
layanan otomatis dan data skalabel. Sekarang tambahkan huruf ke nilai di kolom Nomor kartu dan coba kirimkan formulirnya. Tujuan
browser memperingatkan bahwa nilai tidak valid. Hal ini terjadi karena Anda menggunakan atribut pattern
untuk
menentukan nilai yang valid untuk sebuah kolom. Hal yang sama berlaku untuk maxlength
dan lainnya
batasan validasi
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 apa saja yang berjalan dengan baik dan mana yang salah. 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 sedang melakukan pembayaran. Banyak pengguna mengetuk atau mengklik tombol berulang kali, bahkan jika mereka bekerja dengan baik. Hal tersebut dapat menyebabkan masalah dengan 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 titik ini, dengan tambahan 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 metrik kustom validasi, mengakses UI browser bawaan untuk mengatur fokus dan menampilkan prompt. Hapus tanda komentar pada kode dan mencobanya. Anda harus menetapkan nilai yang sesuai untuk
someregex
danmessage
, serta menetapkan nilai untuksomeField
.Apa saja data analisis dan Pemantauan Pengguna Nyata akan Anda pantau untuk mengidentifikasi cara memperbaiki formulir Anda?
Formulir pembayaran lengkap Anda sekarang akan terlihat seperti ini:
- Coba formulir Anda di perangkat lain. Perangkat dan browser apa yang Anda penargetan khusus? Bagaimana cara memperbaiki formulirnya?
Lebih jauh
Pertimbangkan fitur formulir penting berikut yang tidak dibahas dalam codelab ini:
Link ke dokumen Persyaratan Layanan dan kebijakan privasi: jelaskan kepada pengguna bagaimana Anda melindungi data mereka.
Gaya dan branding: pastikan keduanya cocok dengan elemen lain di situs Anda. Saat memasukkan nama dan alamat dan melakukan pembayaran, pengguna harus merasa nyaman, percaya bahwa mereka tetap berada di tempat yang tepat.
Pemantauan Analisis dan Pengguna Nyata: memungkinkan performa dan kegunaan desain formulir Anda untuk diuji dan dipantau untuk pengguna sungguhan.