Isi otomatis

Harus memasukkan kembali alamat Anda untuk kesepuluh kalinya sangat melelahkan. Browser, dan Anda, sebagai developer, dapat membantu pengguna memasukkan data lebih cepat, dan menghindari memasukkan kembali data. Modul ini mengajarkan cara kerja isi otomatis, dan cara autocomplete dan atribut elemen lainnya dapat memastikan bahwa browser menawarkan opsi isi otomatis yang sesuai.

Bagaimana cara kerja isi otomatis?

Dalam pengantar isi otomatis, Anda telah mempelajari dasar-dasar isi otomatis. Namun, mengapa browser menawarkan isi otomatis?

Mengisi formulir bukanlah aktivitas yang menarik, tetapi tetap saja sesuatu yang sering Anda lakukan. Seiring waktu, Anda mengisi banyak formulir, dan Anda sering mengisi data yang sama. Salah satu cara untuk membantu pengguna mengisi formulir dengan lebih cepat adalah dengan menawarkan opsi kepada mereka untuk mengisi kolom formulir secara otomatis dengan data yang sebelumnya dimasukkan. Itu adalah isi otomatis.

Bagaimana cara browser mengetahui data yang akan diisi otomatis? Lihat contoh kolom formulir untuk mengetahuinya.

<label for="name">Name</label>
<input name="name" id="name">

Jika Anda mengirimkan kolom formulir ini, browser akan menyimpan nilai (data yang Anda masukkan) bersama dengan nilai atribut name (nama). Beberapa browser juga melihat atribut id saat menyimpan dan mengisi data.

Katakanlah, beberapa minggu kemudian, Anda mengisi formulir lain di situs lain. Situs ini juga berisi kolom formulir dengan name="name". Browser Anda kini dapat menawarkan isi otomatis, karena nilai untuk nama sudah disimpan.

Isi otomatis sangat berguna dalam formulir yang sering Anda gunakan, seperti pendaftaran dan login, pembayaran, checkout, dan formulir tempat Anda harus 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 dalam formulir alamat, browser akan menampilkan daftar alamat tersimpan. Anda dapat memilih salah satu, dan browser akan mengisi semua kolom yang terkait dengan alamat. Isi otomatis membuat pengisian formulir lebih cepat dan mudah.

Tidak semua formulir alamat memiliki kolom yang sama, dan urutan kolom juga bervariasi. Menggunakan nilai yang benar untuk autocomplete memastikan bahwa browser mengisi nilai yang benar untuk formulir. Ada nilai untuk country, postal-code, dan banyak lagi.

Memastikan pengguna dapat login dengan cepat dan menggunakan sandi yang aman

Banyak orang tidak pandai mengingat sandi. Sandi yang paling umum digunakan adalah '123456', diikuti dengan kombinasi lain yang mudah diingat. Bagaimana cara menggunakan sandi yang aman dan unik tanpa harus mengingat semuanya?

Browser memiliki pengelola sandi bawaan untuk membuat, menyimpan, dan mengisi sandi untuk Anda. Lihat cara Anda dapat membantu browser mengisi otomatis email 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 boleh mendapatkan opsi untuk mengisi sandi yang pernah 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 untuk mengisi sandi yang sebelumnya disimpan untuk situs ini.

Anda dapat menyiapkan autentikasi 2 langkah di banyak situs. Selain sandi, kode sekali pakai dikirim melalui SMS atau aplikasi autentikasi dua faktor.

Bukankah akan lebih baik 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 mencapai hal ini dengan JavaScript.

Pelajari lebih lanjut cara memverifikasi nomor telepon di web dengan praktik terbaik formulir OTP SMS.

Perhatian: SMS sendiri bukanlah metode autentikasi yang paling aman, karena nomor telepon dapat didaur ulang dan dibajak. Pertimbangkan untuk menggunakan metode autentikasi 2 faktor lainnya atau autentikasi multi-faktor.

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 formulir sendiri, tetapi jika Anda perlu membuat formulir pembayaran sendiri, pastikan orang 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 habis masa berlaku kartu kredit cc-exp, dan semua informasi lain yang diperlukan untuk pembayaran kartu kredit.

Gunakan satu input untuk angka seperti nomor kartu kredit dan nomor telepon, untuk memastikan browser menawarkan pengisian 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 menghindari memasukkan ulang data pembayaran.

Memastikan isi otomatis berfungsi untuk semua kolom Anda

Selain alamat, informasi akun, dan informasi kartu kredit, ada banyak lagi kolom tempat browser dapat membantu pengguna dengan 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.

Penggunaan nilai yang sesuai untuk atribut autocomplete membantu browser menawarkan opsi isi otomatis terbaik, dan membantu pengguna mengisi formulir dengan lebih cepat.

Membantu browser memahami bahwa kolom tidak boleh diisi otomatis

Anda telah mempelajari cara kerja isi otomatis, cara membantu browser dengan isi otomatis, dan alasan isi otomatis memudahkan pengguna 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 tempat di mana isi otomatis tidak berguna adalah saat memasukkan nilai unik sekali pakai 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 tidak terlihat, browser dapat mengisi otomatis kolom tersebut bersama dengan kolom lainnya. Menonaktifkan fitur isi otomatis memastikan pengguna sebenarnya tidak diidentifikasi sebagai bot, karena kolom diisi secara otomatis.

Anda hanya boleh menonaktifkan isi otomatis jika Anda yakin hal itu akan membantu pengguna.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang isi otomatis

Resource

• Atribut pelengkapan otomatis.
  • Praktik terbaik formulir pembayaran dan alamat