Setelah mempelajari elemen formulir dan cara membuat formulir interaktif, mari kita lihat cara membantu pengguna agar tidak perlu memasukkan ulang data.
Mengoptimalkan penggunaan 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 baik.
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.
Anda pindah ke kota lain? Jangan khawatir jika alamat lama tidak lagi tersedia sebagai opsi. Anda dapat mengedit data alamat yang disimpan browser untuk Anda agar selalu diperbarui.
Bagaimana cara kerja isi otomatis di browser?
Kolom alamat dapat terlihat sangat berbeda di situs yang berbeda. Bagaimana cara browser mengetahui bahwa kolom tersebut adalah kolom alamat?
Browser menggunakan
heuristika untuk mengidentifikasi kolom alamat.
Apa nilai atribut name, type, dan id?
Apakah ada atribut autocomplete di 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 masuk akal
Seperti yang telah 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 dengan menggunakan atribut autocomplete.
Pernahkah Anda 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 cara menggunakan pelengkapan otomatis dan isi otomatis di modul berikutnya.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang isi otomatis
Berdasarkan atribut mana isi otomatis ditawarkan?
name.typeautocomplete