Harus memasukkan kembali alamat Anda untuk kesepuluh kalinya sangat melelahkan. {i>Browser<i}, dan Anda,
sebagai developer, dapat membantu pengguna memasukkan data lebih cepat, dan menghindari memasukkan kembali data.
Modul ini menjelaskan cara kerja isi otomatis, serta cara autocomplete
dan lainnya
atribut elemen tersebut dapat memastikan bahwa browser menawarkan opsi {i>autofill <i}yang sesuai.
Bagaimana cara kerja isi otomatis?
Di pengantar isi otomatis, Anda sudah mempelajari dasar-dasar {i>autofill <i}(isi otomatis) Namun, mengapa browser menawarkan fitur isi otomatis?
Mengisi formulir bukanlah aktivitas yang menarik, tetapi masih sesuatu yang Anda lakukan sesering mungkin. Seiring waktu, Anda akan mengisi banyak formulir, dan sering mengisi data yang sama. Salah satu cara untuk membantu pengguna mengisi formulir lebih cepat adalah dengan menawarkan opsi untuk mengisi bidang formulir secara otomatis dengan data yang dimasukkan sebelumnya. Itu adalah isi otomatis.
Bagaimana browser mengetahui data apa yang akan diisi otomatis? Lihat contoh formulir yang ingin dicari tahu.
<label for="name">Name</label>
<input name="name" id="name">
Jika Anda mengirimkan kolom formulir ini, browser akan menyimpan nilai (data yang Anda masukkan)
beserta nilai atribut name
(nama). Beberapa {i>browser<i}
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 Anda sekarang dapat
menawarkan isi otomatis,
karena nilai untuk nama sudah disimpan.
Isi otomatis sangat berguna dalam formulir yang biasa Anda gunakan, seperti pendaftaran dan info masuk, pembayaran, pembayaran, dan formulir di mana Anda harus memasukkan nama atau alamat IPv6
Anda dapat membantu browser menawarkan opsi isi otomatis terbaik dengan menggunakan
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 isian pertama di formulir alamat, browser akan menampilkan daftar dari alamat yang disimpan. Anda dapat memilih salah satu, dan browser akan mengisi semua kolom yang terkait dengan alamat. Fitur isi otomatis membuat pengisian formulir menjadi cepat dan mudah.
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 formulir. Ada nilai untuk country
, postal-code
,
dan banyak
selengkapnya.
Pastikan pengguna dapat login dengan cepat dan menggunakan sandi yang aman
Kebanyakan orang tidak pandai mengingat {i>password<i}. Cara paling umum sandi adalah '123456', diikuti dengan kombinasi lain yang mudah diingat. Bagaimana cara menggunakan {i>password<i} yang aman dan unik tanpa mengingat semuanya?
Browser memiliki pengelola sandi bawaan untuk membuat, menyimpan, dan mengisi sandi {i>password<i} untuk Anda. Lihat cara membantu browser mengisi email secara otomatis dan mengelola {i>password<i}.
Anda dapat menggunakan autocomplete="email"
untuk kolom email, sehingga pengguna akan mendapatkan fitur isi otomatis
untuk alamat email.
Karena ini adalah formulir pendaftaran, pengguna tidak akan mendapatkan opsi untuk mengisi sebelumnya
{i>password<i} yang digunakan. Anda dapat menggunakan autocomplete="new-password"
untuk memastikan browser
menawarkan opsi untuk membuat {i>password<i} baru.
Di formulir login, Anda dapat menggunakan autocomplete="current-password"
untuk memberi tahu
browser untuk menawarkan opsi guna mengisi sandi
yang disimpan sebelumnya untuk
situs Anda.
Anda dapat menyiapkan autentikasi 2 langkah di banyak situs. Selain pasal {i>password<i}, kode sekali pakai dikirim dengan SMS atau aplikasi otentikasi dua faktor.
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 mencapai hal tersebut. Di Chrome dan Android, Anda dapat menggunakan WebOTP
API yang diperlukan untuk mencapai
ini dengan JavaScript.
Pelajari lebih lanjut cara memverifikasi nomor telepon di web dengan formulir OTP SMS praktik terbaik kami.
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-orang dapat dengan mudah mengisi informasi pembayaran Anda.
Anda dapat menggunakan atribut autocomplete
lagi, untuk memastikan browser menawarkan
pilihan {i>autofill <i}yang benar.
Ada nilai untuk nomor kartu kredit cc-number
, tanggal habis masa berlaku kartu kredit
tanggal cc-exp
, dan semua informasi lainnya
diperlukan
untuk pembayaran dengan kartu kredit.
Menggunakan satu input untuk angka, seperti nomor kartu kredit dan telepon
angka, untuk memastikan browser menawarkan isi otomatis. Gunakan elemen formulir standar, untuk
misalnya, <select>
untuk tanggal kartu pembayaran, bukan elemen khusus, untuk
untuk memastikan pelengkapan otomatis tersedia.
Pelajari lebih lanjut cara membantu pengguna agar tidak memasukkan kembali pembayaran data Anda.
Memastikan isi otomatis berfungsi untuk semua kolom Anda
Selain alamat, informasi akun, dan informasi kartu kredit, ada banyak kolom lainnya tempat browser dapat membantu pengguna dengan fitur isi otomatis.
Saat menambahkan bidang telepon ke formulir, periksa apakah Anda dapat menggunakan tersedia nilai-nilai 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 alasannya fitur isi otomatis akan memudahkan pengguna dalam mengisi formulir. Namun, terkadang Anda tidak ingin {i>browser<i} 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 hal yang kurang membantu fitur isi otomatis adalah saat memasukkan nilai unik satu kali
seperti isian kode sekali pakai. Nilainya berbeda setiap saat, dan
browser tidak boleh menyimpan nilai atau
menawarkan opsi {i>autofill.<i} Anda dapat menggunakan
autocomplete="off"
untuk kolom tersebut guna mencegah isi otomatis.
Kasus penggunaan lain untuk autocomplete="off"
adalah kolom honeypot (lihat sebelumnya
modul). Meskipun bidang ini tidak
terlihat, browser dapat mengisi otomatisnya dengan kolom lainnya. Mengaktifkan isi otomatis
memastikan bahwa pengguna sebenarnya tidak
diidentifikasi sebagai bot, karena kolom
selesai secara otomatis.
Sebaiknya hanya nonaktifkan fitur isi otomatis jika Anda yakin akan membantu pengguna.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang isi otomatis
Apa nilai pelengkapan otomatis yang harus Anda gunakan untuk kolom sandi dalam formulir pendaftaran?
autocomplete="new-password"
autocomplete="off"
autocomplete="password"
autocomplete="current-password"