Setelah mempelajari tentang elemen formulir dan cara membuat formulir interaktif, mari kita lihat bagaimana Anda dapat membantu pengguna menghindari memasukkan ulang data.
Optimalkan fitur isi otomatis
Mengisi formulir dapat memakan waktu. Misalnya, memasukkan kembali alamat Anda berulang kali di setiap situs tempat Anda ingin membeli sesuatu bukanlah pengalaman belanja yang memuaskan.
Fitur isi otomatis dapat membantu Anda di sini. Anda memasukkan alamat satu kali. Mulai sekarang, browser akan menawarkan opsi untuk mengisi alamat yang sama untuk formulir lain secara otomatis.
Kamu pindah ke kota lain? Jangan khawatir untuk mendapatkan alamat lama sebagai opsi selamanya. Anda dapat mengedit data alamat yang disimpan browser untuk Anda agar selalu yang terbaru.
Bagaimana cara kerja isi otomatis di browser?
Kolom alamat dapat terlihat sangat berbeda di situs yang berbeda. Bagaimana cara browser mengetahui bahwa itu adalah {i>field<i} alamat?
Penggunaan browser
heuristik untuk mengidentifikasi
ruang isian alamat.
Apa saja nilai atribut name, type, dan id?
Apakah ada atribut autocomplete yang ada di kontrol formulir?
Berdasarkan informasi ini, browser dapat menawarkan opsi untuk mengisi otomatis kolom dengan data yang sebelumnya dimasukkan dari jenis yang sama. Browser bahkan menawarkan untuk mengisi otomatis seluruh formulir.
Membantu browser dengan isi otomatis
Mari kita lihat apa yang dapat Anda lakukan untuk membantu browser menawarkan opsi isi otomatis yang tepat.
Gunakan nilai atribut yang logis
Seperti yang Anda pelajari, browser dapat mengidentifikasi jenis data dengan melihat atribut kontrol formulir.
<label for="email">Email</label>
<input type="email" name="email" id="email">
Apakah Anda memiliki kolom tempat pengguna harus memasukkan alamat email mereka?
Gunakan email sebagai nilai untuk atribut name, id, dan type.
Tiga petunjuk untuk browser bahwa ini adalah kolom email.
Atribut pelengkapan otomatis
Ada contoh lain yang masih menyulitkan browser untuk mengidentifikasi jenis data hanya dari atribut name, id, dan type.
Anda dapat memberikan bantuan di sini dengan menggunakan atribut autocomplete.
Apakah Anda pernah memasukkan nama sebelumnya di browser yang Anda gunakan? Browser mungkin akan menawarkan opsi untuk mengisinya lagi untuk kolom ini dalam demo.
Anda dapat mempelajari lebih lanjut tentang cara pelengkapan otomatis dan isi otomatis di modul selanjutnya.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang isi otomatis
Berdasarkan atribut mana yang ditawarkan isi otomatis?
name.typeautocomplete