Isi otomatis

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

Resource

• Fitur pelengkapan otomatis .
  • Formulir pembayaran dan alamat terbaik praktik