Harus memasukkan kembali alamat Anda untuk kesepuluh kalinya melelahkan. Browser, dan Anda, sebagai developer, dapat membantu pengguna memasukkan data lebih cepat, dan menghindari memasukkan data kembali.
Modul ini mengajarkan cara kerja isi otomatis, serta cara autocomplete
dan atribut elemen
lainnya dapat memastikan bahwa browser menawarkan opsi isi otomatis yang sesuai.
Bagaimana cara kerja isi otomatis?
Di pengantar isi otomatis, Anda sudah mempelajari dasar-dasar isi otomatis. Namun, mengapa browser menawarkan isi otomatis?
Mengisi formulir bukanlah aktivitas yang menarik, tetapi masih merupakan hal yang sering Anda lakukan. Seiring waktu, Anda mengisi berbagai formulir, dan Anda sering mengisi data yang sama. Salah satu cara untuk membantu pengguna mengisi formulir lebih cepat adalah dengan menawarkan opsi untuk otomatis mengisi kolom formulir dengan data yang dimasukkan sebelumnya. Itu adalah {i>autofill <i}(isi otomatis).
Bagaimana cara browser mengetahui data apa yang akan diisi otomatis? Lihatlah contoh isian formulir untuk mencari tahu.
<label for="name">Name</label>
<input name="name" id="name">
Jika Anda mengirimkan kolom formulir ini, browser akan menyimpan nilai (data yang dimasukkan)
bersama dengan nilai atribut name
(nama). Beberapa browser juga melihat
atribut id
saat menyimpan dan mengisi data.
Misalnya, beberapa minggu kemudian, Anda mengisi formulir lain di situs web lain. Situs ini juga
berisi kolom formulir dengan name="name"
. Browser kini dapat menawarkan isi otomatis,
karena nilai untuk nama sudah disimpan.
Isi otomatis sangat berguna dalam formulir yang biasa Anda gunakan, seperti pendaftaran dan login, pembayaran, checkout, dan formulir yang mengharuskan Anda memasukkan nama atau alamat.
Anda dapat membantu browser menawarkan opsi isi otomatis terbaik dengan menggunakan nilai
yang sesuai untuk atribut autocomplete
. Ada banyak kemungkinan nilai untuk autocomplete
. Berikut adalah contoh alamat.
Apakah browser Anda sudah menyimpan alamat untuk Anda? Bagus. Setelah Anda berinteraksi dengan kolom pertama di formulir alamat, browser akan menampilkan daftar alamat yang tersimpan. Anda dapat memilih satu, dan browser akan mengisi semua kolom yang terkait dengan alamat tersebut. Isi otomatis mempercepat dan mudah mengisi formulir.
Tidak semua formulir alamat memiliki kolom yang sama, dan urutan kolom juga bervariasi.
Menggunakan nilai yang benar untuk autocomplete
akan memastikan bahwa browser mengisi nilai yang benar untuk sebuah formulir. Ada nilai untuk country
, postal-code
,
dan banyak
lainnya.
Pastikan pengguna dapat login dengan cepat dan menggunakan sandi yang aman
Banyak orang tidak pandai mengingat {i>password<i}. Sandi yang paling umum adalah '123456', diikuti dengan kombinasi lain yang mudah diingat. Bagaimana Anda bisa menggunakan sandi yang aman dan unik tanpa mengingat semuanya?
Browser memiliki pengelola sandi bawaan untuk membuat, menyimpan, dan mengisi sandi untuk Anda. Lihat cara Anda dapat membantu browser dengan pengisian email otomatis dan mengelola sandi.
Anda dapat menggunakan autocomplete="email"
untuk kolom email, sehingga pengguna mendapatkan opsi isi otomatis untuk alamat email.
Karena ini adalah formulir pendaftaran, pengguna tidak seharusnya mendapatkan opsi untuk mengisi sandi
yang digunakan sebelumnya. Anda dapat menggunakan autocomplete="new-password"
untuk memastikan browser
menawarkan opsi untuk membuat sandi baru.
Pada formulir login, Anda dapat menggunakan autocomplete="current-password"
untuk memberi tahu
browser agar menawarkan opsi guna mengisi sandi yang disimpan sebelumnya untuk
situs ini.
Anda dapat menyiapkan autentikasi 2 langkah di banyak situs. Selain sandi, kode sekali pakai dikirim melalui SMS atau aplikasi autentikasi 2 langkah.
Bukankah lebih bagus jika kode yang Anda terima dalam pesan SMS disarankan
oleh keyboard virtual, dan Anda dapat langsung memilihnya untuk mengisi
nilai? Di Safari 14 atau yang lebih baru, Anda dapat menggunakan
autocomplete="one-time-code"
untuk melakukannya. Di Chrome di Android, Anda dapat menggunakan WebOTP
API untuk melakukannya
dengan JavaScript.
Pelajari lebih lanjut cara memverifikasi nomor telepon di web dengan praktik terbaik formulir OTP SMS.
Membantu pengguna mengisi informasi kartu kredit mereka
Di banyak situs e-commerce, Anda dapat menggunakan kartu kredit untuk membeli produk. Situs dapat menggunakan platform pembayaran pihak ketiga yang menyediakan formulirnya sendiri, tetapi jika Anda perlu membuat formulir pembayaran sendiri, pastikan pengguna dapat mengisi informasi pembayaran dengan mudah.
Anda dapat menggunakan atribut autocomplete
lagi, untuk memastikan browser menawarkan
opsi isi otomatis yang benar.
Ada nilai untuk nomor kartu kredit cc-number
, tanggal kedaluwarsa
kartu kredit cc-exp
, dan semua informasi lain
yang diperlukan
untuk pembayaran kartu kredit.
Gunakan satu input untuk nomor seperti nomor kartu kredit dan nomor
telepon, guna memastikan browser menawarkan isi otomatis. Gunakan elemen formulir standar, misalnya, <select>
untuk tanggal kartu pembayaran, bukan elemen kustom, untuk memastikan pelengkapan otomatis tersedia.
Pelajari lebih lanjut cara membantu pengguna agar tidak memasukkan ulang data pembayaran.
Memastikan isi otomatis berfungsi untuk semua kolom Anda
Selain alamat, informasi akun, dan informasi kartu kredit, ada banyak kolom lain tempat browser dapat membantu pengguna menggunakan fitur isi otomatis.
Saat menambahkan kolom telepon ke formulir, periksa apakah Anda dapat menggunakan salah satu nilai yang tersedia untuk pelengkapan otomatis. Menemukan nilai yang sesuai untuk kolom formulir Anda? Tambahkan.
Menggunakan nilai yang sesuai untuk atribut autocomplete
akan membantu browser menawarkan
opsi isi otomatis terbaik, dan membantu pengguna mengisi formulir lebih cepat.
Membantu browser memahami bahwa kolom tidak boleh diisi otomatis
Anda telah mempelajari cara kerja isi otomatis, cara membantu browser dengan fitur isi otomatis, dan alasan isi otomatis memudahkan pengguna untuk mengisi formulir. Namun, terkadang Anda tidak ingin browser menawarkan isi otomatis.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Salah satu fitur isi otomatis tidak berguna adalah saat memasukkan nilai unik satu kali
seperti kolom kode sekali pakai. Nilainya berbeda setiap saat, dan
browser tidak boleh menyimpan nilai atau menawarkan opsi isi otomatis. Anda dapat menggunakan
autocomplete="off"
untuk kolom tersebut guna mencegah isi otomatis.
Kasus penggunaan lain untuk autocomplete="off"
adalah kolom honeypot (lihat modul
sebelumnya). Meskipun kolom ini tidak
terlihat, browser dapat mengisinya secara otomatis dengan kolom lainnya. Menonaktifkan fitur isi otomatis
memastikan pengguna sungguhan tidak akan teridentifikasi sebagai bot karena kolom
diisi otomatis.
Sebaiknya nonaktifkan isi otomatis hanya jika Anda yakin tindakan tersebut akan membantu pengguna.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang isi otomatis
Nilai pelengkapan otomatis apa yang harus Anda gunakan untuk kolom sandi di formulir pendaftaran?
autocomplete="password"
autocomplete="off"
autocomplete="new-password"
autocomplete="current-password"