Setelah mempelajari elemen formulir dan cara membuat formulir interaktif, mari kita lihat bagaimana Anda dapat membantu pengguna menghindari memasukkan kembali data.
Manfaatkan 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 menyenangkan.
Isi otomatis dapat membantu Anda dalam hal ini. Anda memasukkan alamat satu kali. Mulai sekarang, browser akan menawarkan opsi mengisi alamat yang sama untuk formulir lain secara otomatis.
Anda pindah ke kota lain? Jangan khawatir, alamat lama akan tetap tersedia sebagai opsi selamanya. Anda dapat mengedit data alamat yang telah disimpan oleh browser untuk Anda agar selalu terbaru.
Bagaimana cara kerja isi otomatis di browser?
Bidang alamat dapat terlihat sangat berbeda di situs yang berbeda. Bagaimana cara browser mengetahui bahwa itu adalah bidang alamat?
Browser menggunakan
heuristik untuk mengidentifikasi kolom alamat.
Apa saja nilai atribut name, type, dan id?
Apakah ada atribut autocomplete pada kontrol formulir?
Berdasarkan informasi ini, browser dapat menawarkan opsi untuk mengisi otomatis kolom dengan data yang dimasukkan sebelumnya dari jenis yang sama. Browser bahkan dapat 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 benar.
Menggunakan 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 sulit bagi browser untuk mengidentifikasi jenis data hanya dari atribut name, id, dan type.
Anda dapat membantu di sini menggunakan atribut autocomplete.
Pernahkah Anda memasukkan nama sebelumnya di browser yang digunakan? Browser mungkin akan menawarkan opsi untuk mengisinya lagi untuk kolom ini dalam demo.
Anda dapat mempelajari lebih lanjut cara menggunakan pelengkapan otomatis dan isi otomatis di modul selanjutnya.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang isi otomatis
Berdasarkan atribut apa yang ditawarkan isi otomatis?
name.typeautocomplete