Isi otomatis

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"
Coba lagi.
autocomplete="off"
Coba lagi.
autocomplete="new-password"
🎉
autocomplete="current-password"
Coba lagi.

Referensi